UNPKG

@proyecto26/animatable-component

Version:

Animate once, use Everywhere! 💫

proyecto26.github.io/animatable-component

proyecto26/animatable-component

120 lines (119 loc) • 9.27 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
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import { ANIMATIONS } from './common'; const ROTATE_DEFAULT = { easing: 'ease-in-out', fillMode: 'both', transformOrigin: 'center center' }; const ROTATE_CENTER = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { transform: 'rotate(0)' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { transform: 'rotate(360deg)' }) ]; const ROTATE_TOP = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotate(0)', transformOrigin: 'top' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotate(360deg)', transformOrigin: 'top' }) ]; const ROTATE_TR = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotate(0)', transformOrigin: 'top right' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotate(360deg)', transformOrigin: 'top right' }) ]; const ROTATE_RIGHT = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotate(0)', transformOrigin: 'right' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotate(360deg)', transformOrigin: 'right' }) ]; const ROTATE_BR = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotate(0)', transformOrigin: 'bottom right' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotate(360deg)', transformOrigin: 'bottom right' }) ]; const ROTATE_BOTTOM = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotate(0)', transformOrigin: 'bottom' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotate(360deg)', transformOrigin: 'bottom' }) ]; const ROTATE_BL = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotate(0)', transformOrigin: 'bottom left' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotate(360deg)', transformOrigin: 'bottom left' }) ]; const ROTATE_LEFT = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotate(0)', transformOrigin: 'left' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotate(360deg)', transformOrigin: 'left' }) ]; const ROTATE_TL = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotate(0)', transformOrigin: 'top left' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotate(360deg)', transformOrigin: 'top left' }) ]; const ROTATE_HOR_CENTER = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotateX(0)' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotateX(-360deg)' }) ]; const ROTATE_HOR_TOP = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)', transform: 'rotateX(0)', transformOrigin: 'top' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)', transform: 'rotateX(-360deg)', transformOrigin: 'top' }) ]; const ROTATE_HOR_BOTTOM = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)', transform: 'rotateX(0)', transformOrigin: 'bottom' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)', transform: 'rotateX(360deg)', transformOrigin: 'bottom' }) ]; const ROTATE_VERT_CENTER = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotateY(0)' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', transform: 'rotateY(360deg)' }) ]; const ROTATE_VERT_LEFT = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)', transform: 'rotateY(0)', transformOrigin: 'left' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)', transform: 'rotateY(360deg)', transformOrigin: 'left' }) ]; const ROTATE_VERT_RIGHT = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)', transform: 'rotateY(0)', transformOrigin: 'right' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)', transform: 'rotateY(-360deg)', transformOrigin: 'right' }) ]; const ROTATE_DIAGONAL_1 = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(1, 1, 0, 0deg)' }), Object.assign(Object.assign({ offset: 0.5 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(1, 1, 0, -180deg)' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(1, 1, 0, -360deg)' }) ]; const ROTATE_DIAGONAL_2 = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(-1, 1, 0, 0deg)' }), Object.assign(Object.assign({ offset: 0.5 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(-1, 1, 0, 180deg)' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(-1, 1, 0, 360deg)' }) ]; const ROTATE_DIAGONAL_TR = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(1, 1, 0, 0deg)', transformOrigin: '100% 0%' }), Object.assign(Object.assign({ offset: 0.5 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(1, 1, 0, -180deg)', transformOrigin: '100% 0%' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(1, 1, 0, -360deg)', transformOrigin: '100% 0%' }) ]; const ROTATE_DIAGONAL_BR = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(-1, 1, 0, 0deg)', transformOrigin: '100% 100%' }), Object.assign(Object.assign({ offset: 0.5 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(-1, 1, 0, -180deg)', transformOrigin: '100% 100%' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(-1, 1, 0, -360deg)', transformOrigin: '100% 100%' }) ]; const ROTATE_DIAGONAL_BL = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(1, 1, 0, 0deg)', transformOrigin: '0% 100%' }), Object.assign(Object.assign({ offset: 0.5 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(1, 1, 0, 180deg)', transformOrigin: '0% 100%' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(1, 1, 0, 360deg)', transformOrigin: '0% 100%' }) ]; const ROTATE_DIAGONAL_TL = [ Object.assign(Object.assign({ offset: 0 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(-1, 1, 0, 0deg)', transformOrigin: '0% 0%' }), Object.assign(Object.assign({ offset: 0.5 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(-1, 1, 0, 180deg)', transformOrigin: '0% 0%' }), Object.assign(Object.assign({ offset: 1 }, ROTATE_DEFAULT), { easing: 'linear', transform: 'rotate3d(-1, 1, 0, 360deg)', transformOrigin: '0% 0%' }) ]; export default { [ANIMATIONS.ROTATE_CENTER]: ROTATE_CENTER, [ANIMATIONS.ROTATE_TOP]: ROTATE_TOP, [ANIMATIONS.ROTATE_TR]: ROTATE_TR, [ANIMATIONS.ROTATE_RIGHT]: ROTATE_RIGHT, [ANIMATIONS.ROTATE_BR]: ROTATE_BR, [ANIMATIONS.ROTATE_BOTTOM]: ROTATE_BOTTOM, [ANIMATIONS.ROTATE_BL]: ROTATE_BL, [ANIMATIONS.ROTATE_LEFT]: ROTATE_LEFT, [ANIMATIONS.ROTATE_TL]: ROTATE_TL, [ANIMATIONS.ROTATE_HOR_CENTER]: ROTATE_HOR_CENTER, [ANIMATIONS.ROTATE_HOR_TOP]: ROTATE_HOR_TOP, [ANIMATIONS.ROTATE_HOR_BOTTOM]: ROTATE_HOR_BOTTOM, [ANIMATIONS.ROTATE_VERT_CENTER]: ROTATE_VERT_CENTER, [ANIMATIONS.ROTATE_VERT_LEFT]: ROTATE_VERT_LEFT, [ANIMATIONS.ROTATE_VERT_RIGHT]: ROTATE_VERT_RIGHT, [ANIMATIONS.ROTATE_DIAGONAL_1]: ROTATE_DIAGONAL_1, [ANIMATIONS.ROTATE_DIAGONAL_2]: ROTATE_DIAGONAL_2, [ANIMATIONS.ROTATE_DIAGONAL_TR]: ROTATE_DIAGONAL_TR, [ANIMATIONS.ROTATE_DIAGONAL_BR]: ROTATE_DIAGONAL_BR, [ANIMATIONS.ROTATE_DIAGONAL_BL]: ROTATE_DIAGONAL_BL, [ANIMATIONS.ROTATE_DIAGONAL_TL]: ROTATE_DIAGONAL_TL };