1 files changed, 80 insertions, 0 deletions
diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
new file mode 100644
index 000000000..4bb21befb
--- /dev/null
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -0,0 +1,80 @@
+import { Keyframes } from 'styled-components';
+
+import { css, keyframes, styled } from '../../style/theme';
+
+export interface TransitionInfo {
+    from: string;
+    to: string;
+}
+
+const generateTransitionInfoCss = (
+    key: keyof TransitionInfo,
+    top?: TransitionInfo,
+    bottom?: TransitionInfo,
+    left?: TransitionInfo,
+    right?: TransitionInfo,
+): string => {
+    const topStringIfExists = top ? `top: ${top[key]};` : '';
+    const bottomStringIfExists = bottom ? `bottom: ${bottom[key]};` : '';
+    const leftStringIfExists = left ? `left: ${left[key]};` : '';
+    const rightStringIfExists = right ? `right: ${right[key]};` : '';
+    return `
+    ${topStringIfExists}
+    ${bottomStringIfExists}
+    ${leftStringIfExists}
+    ${rightStringIfExists}
+    `;
+};
+
+const slideKeyframeGenerator = (
+    position: string,
+    top?: TransitionInfo,
+    bottom?: TransitionInfo,
+    left?: TransitionInfo,
+    right?: TransitionInfo,
+) => keyframes`
+    from {
+        position: ${position};
+        ${generateTransitionInfoCss('from', top, bottom, left, right)}
+    }
+
+    to {
+        position: ${position};
+        ${generateTransitionInfoCss('to', top, bottom, left, right)}
+    }
+`;
+
+export interface PositionAnimationSettings {
+    top?: TransitionInfo;
+    bottom?: TransitionInfo;
+    left?: TransitionInfo;
+    right?: TransitionInfo;
+    timingFunction: string;
+    duration?: string;
+}
+
+export interface PositionAnimationProps extends PositionAnimationSettings {
+    position: string;
+}
+
+export const PositionAnimation =
+    styled.div <
+    PositionAnimationProps >
+    `
+    animation-name: ${props =>
+        css`
+            ${slideKeyframeGenerator(props.position, props.top, props.bottom, props.left, props.right)};
+        `};
+    animation-duration: ${props => props.duration || '0.3s'};
+    animation-timing-function: ${props => props.timingFunction};
+    animation-delay: 0s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+    position: ${props => props.position};
+    height: 100%;
+    width: 100%;
+`;
+
+PositionAnimation.defaultProps = {
+    position: 'relative',
+};