diff options
Diffstat (limited to 'packages/website/ts/components/ui/animation.tsx')
-rw-r--r-- | packages/website/ts/components/ui/animation.tsx | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx new file mode 100644 index 000000000..cbda2993d --- /dev/null +++ b/packages/website/ts/components/ui/animation.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import { keyframes, styled } from 'ts/style/theme'; + +export type AnimationType = 'easeUpFromBottom'; + +export interface AnimationProps { + type: AnimationType; +} + +const PlainAnimation: React.StatelessComponent<AnimationProps> = props => <div {...props} />; + +const appearFromBottomFrames = keyframes` + from { + position: absolute; + bottom: -500px; + } + + to { + position: absolute; + bottom: 0px; + } +`; + +const animations: { [K in AnimationType]: string } = { + easeUpFromBottom: `${appearFromBottomFrames} 1s ease 0s 1 forwards`, +}; + +export const Animation = styled(PlainAnimation)` + animation: ${props => animations[props.type]}; +`; + +Animation.displayName = 'Animation'; |