packages/instant/src/components/animations/slide_animations.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

import * as React from 'react';
import { Keyframes } from 'styled-components';

import { css, keyframes, styled } from '../../style/theme';

const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
    from {
        position: relative;
        top: ${fromY};
    }

    to {
        position: relative;
        top: ${toY};
    }
`;

export interface SlideAnimationProps {
    keyframes: Keyframes;
    animationType: string;
    animationDirection?: string;
}

export const SlideAnimation =
    styled.div <
    SlideAnimationProps >
    `
    animation-name: ${props =>
        css`
            ${props.keyframes};
        `};
    animation-duration: 0.3s;
    animation-timing-function: ${props => props.animationType};
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: ${props => props.animationDirection || 'none'};
    position: relative;
`;

export interface SlideAnimationComponentProps {
    downY: string;
}

export const SlideUpAnimation: React.StatelessComponent<SlideAnimationComponentProps> = props => (
    <SlideAnimation animationType="ease-in" keyframes={slideKeyframeGenerator(props.downY, '0px')}>
        {props.children}
    </SlideAnimation>
);

export const SlideDownAnimation: React.StatelessComponent<SlideAnimationComponentProps> = props => (
    <SlideAnimation
        animationDirection="forwards"
        animationType="cubic-bezier(0.25, 0.1, 0.25, 1)"
        keyframes={slideKeyframeGenerator('0px', props.downY)}
    >
        {props.children}
    </SlideAnimation>
);