UNPKG

@proyecto26/animatable-component

Version:

Animate once, use Everywhere! 💫

proyecto26.github.io/animatable-component

proyecto26/animatable-component

33 lines (32 loc) • 2.2 kB
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
import { ANIMATIONS } from './common'; const SLIT_IN_DEFAULT = { easing: 'ease-out', fillMode: 'both', transformOrigin: 'center center' }; const SLIT_IN_VERTICAL = [ Object.assign(Object.assign({ offset: 0 }, SLIT_IN_DEFAULT), { transform: 'translateZ(-800px) rotateY(90deg)', opacity: 0 }), Object.assign(Object.assign({ offset: 0.54 }, SLIT_IN_DEFAULT), { transform: 'translateZ(-160px) rotateY(87deg)', opacity: 1 }), Object.assign(Object.assign({ offset: 1 }, SLIT_IN_DEFAULT), { transform: 'translateZ(0) rotateY(0)', opacity: 1 }) ]; const SLIT_IN_HORIZONTAL = [ Object.assign(Object.assign({ offset: 0 }, SLIT_IN_DEFAULT), { transform: 'translateZ(-800px) rotateX(90deg)', opacity: 0 }), Object.assign(Object.assign({ offset: 0.54 }, SLIT_IN_DEFAULT), { transform: 'translateZ(-160px) rotateX(87deg)', opacity: 1 }), Object.assign(Object.assign({ offset: 1 }, SLIT_IN_DEFAULT), { transform: 'translateZ(0) rotateX(0)', opacity: 1 }) ]; const SLIT_IN_DIAGONAL_1 = [ Object.assign(Object.assign({ offset: 0 }, SLIT_IN_DEFAULT), { transform: 'translateZ(-800px) rotate3d(1, 1, 0, 90deg)', easing: 'ease-in', opacity: 0 }), Object.assign(Object.assign({ offset: 0.54 }, SLIT_IN_DEFAULT), { transform: 'translateZ(-160px) rotate3d(1, 1, 0, 87deg)', easing: 'ease-in-out', opacity: 1 }), Object.assign(Object.assign({ offset: 1 }, SLIT_IN_DEFAULT), { transform: 'translateZ(0) rotate3d(1, 1, 0, 0)', easing: 'ease-out', opacity: 1 }) ]; const SLIT_IN_DIAGONAL_2 = [ Object.assign(Object.assign({ offset: 0 }, SLIT_IN_DEFAULT), { transform: 'translateZ(-800px) rotate3d(-1, 1, 0, -90deg)', easing: 'ease-in', opacity: 0 }), Object.assign(Object.assign({ offset: 0.54 }, SLIT_IN_DEFAULT), { transform: 'translateZ(-160px) rotate3d(-1, 1, 0, -87deg)', easing: 'ease-in-out', opacity: 1 }), Object.assign(Object.assign({ offset: 1 }, SLIT_IN_DEFAULT), { transform: 'translateZ(0) rotate3d(-1, 1, 0, 0)', easing: 'ease-out', opacity: 1 }) ]; export default { [ANIMATIONS.SLIT_IN_VERTICAL]: SLIT_IN_VERTICAL, [ANIMATIONS.SLIT_IN_HORIZONTAL]: SLIT_IN_HORIZONTAL, [ANIMATIONS.SLIT_IN_DIAGONAL_1]: SLIT_IN_DIAGONAL_1, [ANIMATIONS.SLIT_IN_DIAGONAL_2]: SLIT_IN_DIAGONAL_2 };