@pyreon/kinetic-presets 0.11.5 → 0.11.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -7
- package/lib/index.d.ts +1 -1
- package/package.json +19 -19
- package/src/__tests__/factories.test.ts +99 -99
- package/src/__tests__/presets.test.ts +274 -274
- package/src/__tests__/utils.test.ts +164 -164
- package/src/factories.ts +28 -28
- package/src/index.ts +4 -4
- package/src/presets.ts +386 -386
- package/src/types.ts +1 -1
- package/src/utils.ts +7 -7
package/src/presets.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import type { CSSProperties, Preset } from
|
|
1
|
+
import type { CSSProperties, Preset } from './types'
|
|
2
2
|
|
|
3
3
|
const s = (
|
|
4
4
|
hidden: CSSProperties,
|
|
5
5
|
visible: CSSProperties,
|
|
6
|
-
enterDuration =
|
|
7
|
-
leaveDuration =
|
|
8
|
-
enterEasing =
|
|
9
|
-
leaveEasing =
|
|
6
|
+
enterDuration = '300ms',
|
|
7
|
+
leaveDuration = '200ms',
|
|
8
|
+
enterEasing = 'ease-out',
|
|
9
|
+
leaveEasing = 'ease-in',
|
|
10
10
|
): Preset => ({
|
|
11
11
|
enterStyle: hidden,
|
|
12
12
|
enterToStyle: visible,
|
|
@@ -16,686 +16,686 @@ const s = (
|
|
|
16
16
|
leaveTransition: `all ${leaveDuration} ${leaveEasing}`,
|
|
17
17
|
})
|
|
18
18
|
|
|
19
|
-
const SPRING =
|
|
20
|
-
const BOUNCE =
|
|
19
|
+
const SPRING = 'cubic-bezier(0.34, 1.56, 0.64, 1)'
|
|
20
|
+
const BOUNCE = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
|
|
21
21
|
|
|
22
22
|
// Fades
|
|
23
23
|
export const fade: Preset = s({ opacity: 0 }, { opacity: 1 })
|
|
24
24
|
export const fadeUp: Preset = s(
|
|
25
|
-
{ opacity: 0, transform:
|
|
26
|
-
{ opacity: 1, transform:
|
|
25
|
+
{ opacity: 0, transform: 'translateY(16px)' },
|
|
26
|
+
{ opacity: 1, transform: 'translateY(0)' },
|
|
27
27
|
)
|
|
28
28
|
export const fadeDown: Preset = s(
|
|
29
|
-
{ opacity: 0, transform:
|
|
30
|
-
{ opacity: 1, transform:
|
|
29
|
+
{ opacity: 0, transform: 'translateY(-16px)' },
|
|
30
|
+
{ opacity: 1, transform: 'translateY(0)' },
|
|
31
31
|
)
|
|
32
32
|
export const fadeLeft: Preset = s(
|
|
33
|
-
{ opacity: 0, transform:
|
|
34
|
-
{ opacity: 1, transform:
|
|
33
|
+
{ opacity: 0, transform: 'translateX(16px)' },
|
|
34
|
+
{ opacity: 1, transform: 'translateX(0)' },
|
|
35
35
|
)
|
|
36
36
|
export const fadeRight: Preset = s(
|
|
37
|
-
{ opacity: 0, transform:
|
|
38
|
-
{ opacity: 1, transform:
|
|
37
|
+
{ opacity: 0, transform: 'translateX(-16px)' },
|
|
38
|
+
{ opacity: 1, transform: 'translateX(0)' },
|
|
39
39
|
)
|
|
40
40
|
export const fadeUpBig: Preset = s(
|
|
41
|
-
{ opacity: 0, transform:
|
|
42
|
-
{ opacity: 1, transform:
|
|
41
|
+
{ opacity: 0, transform: 'translateY(48px)' },
|
|
42
|
+
{ opacity: 1, transform: 'translateY(0)' },
|
|
43
43
|
)
|
|
44
44
|
export const fadeDownBig: Preset = s(
|
|
45
|
-
{ opacity: 0, transform:
|
|
46
|
-
{ opacity: 1, transform:
|
|
45
|
+
{ opacity: 0, transform: 'translateY(-48px)' },
|
|
46
|
+
{ opacity: 1, transform: 'translateY(0)' },
|
|
47
47
|
)
|
|
48
48
|
export const fadeLeftBig: Preset = s(
|
|
49
|
-
{ opacity: 0, transform:
|
|
50
|
-
{ opacity: 1, transform:
|
|
49
|
+
{ opacity: 0, transform: 'translateX(48px)' },
|
|
50
|
+
{ opacity: 1, transform: 'translateX(0)' },
|
|
51
51
|
)
|
|
52
52
|
export const fadeRightBig: Preset = s(
|
|
53
|
-
{ opacity: 0, transform:
|
|
54
|
-
{ opacity: 1, transform:
|
|
53
|
+
{ opacity: 0, transform: 'translateX(-48px)' },
|
|
54
|
+
{ opacity: 1, transform: 'translateX(0)' },
|
|
55
55
|
)
|
|
56
56
|
export const fadeScale: Preset = s(
|
|
57
|
-
{ opacity: 0, transform:
|
|
58
|
-
{ opacity: 1, transform:
|
|
57
|
+
{ opacity: 0, transform: 'scale(0.95)' },
|
|
58
|
+
{ opacity: 1, transform: 'scale(1)' },
|
|
59
59
|
)
|
|
60
60
|
export const fadeUpLeft: Preset = s(
|
|
61
|
-
{ opacity: 0, transform:
|
|
62
|
-
{ opacity: 1, transform:
|
|
61
|
+
{ opacity: 0, transform: 'translate(16px, 16px)' },
|
|
62
|
+
{ opacity: 1, transform: 'translate(0, 0)' },
|
|
63
63
|
)
|
|
64
64
|
export const fadeUpRight: Preset = s(
|
|
65
|
-
{ opacity: 0, transform:
|
|
66
|
-
{ opacity: 1, transform:
|
|
65
|
+
{ opacity: 0, transform: 'translate(-16px, 16px)' },
|
|
66
|
+
{ opacity: 1, transform: 'translate(0, 0)' },
|
|
67
67
|
)
|
|
68
68
|
export const fadeDownLeft: Preset = s(
|
|
69
|
-
{ opacity: 0, transform:
|
|
70
|
-
{ opacity: 1, transform:
|
|
69
|
+
{ opacity: 0, transform: 'translate(16px, -16px)' },
|
|
70
|
+
{ opacity: 1, transform: 'translate(0, 0)' },
|
|
71
71
|
)
|
|
72
72
|
export const fadeDownRight: Preset = s(
|
|
73
|
-
{ opacity: 0, transform:
|
|
74
|
-
{ opacity: 1, transform:
|
|
73
|
+
{ opacity: 0, transform: 'translate(-16px, -16px)' },
|
|
74
|
+
{ opacity: 1, transform: 'translate(0, 0)' },
|
|
75
75
|
)
|
|
76
76
|
|
|
77
77
|
// Slides
|
|
78
78
|
export const slideUp: Preset = s(
|
|
79
|
-
{ opacity: 0, transform:
|
|
80
|
-
{ opacity: 1, transform:
|
|
79
|
+
{ opacity: 0, transform: 'translateY(16px)' },
|
|
80
|
+
{ opacity: 1, transform: 'translateY(0)' },
|
|
81
81
|
)
|
|
82
82
|
export const slideDown: Preset = s(
|
|
83
|
-
{ opacity: 0, transform:
|
|
84
|
-
{ opacity: 1, transform:
|
|
83
|
+
{ opacity: 0, transform: 'translateY(-16px)' },
|
|
84
|
+
{ opacity: 1, transform: 'translateY(0)' },
|
|
85
85
|
)
|
|
86
86
|
export const slideLeft: Preset = s(
|
|
87
|
-
{ opacity: 0, transform:
|
|
88
|
-
{ opacity: 1, transform:
|
|
87
|
+
{ opacity: 0, transform: 'translateX(16px)' },
|
|
88
|
+
{ opacity: 1, transform: 'translateX(0)' },
|
|
89
89
|
)
|
|
90
90
|
export const slideRight: Preset = s(
|
|
91
|
-
{ opacity: 0, transform:
|
|
92
|
-
{ opacity: 1, transform:
|
|
91
|
+
{ opacity: 0, transform: 'translateX(-16px)' },
|
|
92
|
+
{ opacity: 1, transform: 'translateX(0)' },
|
|
93
93
|
)
|
|
94
94
|
export const slideUpBig: Preset = s(
|
|
95
|
-
{ opacity: 0, transform:
|
|
96
|
-
{ opacity: 1, transform:
|
|
95
|
+
{ opacity: 0, transform: 'translateY(48px)' },
|
|
96
|
+
{ opacity: 1, transform: 'translateY(0)' },
|
|
97
97
|
)
|
|
98
98
|
export const slideDownBig: Preset = s(
|
|
99
|
-
{ opacity: 0, transform:
|
|
100
|
-
{ opacity: 1, transform:
|
|
99
|
+
{ opacity: 0, transform: 'translateY(-48px)' },
|
|
100
|
+
{ opacity: 1, transform: 'translateY(0)' },
|
|
101
101
|
)
|
|
102
102
|
export const slideLeftBig: Preset = s(
|
|
103
|
-
{ opacity: 0, transform:
|
|
104
|
-
{ opacity: 1, transform:
|
|
103
|
+
{ opacity: 0, transform: 'translateX(48px)' },
|
|
104
|
+
{ opacity: 1, transform: 'translateX(0)' },
|
|
105
105
|
)
|
|
106
106
|
export const slideRightBig: Preset = s(
|
|
107
|
-
{ opacity: 0, transform:
|
|
108
|
-
{ opacity: 1, transform:
|
|
107
|
+
{ opacity: 0, transform: 'translateX(-48px)' },
|
|
108
|
+
{ opacity: 1, transform: 'translateX(0)' },
|
|
109
109
|
)
|
|
110
110
|
|
|
111
111
|
// Scales
|
|
112
112
|
export const scaleIn: Preset = s(
|
|
113
|
-
{ opacity: 0, transform:
|
|
114
|
-
{ opacity: 1, transform:
|
|
113
|
+
{ opacity: 0, transform: 'scale(0.9)' },
|
|
114
|
+
{ opacity: 1, transform: 'scale(1)' },
|
|
115
115
|
)
|
|
116
116
|
export const scaleOut: Preset = s(
|
|
117
|
-
{ opacity: 0, transform:
|
|
118
|
-
{ opacity: 1, transform:
|
|
117
|
+
{ opacity: 0, transform: 'scale(1.1)' },
|
|
118
|
+
{ opacity: 1, transform: 'scale(1)' },
|
|
119
119
|
)
|
|
120
120
|
export const scaleUp: Preset = s(
|
|
121
|
-
{ opacity: 0, transform:
|
|
122
|
-
{ opacity: 1, transform:
|
|
121
|
+
{ opacity: 0, transform: 'scale(0.5)' },
|
|
122
|
+
{ opacity: 1, transform: 'scale(1)' },
|
|
123
123
|
)
|
|
124
124
|
export const scaleDown: Preset = s(
|
|
125
|
-
{ opacity: 0, transform:
|
|
126
|
-
{ opacity: 1, transform:
|
|
125
|
+
{ opacity: 0, transform: 'scale(1.5)' },
|
|
126
|
+
{ opacity: 1, transform: 'scale(1)' },
|
|
127
127
|
)
|
|
128
128
|
export const scaleInUp: Preset = s(
|
|
129
|
-
{ opacity: 0, transform:
|
|
130
|
-
{ opacity: 1, transform:
|
|
129
|
+
{ opacity: 0, transform: 'scale(0.9) translateY(16px)' },
|
|
130
|
+
{ opacity: 1, transform: 'scale(1) translateY(0)' },
|
|
131
131
|
)
|
|
132
132
|
export const scaleInDown: Preset = s(
|
|
133
|
-
{ opacity: 0, transform:
|
|
134
|
-
{ opacity: 1, transform:
|
|
133
|
+
{ opacity: 0, transform: 'scale(0.9) translateY(-16px)' },
|
|
134
|
+
{ opacity: 1, transform: 'scale(1) translateY(0)' },
|
|
135
135
|
)
|
|
136
136
|
export const scaleInLeft: Preset = s(
|
|
137
|
-
{ opacity: 0, transform:
|
|
138
|
-
{ opacity: 1, transform:
|
|
137
|
+
{ opacity: 0, transform: 'scale(0.9) translateX(16px)' },
|
|
138
|
+
{ opacity: 1, transform: 'scale(1) translateX(0)' },
|
|
139
139
|
)
|
|
140
140
|
export const scaleInRight: Preset = s(
|
|
141
|
-
{ opacity: 0, transform:
|
|
142
|
-
{ opacity: 1, transform:
|
|
141
|
+
{ opacity: 0, transform: 'scale(0.9) translateX(-16px)' },
|
|
142
|
+
{ opacity: 1, transform: 'scale(1) translateX(0)' },
|
|
143
143
|
)
|
|
144
144
|
|
|
145
145
|
// Zooms
|
|
146
146
|
export const zoomIn: Preset = s(
|
|
147
|
-
{ opacity: 0, transform:
|
|
148
|
-
{ opacity: 1, transform:
|
|
149
|
-
|
|
150
|
-
|
|
147
|
+
{ opacity: 0, transform: 'scale(0)' },
|
|
148
|
+
{ opacity: 1, transform: 'scale(1)' },
|
|
149
|
+
'400ms',
|
|
150
|
+
'250ms',
|
|
151
151
|
)
|
|
152
152
|
export const zoomOut: Preset = s(
|
|
153
|
-
{ opacity: 0, transform:
|
|
154
|
-
{ opacity: 1, transform:
|
|
155
|
-
|
|
156
|
-
|
|
153
|
+
{ opacity: 0, transform: 'scale(2)' },
|
|
154
|
+
{ opacity: 1, transform: 'scale(1)' },
|
|
155
|
+
'400ms',
|
|
156
|
+
'250ms',
|
|
157
157
|
)
|
|
158
158
|
export const zoomInUp: Preset = s(
|
|
159
|
-
{ opacity: 0, transform:
|
|
160
|
-
{ opacity: 1, transform:
|
|
161
|
-
|
|
162
|
-
|
|
159
|
+
{ opacity: 0, transform: 'scale(0.5) translateY(48px)' },
|
|
160
|
+
{ opacity: 1, transform: 'scale(1) translateY(0)' },
|
|
161
|
+
'400ms',
|
|
162
|
+
'250ms',
|
|
163
163
|
)
|
|
164
164
|
export const zoomInDown: Preset = s(
|
|
165
|
-
{ opacity: 0, transform:
|
|
166
|
-
{ opacity: 1, transform:
|
|
167
|
-
|
|
168
|
-
|
|
165
|
+
{ opacity: 0, transform: 'scale(0.5) translateY(-48px)' },
|
|
166
|
+
{ opacity: 1, transform: 'scale(1) translateY(0)' },
|
|
167
|
+
'400ms',
|
|
168
|
+
'250ms',
|
|
169
169
|
)
|
|
170
170
|
export const zoomInLeft: Preset = s(
|
|
171
|
-
{ opacity: 0, transform:
|
|
172
|
-
{ opacity: 1, transform:
|
|
173
|
-
|
|
174
|
-
|
|
171
|
+
{ opacity: 0, transform: 'scale(0.5) translateX(48px)' },
|
|
172
|
+
{ opacity: 1, transform: 'scale(1) translateX(0)' },
|
|
173
|
+
'400ms',
|
|
174
|
+
'250ms',
|
|
175
175
|
)
|
|
176
176
|
export const zoomInRight: Preset = s(
|
|
177
|
-
{ opacity: 0, transform:
|
|
178
|
-
{ opacity: 1, transform:
|
|
179
|
-
|
|
180
|
-
|
|
177
|
+
{ opacity: 0, transform: 'scale(0.5) translateX(-48px)' },
|
|
178
|
+
{ opacity: 1, transform: 'scale(1) translateX(0)' },
|
|
179
|
+
'400ms',
|
|
180
|
+
'250ms',
|
|
181
181
|
)
|
|
182
182
|
export const zoomOutUp: Preset = s(
|
|
183
|
-
{ opacity: 0, transform:
|
|
184
|
-
{ opacity: 1, transform:
|
|
185
|
-
|
|
186
|
-
|
|
183
|
+
{ opacity: 0, transform: 'scale(2) translateY(48px)' },
|
|
184
|
+
{ opacity: 1, transform: 'scale(1) translateY(0)' },
|
|
185
|
+
'400ms',
|
|
186
|
+
'250ms',
|
|
187
187
|
)
|
|
188
188
|
export const zoomOutDown: Preset = s(
|
|
189
|
-
{ opacity: 0, transform:
|
|
190
|
-
{ opacity: 1, transform:
|
|
191
|
-
|
|
192
|
-
|
|
189
|
+
{ opacity: 0, transform: 'scale(2) translateY(-48px)' },
|
|
190
|
+
{ opacity: 1, transform: 'scale(1) translateY(0)' },
|
|
191
|
+
'400ms',
|
|
192
|
+
'250ms',
|
|
193
193
|
)
|
|
194
194
|
export const zoomOutLeft: Preset = s(
|
|
195
|
-
{ opacity: 0, transform:
|
|
196
|
-
{ opacity: 1, transform:
|
|
197
|
-
|
|
198
|
-
|
|
195
|
+
{ opacity: 0, transform: 'scale(2) translateX(48px)' },
|
|
196
|
+
{ opacity: 1, transform: 'scale(1) translateX(0)' },
|
|
197
|
+
'400ms',
|
|
198
|
+
'250ms',
|
|
199
199
|
)
|
|
200
200
|
export const zoomOutRight: Preset = s(
|
|
201
|
-
{ opacity: 0, transform:
|
|
202
|
-
{ opacity: 1, transform:
|
|
203
|
-
|
|
204
|
-
|
|
201
|
+
{ opacity: 0, transform: 'scale(2) translateX(-48px)' },
|
|
202
|
+
{ opacity: 1, transform: 'scale(1) translateX(0)' },
|
|
203
|
+
'400ms',
|
|
204
|
+
'250ms',
|
|
205
205
|
)
|
|
206
206
|
|
|
207
207
|
// Flips
|
|
208
208
|
export const flipX: Preset = s(
|
|
209
|
-
{ opacity: 0, transform:
|
|
210
|
-
{ opacity: 1, transform:
|
|
211
|
-
|
|
212
|
-
|
|
209
|
+
{ opacity: 0, transform: 'perspective(600px) rotateX(90deg)' },
|
|
210
|
+
{ opacity: 1, transform: 'perspective(600px) rotateX(0)' },
|
|
211
|
+
'500ms',
|
|
212
|
+
'300ms',
|
|
213
213
|
)
|
|
214
214
|
export const flipY: Preset = s(
|
|
215
|
-
{ opacity: 0, transform:
|
|
216
|
-
{ opacity: 1, transform:
|
|
217
|
-
|
|
218
|
-
|
|
215
|
+
{ opacity: 0, transform: 'perspective(600px) rotateY(90deg)' },
|
|
216
|
+
{ opacity: 1, transform: 'perspective(600px) rotateY(0)' },
|
|
217
|
+
'500ms',
|
|
218
|
+
'300ms',
|
|
219
219
|
)
|
|
220
220
|
export const flipXReverse: Preset = s(
|
|
221
|
-
{ opacity: 0, transform:
|
|
222
|
-
{ opacity: 1, transform:
|
|
223
|
-
|
|
224
|
-
|
|
221
|
+
{ opacity: 0, transform: 'perspective(600px) rotateX(-90deg)' },
|
|
222
|
+
{ opacity: 1, transform: 'perspective(600px) rotateX(0)' },
|
|
223
|
+
'500ms',
|
|
224
|
+
'300ms',
|
|
225
225
|
)
|
|
226
226
|
export const flipYReverse: Preset = s(
|
|
227
|
-
{ opacity: 0, transform:
|
|
228
|
-
{ opacity: 1, transform:
|
|
229
|
-
|
|
230
|
-
|
|
227
|
+
{ opacity: 0, transform: 'perspective(600px) rotateY(-90deg)' },
|
|
228
|
+
{ opacity: 1, transform: 'perspective(600px) rotateY(0)' },
|
|
229
|
+
'500ms',
|
|
230
|
+
'300ms',
|
|
231
231
|
)
|
|
232
232
|
export const flipDiagonal: Preset = s(
|
|
233
|
-
{ opacity: 0, transform:
|
|
234
|
-
{ opacity: 1, transform:
|
|
235
|
-
|
|
236
|
-
|
|
233
|
+
{ opacity: 0, transform: 'perspective(600px) rotate3d(1, 1, 0, 90deg)' },
|
|
234
|
+
{ opacity: 1, transform: 'perspective(600px) rotate3d(1, 1, 0, 0deg)' },
|
|
235
|
+
'500ms',
|
|
236
|
+
'300ms',
|
|
237
237
|
)
|
|
238
238
|
export const flipDiagonalReverse: Preset = s(
|
|
239
|
-
{ opacity: 0, transform:
|
|
240
|
-
{ opacity: 1, transform:
|
|
241
|
-
|
|
242
|
-
|
|
239
|
+
{ opacity: 0, transform: 'perspective(600px) rotate3d(1, -1, 0, 90deg)' },
|
|
240
|
+
{ opacity: 1, transform: 'perspective(600px) rotate3d(1, -1, 0, 0deg)' },
|
|
241
|
+
'500ms',
|
|
242
|
+
'300ms',
|
|
243
243
|
)
|
|
244
244
|
|
|
245
245
|
// Rotations
|
|
246
246
|
export const rotateIn: Preset = s(
|
|
247
|
-
{ opacity: 0, transform:
|
|
248
|
-
{ opacity: 1, transform:
|
|
247
|
+
{ opacity: 0, transform: 'rotate(-15deg)' },
|
|
248
|
+
{ opacity: 1, transform: 'rotate(0)' },
|
|
249
249
|
)
|
|
250
250
|
export const rotateInReverse: Preset = s(
|
|
251
|
-
{ opacity: 0, transform:
|
|
252
|
-
{ opacity: 1, transform:
|
|
251
|
+
{ opacity: 0, transform: 'rotate(15deg)' },
|
|
252
|
+
{ opacity: 1, transform: 'rotate(0)' },
|
|
253
253
|
)
|
|
254
254
|
export const rotateInUp: Preset = s(
|
|
255
|
-
{ opacity: 0, transform:
|
|
256
|
-
{ opacity: 1, transform:
|
|
255
|
+
{ opacity: 0, transform: 'rotate(-5deg) translateY(16px)' },
|
|
256
|
+
{ opacity: 1, transform: 'rotate(0) translateY(0)' },
|
|
257
257
|
)
|
|
258
258
|
export const rotateInDown: Preset = s(
|
|
259
|
-
{ opacity: 0, transform:
|
|
260
|
-
{ opacity: 1, transform:
|
|
259
|
+
{ opacity: 0, transform: 'rotate(5deg) translateY(-16px)' },
|
|
260
|
+
{ opacity: 1, transform: 'rotate(0) translateY(0)' },
|
|
261
261
|
)
|
|
262
262
|
export const spinIn: Preset = s(
|
|
263
|
-
{ opacity: 0, transform:
|
|
264
|
-
{ opacity: 1, transform:
|
|
265
|
-
|
|
266
|
-
|
|
263
|
+
{ opacity: 0, transform: 'rotate(-180deg)' },
|
|
264
|
+
{ opacity: 1, transform: 'rotate(0)' },
|
|
265
|
+
'500ms',
|
|
266
|
+
'300ms',
|
|
267
267
|
)
|
|
268
268
|
export const spinInReverse: Preset = s(
|
|
269
|
-
{ opacity: 0, transform:
|
|
270
|
-
{ opacity: 1, transform:
|
|
271
|
-
|
|
272
|
-
|
|
269
|
+
{ opacity: 0, transform: 'rotate(180deg)' },
|
|
270
|
+
{ opacity: 1, transform: 'rotate(0)' },
|
|
271
|
+
'500ms',
|
|
272
|
+
'300ms',
|
|
273
273
|
)
|
|
274
274
|
export const scaleRotateIn: Preset = s(
|
|
275
|
-
{ opacity: 0, transform:
|
|
276
|
-
{ opacity: 1, transform:
|
|
277
|
-
|
|
278
|
-
|
|
275
|
+
{ opacity: 0, transform: 'scale(0) rotate(-180deg)' },
|
|
276
|
+
{ opacity: 1, transform: 'scale(1) rotate(0)' },
|
|
277
|
+
'500ms',
|
|
278
|
+
'300ms',
|
|
279
279
|
)
|
|
280
280
|
export const newspaperIn: Preset = s(
|
|
281
|
-
{ opacity: 0, transform:
|
|
282
|
-
{ opacity: 1, transform:
|
|
283
|
-
|
|
284
|
-
|
|
281
|
+
{ opacity: 0, transform: 'scale(0) rotate(-720deg)' },
|
|
282
|
+
{ opacity: 1, transform: 'scale(1) rotate(0)' },
|
|
283
|
+
'700ms',
|
|
284
|
+
'400ms',
|
|
285
285
|
)
|
|
286
286
|
|
|
287
287
|
// Bounce / Spring
|
|
288
288
|
export const bounceIn: Preset = s(
|
|
289
|
-
{ opacity: 0, transform:
|
|
290
|
-
{ opacity: 1, transform:
|
|
291
|
-
|
|
292
|
-
|
|
289
|
+
{ opacity: 0, transform: 'scale(0.5)' },
|
|
290
|
+
{ opacity: 1, transform: 'scale(1)' },
|
|
291
|
+
'500ms',
|
|
292
|
+
'200ms',
|
|
293
293
|
BOUNCE,
|
|
294
294
|
)
|
|
295
295
|
export const bounceInUp: Preset = s(
|
|
296
|
-
{ opacity: 0, transform:
|
|
297
|
-
{ opacity: 1, transform:
|
|
298
|
-
|
|
299
|
-
|
|
296
|
+
{ opacity: 0, transform: 'translateY(40px)' },
|
|
297
|
+
{ opacity: 1, transform: 'translateY(0)' },
|
|
298
|
+
'500ms',
|
|
299
|
+
'200ms',
|
|
300
300
|
BOUNCE,
|
|
301
301
|
)
|
|
302
302
|
export const bounceInDown: Preset = s(
|
|
303
|
-
{ opacity: 0, transform:
|
|
304
|
-
{ opacity: 1, transform:
|
|
305
|
-
|
|
306
|
-
|
|
303
|
+
{ opacity: 0, transform: 'translateY(-40px)' },
|
|
304
|
+
{ opacity: 1, transform: 'translateY(0)' },
|
|
305
|
+
'500ms',
|
|
306
|
+
'200ms',
|
|
307
307
|
BOUNCE,
|
|
308
308
|
)
|
|
309
309
|
export const bounceInLeft: Preset = s(
|
|
310
|
-
{ opacity: 0, transform:
|
|
311
|
-
{ opacity: 1, transform:
|
|
312
|
-
|
|
313
|
-
|
|
310
|
+
{ opacity: 0, transform: 'translateX(40px)' },
|
|
311
|
+
{ opacity: 1, transform: 'translateX(0)' },
|
|
312
|
+
'500ms',
|
|
313
|
+
'200ms',
|
|
314
314
|
BOUNCE,
|
|
315
315
|
)
|
|
316
316
|
export const bounceInRight: Preset = s(
|
|
317
|
-
{ opacity: 0, transform:
|
|
318
|
-
{ opacity: 1, transform:
|
|
319
|
-
|
|
320
|
-
|
|
317
|
+
{ opacity: 0, transform: 'translateX(-40px)' },
|
|
318
|
+
{ opacity: 1, transform: 'translateX(0)' },
|
|
319
|
+
'500ms',
|
|
320
|
+
'200ms',
|
|
321
321
|
BOUNCE,
|
|
322
322
|
)
|
|
323
323
|
export const springIn: Preset = s(
|
|
324
|
-
{ opacity: 0, transform:
|
|
325
|
-
{ opacity: 1, transform:
|
|
326
|
-
|
|
327
|
-
|
|
324
|
+
{ opacity: 0, transform: 'scale(0.8)' },
|
|
325
|
+
{ opacity: 1, transform: 'scale(1)' },
|
|
326
|
+
'400ms',
|
|
327
|
+
'200ms',
|
|
328
328
|
SPRING,
|
|
329
329
|
)
|
|
330
330
|
export const popIn: Preset = s(
|
|
331
|
-
{ opacity: 0, transform:
|
|
332
|
-
{ opacity: 1, transform:
|
|
333
|
-
|
|
334
|
-
|
|
331
|
+
{ opacity: 0, transform: 'scale(0.3)' },
|
|
332
|
+
{ opacity: 1, transform: 'scale(1)' },
|
|
333
|
+
'300ms',
|
|
334
|
+
'200ms',
|
|
335
335
|
SPRING,
|
|
336
336
|
)
|
|
337
337
|
export const rubberIn: Preset = s(
|
|
338
|
-
{ opacity: 0, transform:
|
|
339
|
-
{ opacity: 1, transform:
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
338
|
+
{ opacity: 0, transform: 'scale(0.6)' },
|
|
339
|
+
{ opacity: 1, transform: 'scale(1)' },
|
|
340
|
+
'500ms',
|
|
341
|
+
'250ms',
|
|
342
|
+
'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
|
|
343
343
|
)
|
|
344
344
|
export const squishX: Preset = s(
|
|
345
|
-
{ opacity: 0, transform:
|
|
346
|
-
{ opacity: 1, transform:
|
|
347
|
-
|
|
348
|
-
|
|
345
|
+
{ opacity: 0, transform: 'scaleX(1.4) scaleY(0.6)' },
|
|
346
|
+
{ opacity: 1, transform: 'scaleX(1) scaleY(1)' },
|
|
347
|
+
'400ms',
|
|
348
|
+
'250ms',
|
|
349
349
|
SPRING,
|
|
350
350
|
)
|
|
351
351
|
export const squishY: Preset = s(
|
|
352
|
-
{ opacity: 0, transform:
|
|
353
|
-
{ opacity: 1, transform:
|
|
354
|
-
|
|
355
|
-
|
|
352
|
+
{ opacity: 0, transform: 'scaleX(0.6) scaleY(1.4)' },
|
|
353
|
+
{ opacity: 1, transform: 'scaleX(1) scaleY(1)' },
|
|
354
|
+
'400ms',
|
|
355
|
+
'250ms',
|
|
356
356
|
SPRING,
|
|
357
357
|
)
|
|
358
358
|
|
|
359
359
|
// Blur
|
|
360
360
|
export const blurIn: Preset = s(
|
|
361
|
-
{ opacity: 0, filter:
|
|
362
|
-
{ opacity: 1, filter:
|
|
361
|
+
{ opacity: 0, filter: 'blur(8px)' },
|
|
362
|
+
{ opacity: 1, filter: 'blur(0px)' },
|
|
363
363
|
)
|
|
364
364
|
export const blurInUp: Preset = s(
|
|
365
|
-
{ opacity: 0, filter:
|
|
366
|
-
{ opacity: 1, filter:
|
|
365
|
+
{ opacity: 0, filter: 'blur(8px)', transform: 'translateY(16px)' },
|
|
366
|
+
{ opacity: 1, filter: 'blur(0px)', transform: 'translateY(0)' },
|
|
367
367
|
)
|
|
368
368
|
export const blurInDown: Preset = s(
|
|
369
|
-
{ opacity: 0, filter:
|
|
370
|
-
{ opacity: 1, filter:
|
|
369
|
+
{ opacity: 0, filter: 'blur(8px)', transform: 'translateY(-16px)' },
|
|
370
|
+
{ opacity: 1, filter: 'blur(0px)', transform: 'translateY(0)' },
|
|
371
371
|
)
|
|
372
372
|
export const blurInLeft: Preset = s(
|
|
373
|
-
{ opacity: 0, filter:
|
|
374
|
-
{ opacity: 1, filter:
|
|
373
|
+
{ opacity: 0, filter: 'blur(8px)', transform: 'translateX(16px)' },
|
|
374
|
+
{ opacity: 1, filter: 'blur(0px)', transform: 'translateX(0)' },
|
|
375
375
|
)
|
|
376
376
|
export const blurInRight: Preset = s(
|
|
377
|
-
{ opacity: 0, filter:
|
|
378
|
-
{ opacity: 1, filter:
|
|
377
|
+
{ opacity: 0, filter: 'blur(8px)', transform: 'translateX(-16px)' },
|
|
378
|
+
{ opacity: 1, filter: 'blur(0px)', transform: 'translateX(0)' },
|
|
379
379
|
)
|
|
380
380
|
export const blurScale: Preset = s(
|
|
381
|
-
{ opacity: 0, filter:
|
|
382
|
-
{ opacity: 1, filter:
|
|
381
|
+
{ opacity: 0, filter: 'blur(8px)', transform: 'scale(0.95)' },
|
|
382
|
+
{ opacity: 1, filter: 'blur(0px)', transform: 'scale(1)' },
|
|
383
383
|
)
|
|
384
384
|
|
|
385
385
|
// Puff
|
|
386
386
|
export const puffIn: Preset = s(
|
|
387
|
-
{ opacity: 0, filter:
|
|
388
|
-
{ opacity: 1, filter:
|
|
389
|
-
|
|
390
|
-
|
|
387
|
+
{ opacity: 0, filter: 'blur(4px)', transform: 'scale(1.5)' },
|
|
388
|
+
{ opacity: 1, filter: 'blur(0px)', transform: 'scale(1)' },
|
|
389
|
+
'400ms',
|
|
390
|
+
'250ms',
|
|
391
391
|
)
|
|
392
392
|
export const puffOut: Preset = s(
|
|
393
|
-
{ opacity: 0, filter:
|
|
394
|
-
{ opacity: 1, filter:
|
|
395
|
-
|
|
396
|
-
|
|
393
|
+
{ opacity: 0, filter: 'blur(4px)', transform: 'scale(0.5)' },
|
|
394
|
+
{ opacity: 1, filter: 'blur(0px)', transform: 'scale(1)' },
|
|
395
|
+
'400ms',
|
|
396
|
+
'250ms',
|
|
397
397
|
)
|
|
398
398
|
|
|
399
399
|
// Clip Path
|
|
400
400
|
export const clipTop: Preset = s(
|
|
401
|
-
{ clipPath:
|
|
402
|
-
{ clipPath:
|
|
403
|
-
|
|
404
|
-
|
|
401
|
+
{ clipPath: 'inset(0 0 100% 0)' },
|
|
402
|
+
{ clipPath: 'inset(0 0 0 0)' },
|
|
403
|
+
'400ms',
|
|
404
|
+
'250ms',
|
|
405
405
|
)
|
|
406
406
|
export const clipBottom: Preset = s(
|
|
407
|
-
{ clipPath:
|
|
408
|
-
{ clipPath:
|
|
409
|
-
|
|
410
|
-
|
|
407
|
+
{ clipPath: 'inset(100% 0 0 0)' },
|
|
408
|
+
{ clipPath: 'inset(0 0 0 0)' },
|
|
409
|
+
'400ms',
|
|
410
|
+
'250ms',
|
|
411
411
|
)
|
|
412
412
|
export const clipLeft: Preset = s(
|
|
413
|
-
{ clipPath:
|
|
414
|
-
{ clipPath:
|
|
415
|
-
|
|
416
|
-
|
|
413
|
+
{ clipPath: 'inset(0 100% 0 0)' },
|
|
414
|
+
{ clipPath: 'inset(0 0 0 0)' },
|
|
415
|
+
'400ms',
|
|
416
|
+
'250ms',
|
|
417
417
|
)
|
|
418
418
|
export const clipRight: Preset = s(
|
|
419
|
-
{ clipPath:
|
|
420
|
-
{ clipPath:
|
|
421
|
-
|
|
422
|
-
|
|
419
|
+
{ clipPath: 'inset(0 0 0 100%)' },
|
|
420
|
+
{ clipPath: 'inset(0 0 0 0)' },
|
|
421
|
+
'400ms',
|
|
422
|
+
'250ms',
|
|
423
423
|
)
|
|
424
424
|
export const clipCircle: Preset = s(
|
|
425
|
-
{ clipPath:
|
|
426
|
-
{ clipPath:
|
|
427
|
-
|
|
428
|
-
|
|
425
|
+
{ clipPath: 'circle(0% at 50% 50%)' },
|
|
426
|
+
{ clipPath: 'circle(75% at 50% 50%)' },
|
|
427
|
+
'500ms',
|
|
428
|
+
'300ms',
|
|
429
429
|
)
|
|
430
430
|
export const clipCenter: Preset = s(
|
|
431
|
-
{ clipPath:
|
|
432
|
-
{ clipPath:
|
|
433
|
-
|
|
434
|
-
|
|
431
|
+
{ clipPath: 'inset(50% 50% 50% 50%)' },
|
|
432
|
+
{ clipPath: 'inset(0 0 0 0)' },
|
|
433
|
+
'400ms',
|
|
434
|
+
'250ms',
|
|
435
435
|
)
|
|
436
436
|
export const clipDiamond: Preset = s(
|
|
437
|
-
{ clipPath:
|
|
438
|
-
{ clipPath:
|
|
439
|
-
|
|
440
|
-
|
|
437
|
+
{ clipPath: 'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)' },
|
|
438
|
+
{ clipPath: 'polygon(50% -10%, 110% 50%, 50% 110%, -10% 50%)' },
|
|
439
|
+
'500ms',
|
|
440
|
+
'300ms',
|
|
441
441
|
)
|
|
442
442
|
export const clipCorner: Preset = s(
|
|
443
|
-
{ clipPath:
|
|
444
|
-
{ clipPath:
|
|
445
|
-
|
|
446
|
-
|
|
443
|
+
{ clipPath: 'polygon(0 0, 0 0, 0 0, 0 0)' },
|
|
444
|
+
{ clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)' },
|
|
445
|
+
'500ms',
|
|
446
|
+
'300ms',
|
|
447
447
|
)
|
|
448
448
|
|
|
449
449
|
// Perspective
|
|
450
450
|
export const perspectiveUp: Preset = s(
|
|
451
|
-
{ opacity: 0, transform:
|
|
452
|
-
{ opacity: 1, transform:
|
|
451
|
+
{ opacity: 0, transform: 'perspective(600px) rotateX(15deg)' },
|
|
452
|
+
{ opacity: 1, transform: 'perspective(600px) rotateX(0)' },
|
|
453
453
|
)
|
|
454
454
|
export const perspectiveDown: Preset = s(
|
|
455
|
-
{ opacity: 0, transform:
|
|
456
|
-
{ opacity: 1, transform:
|
|
455
|
+
{ opacity: 0, transform: 'perspective(600px) rotateX(-15deg)' },
|
|
456
|
+
{ opacity: 1, transform: 'perspective(600px) rotateX(0)' },
|
|
457
457
|
)
|
|
458
458
|
export const perspectiveLeft: Preset = s(
|
|
459
|
-
{ opacity: 0, transform:
|
|
460
|
-
{ opacity: 1, transform:
|
|
459
|
+
{ opacity: 0, transform: 'perspective(600px) rotateY(-15deg)' },
|
|
460
|
+
{ opacity: 1, transform: 'perspective(600px) rotateY(0)' },
|
|
461
461
|
)
|
|
462
462
|
export const perspectiveRight: Preset = s(
|
|
463
|
-
{ opacity: 0, transform:
|
|
464
|
-
{ opacity: 1, transform:
|
|
463
|
+
{ opacity: 0, transform: 'perspective(600px) rotateY(15deg)' },
|
|
464
|
+
{ opacity: 1, transform: 'perspective(600px) rotateY(0)' },
|
|
465
465
|
)
|
|
466
466
|
|
|
467
467
|
// Expand
|
|
468
468
|
export const expandX: Preset = s(
|
|
469
|
-
{ opacity: 0, transform:
|
|
470
|
-
{ opacity: 1, transform:
|
|
469
|
+
{ opacity: 0, transform: 'scaleX(0)' },
|
|
470
|
+
{ opacity: 1, transform: 'scaleX(1)' },
|
|
471
471
|
)
|
|
472
472
|
export const expandY: Preset = s(
|
|
473
|
-
{ opacity: 0, transform:
|
|
474
|
-
{ opacity: 1, transform:
|
|
473
|
+
{ opacity: 0, transform: 'scaleY(0)' },
|
|
474
|
+
{ opacity: 1, transform: 'scaleY(1)' },
|
|
475
475
|
)
|
|
476
476
|
|
|
477
477
|
// Skew
|
|
478
478
|
export const skewIn: Preset = s(
|
|
479
|
-
{ opacity: 0, transform:
|
|
480
|
-
{ opacity: 1, transform:
|
|
479
|
+
{ opacity: 0, transform: 'skewX(-5deg)' },
|
|
480
|
+
{ opacity: 1, transform: 'skewX(0)' },
|
|
481
481
|
)
|
|
482
482
|
export const skewInReverse: Preset = s(
|
|
483
|
-
{ opacity: 0, transform:
|
|
484
|
-
{ opacity: 1, transform:
|
|
483
|
+
{ opacity: 0, transform: 'skewX(5deg)' },
|
|
484
|
+
{ opacity: 1, transform: 'skewX(0)' },
|
|
485
485
|
)
|
|
486
486
|
export const skewInY: Preset = s(
|
|
487
|
-
{ opacity: 0, transform:
|
|
488
|
-
{ opacity: 1, transform:
|
|
487
|
+
{ opacity: 0, transform: 'skewY(-5deg)' },
|
|
488
|
+
{ opacity: 1, transform: 'skewY(0)' },
|
|
489
489
|
)
|
|
490
490
|
export const skewInYReverse: Preset = s(
|
|
491
|
-
{ opacity: 0, transform:
|
|
492
|
-
{ opacity: 1, transform:
|
|
491
|
+
{ opacity: 0, transform: 'skewY(5deg)' },
|
|
492
|
+
{ opacity: 1, transform: 'skewY(0)' },
|
|
493
493
|
)
|
|
494
494
|
|
|
495
495
|
// Drop / Rise
|
|
496
496
|
export const drop: Preset = s(
|
|
497
|
-
{ opacity: 0, transform:
|
|
498
|
-
{ opacity: 1, transform:
|
|
499
|
-
|
|
500
|
-
|
|
497
|
+
{ opacity: 0, transform: 'translateY(-100%)' },
|
|
498
|
+
{ opacity: 1, transform: 'translateY(0)' },
|
|
499
|
+
'400ms',
|
|
500
|
+
'250ms',
|
|
501
501
|
)
|
|
502
502
|
export const rise: Preset = s(
|
|
503
|
-
{ opacity: 0, transform:
|
|
504
|
-
{ opacity: 1, transform:
|
|
505
|
-
|
|
506
|
-
|
|
503
|
+
{ opacity: 0, transform: 'translateY(100%)' },
|
|
504
|
+
{ opacity: 1, transform: 'translateY(0)' },
|
|
505
|
+
'400ms',
|
|
506
|
+
'250ms',
|
|
507
507
|
)
|
|
508
508
|
|
|
509
509
|
// Back
|
|
510
510
|
export const backInUp: Preset = s(
|
|
511
|
-
{ opacity: 0, transform:
|
|
512
|
-
{ opacity: 1, transform:
|
|
513
|
-
|
|
514
|
-
|
|
511
|
+
{ opacity: 0, transform: 'scale(0.7) translateY(80px)' },
|
|
512
|
+
{ opacity: 1, transform: 'scale(1) translateY(0)' },
|
|
513
|
+
'400ms',
|
|
514
|
+
'250ms',
|
|
515
515
|
)
|
|
516
516
|
export const backInDown: Preset = s(
|
|
517
|
-
{ opacity: 0, transform:
|
|
518
|
-
{ opacity: 1, transform:
|
|
519
|
-
|
|
520
|
-
|
|
517
|
+
{ opacity: 0, transform: 'scale(0.7) translateY(-80px)' },
|
|
518
|
+
{ opacity: 1, transform: 'scale(1) translateY(0)' },
|
|
519
|
+
'400ms',
|
|
520
|
+
'250ms',
|
|
521
521
|
)
|
|
522
522
|
export const backInLeft: Preset = s(
|
|
523
|
-
{ opacity: 0, transform:
|
|
524
|
-
{ opacity: 1, transform:
|
|
525
|
-
|
|
526
|
-
|
|
523
|
+
{ opacity: 0, transform: 'scale(0.7) translateX(80px)' },
|
|
524
|
+
{ opacity: 1, transform: 'scale(1) translateX(0)' },
|
|
525
|
+
'400ms',
|
|
526
|
+
'250ms',
|
|
527
527
|
)
|
|
528
528
|
export const backInRight: Preset = s(
|
|
529
|
-
{ opacity: 0, transform:
|
|
530
|
-
{ opacity: 1, transform:
|
|
531
|
-
|
|
532
|
-
|
|
529
|
+
{ opacity: 0, transform: 'scale(0.7) translateX(-80px)' },
|
|
530
|
+
{ opacity: 1, transform: 'scale(1) translateX(0)' },
|
|
531
|
+
'400ms',
|
|
532
|
+
'250ms',
|
|
533
533
|
)
|
|
534
534
|
|
|
535
535
|
// Light Speed
|
|
536
536
|
export const lightSpeedInLeft: Preset = s(
|
|
537
|
-
{ opacity: 0, transform:
|
|
538
|
-
{ opacity: 1, transform:
|
|
539
|
-
|
|
540
|
-
|
|
537
|
+
{ opacity: 0, transform: 'translateX(100%) skewX(-30deg)' },
|
|
538
|
+
{ opacity: 1, transform: 'translateX(0) skewX(0)' },
|
|
539
|
+
'400ms',
|
|
540
|
+
'250ms',
|
|
541
541
|
)
|
|
542
542
|
export const lightSpeedInRight: Preset = s(
|
|
543
|
-
{ opacity: 0, transform:
|
|
544
|
-
{ opacity: 1, transform:
|
|
545
|
-
|
|
546
|
-
|
|
543
|
+
{ opacity: 0, transform: 'translateX(-100%) skewX(30deg)' },
|
|
544
|
+
{ opacity: 1, transform: 'translateX(0) skewX(0)' },
|
|
545
|
+
'400ms',
|
|
546
|
+
'250ms',
|
|
547
547
|
)
|
|
548
548
|
|
|
549
549
|
// Roll
|
|
550
550
|
export const rollInLeft: Preset = s(
|
|
551
|
-
{ opacity: 0, transform:
|
|
552
|
-
{ opacity: 1, transform:
|
|
553
|
-
|
|
554
|
-
|
|
551
|
+
{ opacity: 0, transform: 'translateX(-100%) rotate(-120deg)' },
|
|
552
|
+
{ opacity: 1, transform: 'translateX(0) rotate(0)' },
|
|
553
|
+
'500ms',
|
|
554
|
+
'300ms',
|
|
555
555
|
)
|
|
556
556
|
export const rollInRight: Preset = s(
|
|
557
|
-
{ opacity: 0, transform:
|
|
558
|
-
{ opacity: 1, transform:
|
|
559
|
-
|
|
560
|
-
|
|
557
|
+
{ opacity: 0, transform: 'translateX(100%) rotate(120deg)' },
|
|
558
|
+
{ opacity: 1, transform: 'translateX(0) rotate(0)' },
|
|
559
|
+
'500ms',
|
|
560
|
+
'300ms',
|
|
561
561
|
)
|
|
562
562
|
|
|
563
563
|
// Swing
|
|
564
564
|
export const swingInTop: Preset = s(
|
|
565
|
-
{ opacity: 0, transform:
|
|
566
|
-
{ opacity: 1, transform:
|
|
567
|
-
|
|
568
|
-
|
|
565
|
+
{ opacity: 0, transform: 'perspective(600px) rotateX(-90deg)', transformOrigin: 'top' },
|
|
566
|
+
{ opacity: 1, transform: 'perspective(600px) rotateX(0)', transformOrigin: 'top' },
|
|
567
|
+
'500ms',
|
|
568
|
+
'300ms',
|
|
569
569
|
)
|
|
570
570
|
export const swingInBottom: Preset = s(
|
|
571
|
-
{ opacity: 0, transform:
|
|
572
|
-
{ opacity: 1, transform:
|
|
573
|
-
|
|
574
|
-
|
|
571
|
+
{ opacity: 0, transform: 'perspective(600px) rotateX(90deg)', transformOrigin: 'bottom' },
|
|
572
|
+
{ opacity: 1, transform: 'perspective(600px) rotateX(0)', transformOrigin: 'bottom' },
|
|
573
|
+
'500ms',
|
|
574
|
+
'300ms',
|
|
575
575
|
)
|
|
576
576
|
export const swingInLeft: Preset = s(
|
|
577
|
-
{ opacity: 0, transform:
|
|
578
|
-
{ opacity: 1, transform:
|
|
579
|
-
|
|
580
|
-
|
|
577
|
+
{ opacity: 0, transform: 'perspective(600px) rotateY(90deg)', transformOrigin: 'left' },
|
|
578
|
+
{ opacity: 1, transform: 'perspective(600px) rotateY(0)', transformOrigin: 'left' },
|
|
579
|
+
'500ms',
|
|
580
|
+
'300ms',
|
|
581
581
|
)
|
|
582
582
|
export const swingInRight: Preset = s(
|
|
583
|
-
{ opacity: 0, transform:
|
|
584
|
-
{ opacity: 1, transform:
|
|
585
|
-
|
|
586
|
-
|
|
583
|
+
{ opacity: 0, transform: 'perspective(600px) rotateY(-90deg)', transformOrigin: 'right' },
|
|
584
|
+
{ opacity: 1, transform: 'perspective(600px) rotateY(0)', transformOrigin: 'right' },
|
|
585
|
+
'500ms',
|
|
586
|
+
'300ms',
|
|
587
587
|
)
|
|
588
588
|
|
|
589
589
|
// Slit
|
|
590
590
|
export const slitHorizontal: Preset = s(
|
|
591
|
-
{ opacity: 0, transform:
|
|
592
|
-
{ opacity: 1, transform:
|
|
593
|
-
|
|
594
|
-
|
|
591
|
+
{ opacity: 0, transform: 'perspective(600px) rotateY(90deg) scaleX(0)' },
|
|
592
|
+
{ opacity: 1, transform: 'perspective(600px) rotateY(0) scaleX(1)' },
|
|
593
|
+
'500ms',
|
|
594
|
+
'300ms',
|
|
595
595
|
)
|
|
596
596
|
export const slitVertical: Preset = s(
|
|
597
|
-
{ opacity: 0, transform:
|
|
598
|
-
{ opacity: 1, transform:
|
|
599
|
-
|
|
600
|
-
|
|
597
|
+
{ opacity: 0, transform: 'perspective(600px) rotateX(90deg) scaleY(0)' },
|
|
598
|
+
{ opacity: 1, transform: 'perspective(600px) rotateX(0) scaleY(1)' },
|
|
599
|
+
'500ms',
|
|
600
|
+
'300ms',
|
|
601
601
|
)
|
|
602
602
|
|
|
603
603
|
// Swirl
|
|
604
604
|
export const swirlIn: Preset = s(
|
|
605
|
-
{ opacity: 0, transform:
|
|
606
|
-
{ opacity: 1, transform:
|
|
607
|
-
|
|
608
|
-
|
|
605
|
+
{ opacity: 0, transform: 'rotate(-540deg) scale(0)' },
|
|
606
|
+
{ opacity: 1, transform: 'rotate(0) scale(1)' },
|
|
607
|
+
'600ms',
|
|
608
|
+
'400ms',
|
|
609
609
|
)
|
|
610
610
|
export const swirlInReverse: Preset = s(
|
|
611
|
-
{ opacity: 0, transform:
|
|
612
|
-
{ opacity: 1, transform:
|
|
613
|
-
|
|
614
|
-
|
|
611
|
+
{ opacity: 0, transform: 'rotate(540deg) scale(0)' },
|
|
612
|
+
{ opacity: 1, transform: 'rotate(0) scale(1)' },
|
|
613
|
+
'600ms',
|
|
614
|
+
'400ms',
|
|
615
615
|
)
|
|
616
616
|
|
|
617
617
|
// Fly
|
|
618
618
|
export const flyInUp: Preset = s(
|
|
619
|
-
{ opacity: 0, transform:
|
|
620
|
-
{ opacity: 1, transform:
|
|
621
|
-
|
|
622
|
-
|
|
619
|
+
{ opacity: 0, transform: 'translateY(100vh)' },
|
|
620
|
+
{ opacity: 1, transform: 'translateY(0)' },
|
|
621
|
+
'500ms',
|
|
622
|
+
'300ms',
|
|
623
623
|
)
|
|
624
624
|
export const flyInDown: Preset = s(
|
|
625
|
-
{ opacity: 0, transform:
|
|
626
|
-
{ opacity: 1, transform:
|
|
627
|
-
|
|
628
|
-
|
|
625
|
+
{ opacity: 0, transform: 'translateY(-100vh)' },
|
|
626
|
+
{ opacity: 1, transform: 'translateY(0)' },
|
|
627
|
+
'500ms',
|
|
628
|
+
'300ms',
|
|
629
629
|
)
|
|
630
630
|
export const flyInLeft: Preset = s(
|
|
631
|
-
{ opacity: 0, transform:
|
|
632
|
-
{ opacity: 1, transform:
|
|
633
|
-
|
|
634
|
-
|
|
631
|
+
{ opacity: 0, transform: 'translateX(100vw)' },
|
|
632
|
+
{ opacity: 1, transform: 'translateX(0)' },
|
|
633
|
+
'500ms',
|
|
634
|
+
'300ms',
|
|
635
635
|
)
|
|
636
636
|
export const flyInRight: Preset = s(
|
|
637
|
-
{ opacity: 0, transform:
|
|
638
|
-
{ opacity: 1, transform:
|
|
639
|
-
|
|
640
|
-
|
|
637
|
+
{ opacity: 0, transform: 'translateX(-100vw)' },
|
|
638
|
+
{ opacity: 1, transform: 'translateX(0)' },
|
|
639
|
+
'500ms',
|
|
640
|
+
'300ms',
|
|
641
641
|
)
|
|
642
642
|
|
|
643
643
|
// Float
|
|
644
644
|
export const floatUp: Preset = s(
|
|
645
|
-
{ opacity: 0, transform:
|
|
646
|
-
{ opacity: 1, transform:
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
645
|
+
{ opacity: 0, transform: 'translateY(32px) scale(0.97)' },
|
|
646
|
+
{ opacity: 1, transform: 'translateY(0) scale(1)' },
|
|
647
|
+
'500ms',
|
|
648
|
+
'300ms',
|
|
649
|
+
'cubic-bezier(0.23, 1, 0.32, 1)',
|
|
650
650
|
)
|
|
651
651
|
export const floatDown: Preset = s(
|
|
652
|
-
{ opacity: 0, transform:
|
|
653
|
-
{ opacity: 1, transform:
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
652
|
+
{ opacity: 0, transform: 'translateY(-32px) scale(0.97)' },
|
|
653
|
+
{ opacity: 1, transform: 'translateY(0) scale(1)' },
|
|
654
|
+
'500ms',
|
|
655
|
+
'300ms',
|
|
656
|
+
'cubic-bezier(0.23, 1, 0.32, 1)',
|
|
657
657
|
)
|
|
658
658
|
export const floatLeft: Preset = s(
|
|
659
|
-
{ opacity: 0, transform:
|
|
660
|
-
{ opacity: 1, transform:
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
659
|
+
{ opacity: 0, transform: 'translateX(32px) scale(0.97)' },
|
|
660
|
+
{ opacity: 1, transform: 'translateX(0) scale(1)' },
|
|
661
|
+
'500ms',
|
|
662
|
+
'300ms',
|
|
663
|
+
'cubic-bezier(0.23, 1, 0.32, 1)',
|
|
664
664
|
)
|
|
665
665
|
export const floatRight: Preset = s(
|
|
666
|
-
{ opacity: 0, transform:
|
|
667
|
-
{ opacity: 1, transform:
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
666
|
+
{ opacity: 0, transform: 'translateX(-32px) scale(0.97)' },
|
|
667
|
+
{ opacity: 1, transform: 'translateX(0) scale(1)' },
|
|
668
|
+
'500ms',
|
|
669
|
+
'300ms',
|
|
670
|
+
'cubic-bezier(0.23, 1, 0.32, 1)',
|
|
671
671
|
)
|
|
672
672
|
|
|
673
673
|
// Push
|
|
674
674
|
export const pushInLeft: Preset = s(
|
|
675
|
-
{ opacity: 0, transform:
|
|
676
|
-
{ opacity: 1, transform:
|
|
675
|
+
{ opacity: 0, transform: 'translateX(-48px) scale(0.9)' },
|
|
676
|
+
{ opacity: 1, transform: 'translateX(0) scale(1)' },
|
|
677
677
|
)
|
|
678
678
|
export const pushInRight: Preset = s(
|
|
679
|
-
{ opacity: 0, transform:
|
|
680
|
-
{ opacity: 1, transform:
|
|
679
|
+
{ opacity: 0, transform: 'translateX(48px) scale(0.9)' },
|
|
680
|
+
{ opacity: 1, transform: 'translateX(0) scale(1)' },
|
|
681
681
|
)
|
|
682
682
|
|
|
683
683
|
// Tilt
|
|
684
684
|
export const tiltInUp: Preset = s(
|
|
685
|
-
{ opacity: 0, transform:
|
|
686
|
-
{ opacity: 1, transform:
|
|
685
|
+
{ opacity: 0, transform: 'perspective(600px) rotateX(15deg) translateY(24px)' },
|
|
686
|
+
{ opacity: 1, transform: 'perspective(600px) rotateX(0) translateY(0)' },
|
|
687
687
|
)
|
|
688
688
|
export const tiltInDown: Preset = s(
|
|
689
|
-
{ opacity: 0, transform:
|
|
690
|
-
{ opacity: 1, transform:
|
|
689
|
+
{ opacity: 0, transform: 'perspective(600px) rotateX(-15deg) translateY(-24px)' },
|
|
690
|
+
{ opacity: 1, transform: 'perspective(600px) rotateX(0) translateY(0)' },
|
|
691
691
|
)
|
|
692
692
|
export const tiltInLeft: Preset = s(
|
|
693
|
-
{ opacity: 0, transform:
|
|
694
|
-
{ opacity: 1, transform:
|
|
693
|
+
{ opacity: 0, transform: 'perspective(600px) rotateY(-15deg) translateX(24px)' },
|
|
694
|
+
{ opacity: 1, transform: 'perspective(600px) rotateY(0) translateX(0)' },
|
|
695
695
|
)
|
|
696
696
|
export const tiltInRight: Preset = s(
|
|
697
|
-
{ opacity: 0, transform:
|
|
698
|
-
{ opacity: 1, transform:
|
|
697
|
+
{ opacity: 0, transform: 'perspective(600px) rotateY(15deg) translateX(-24px)' },
|
|
698
|
+
{ opacity: 1, transform: 'perspective(600px) rotateY(0) translateX(0)' },
|
|
699
699
|
)
|
|
700
700
|
|
|
701
701
|
// All presets map
|