1 files changed, 26 insertions, 0 deletions
diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx
new file mode 100644
index 000000000..9adb1c674
--- /dev/null
+++ b/packages/instant/src/components/animations/slide_animation.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { OptionallyScreenSpecific } from '../../style/media';
+
+import { PositionAnimation, PositionAnimationSettings } from './position_animation';
+
+export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
+export interface SlideAnimationProps {
+    animationState: SlideAnimationState;
+    slideInSettings: OptionallyScreenSpecific<PositionAnimationSettings>;
+    slideOutSettings: OptionallyScreenSpecific<PositionAnimationSettings>;
+    zIndex?: OptionallyScreenSpecific<number>;
+    height?: string;
+}
+
+export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
+    if (props.animationState === 'none') {
+        return <React.Fragment>{props.children}</React.Fragment>;
+    }
+    const positionSettings = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings;
+    return (
+        <PositionAnimation height={props.height} positionSettings={positionSettings} zIndex={props.zIndex}>
+            {props.children}
+        </PositionAnimation>
+    );
+};