@cliquify.me/animations 10.0.1 → 10.0.3
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/dist/index.es.js +335 -355
- package/dist/index.umd.js +6 -6
- package/package.json +14 -7
- package/src/index.ts +0 -7
package/dist/index.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as H, Fragment as
|
|
2
|
-
import
|
|
3
|
-
import { interpolate as
|
|
4
|
-
const
|
|
1
|
+
import { jsx as H, Fragment as It, jsxs as jt } from "react/jsx-runtime";
|
|
2
|
+
import J, { useMemo as Ht } from "react";
|
|
3
|
+
import { interpolate as K, Easing as R } from "remotion";
|
|
4
|
+
const Tt = () => ({
|
|
5
5
|
scale: (t) => ({ transform: `scale(${t})` }),
|
|
6
6
|
growIn: (t) => ({ transform: `scale(${t})` }),
|
|
7
7
|
shrinkIn: (t) => ({ transform: `scale(${t})` }),
|
|
@@ -93,67 +93,67 @@ const vt = () => ({
|
|
|
93
93
|
borderRadius: `${t}px`,
|
|
94
94
|
overflow: "hidden"
|
|
95
95
|
})
|
|
96
|
-
}),
|
|
97
|
-
const
|
|
96
|
+
}), Bt = (t, f = 0) => {
|
|
97
|
+
const l = [], a = t / 5;
|
|
98
98
|
for (let c = 0; c < 6; c += 1)
|
|
99
|
-
|
|
100
|
-
return
|
|
101
|
-
},
|
|
102
|
-
const { from: c, to:
|
|
103
|
-
if (isNaN(u) || isNaN(
|
|
99
|
+
l.push(c * a + f);
|
|
100
|
+
return l;
|
|
101
|
+
}, Wt = (t, f, l, a = !1) => {
|
|
102
|
+
const { from: c, to: n, ease: g } = f, p = f.durationInFrames || 30, u = Number(c), s = Number(n), r = Math.max(1, Number(p));
|
|
103
|
+
if (isNaN(u) || isNaN(s))
|
|
104
104
|
return console.error("Invalid animation values:", {
|
|
105
105
|
from: c,
|
|
106
|
-
to:
|
|
107
|
-
animationDurationInFrames:
|
|
108
|
-
property:
|
|
106
|
+
to: n,
|
|
107
|
+
animationDurationInFrames: p,
|
|
108
|
+
property: f.property
|
|
109
109
|
}), u;
|
|
110
|
-
|
|
111
|
-
`durationInFrames is undefined for animation: ${
|
|
110
|
+
p === void 0 && console.warn(
|
|
111
|
+
`durationInFrames is undefined for animation: ${f.property}. Using 1 frame as default.`
|
|
112
112
|
);
|
|
113
|
-
const
|
|
114
|
-
if (
|
|
115
|
-
return t <
|
|
113
|
+
const d = f.delay || 0;
|
|
114
|
+
if (f.property === "hide-show" || f.property === "hide" || f.property === "show")
|
|
115
|
+
return t < d ? u : s;
|
|
116
116
|
let $;
|
|
117
|
-
if (
|
|
118
|
-
|
|
119
|
-
|
|
117
|
+
if (f.property === "moveScaleIn" ? $ = a ? [
|
|
118
|
+
l - r - d,
|
|
119
|
+
Math.max(0, l - 1 - d)
|
|
120
120
|
] : [
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
] :
|
|
124
|
-
|
|
125
|
-
|
|
121
|
+
d + r * 0.5,
|
|
122
|
+
d + r
|
|
123
|
+
] : f.property === "moveTranslateY" ? $ = a ? [
|
|
124
|
+
l - r * 0.5 - d,
|
|
125
|
+
Math.max(0, l - 1 - d)
|
|
126
126
|
] : [
|
|
127
|
-
|
|
128
|
-
|
|
127
|
+
d,
|
|
128
|
+
d + r * 0.5
|
|
129
129
|
] : $ = a ? [
|
|
130
|
-
|
|
131
|
-
|
|
130
|
+
l - r - d,
|
|
131
|
+
Math.max(0, l - 1 - d)
|
|
132
132
|
] : [
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
],
|
|
136
|
-
const X = a ?
|
|
133
|
+
d,
|
|
134
|
+
d + r
|
|
135
|
+
], f.property.includes("shake")) {
|
|
136
|
+
const X = a ? Bt(
|
|
137
137
|
r,
|
|
138
|
-
|
|
139
|
-
) :
|
|
140
|
-
return
|
|
138
|
+
l - r - d
|
|
139
|
+
) : Bt(r, d);
|
|
140
|
+
return K(
|
|
141
141
|
t,
|
|
142
142
|
X,
|
|
143
|
-
[0, u,
|
|
143
|
+
[0, u, s, u, s, 0],
|
|
144
144
|
{
|
|
145
145
|
extrapolateLeft: "clamp",
|
|
146
146
|
extrapolateRight: "clamp",
|
|
147
|
-
easing:
|
|
147
|
+
easing: g
|
|
148
148
|
}
|
|
149
149
|
);
|
|
150
150
|
}
|
|
151
|
-
return
|
|
151
|
+
return K(t, $, [u, s], {
|
|
152
152
|
extrapolateLeft: "clamp",
|
|
153
153
|
extrapolateRight: "clamp",
|
|
154
|
-
easing:
|
|
154
|
+
easing: g
|
|
155
155
|
});
|
|
156
|
-
},
|
|
156
|
+
}, Q = (t) => {
|
|
157
157
|
if (t == null) return 0;
|
|
158
158
|
if (typeof t == "number")
|
|
159
159
|
return Number.isNaN(t) ? 0 : t;
|
|
@@ -166,177 +166,177 @@ const vt = () => ({
|
|
|
166
166
|
const c = parseFloat(String(t.rotation));
|
|
167
167
|
if (!Number.isNaN(c)) return c;
|
|
168
168
|
}
|
|
169
|
-
return t.transform ?
|
|
169
|
+
return t.transform ? Q(t.transform) : 0;
|
|
170
170
|
}
|
|
171
|
-
const
|
|
172
|
-
if (
|
|
173
|
-
return parseFloat(
|
|
174
|
-
const a = /matrix\(([^)]+)\)/.exec(
|
|
171
|
+
const f = String(t), l = /rotate\((-?[\d.]+)deg\)/.exec(f);
|
|
172
|
+
if (l)
|
|
173
|
+
return parseFloat(l[1]) || 0;
|
|
174
|
+
const a = /matrix\(([^)]+)\)/.exec(f);
|
|
175
175
|
if (a) {
|
|
176
|
-
const c = a[1].split(",").map((
|
|
176
|
+
const c = a[1].split(",").map((n) => parseFloat(n.trim()));
|
|
177
177
|
if (c.length >= 4) {
|
|
178
|
-
const [
|
|
179
|
-
return Math.atan2(
|
|
178
|
+
const [n, g] = c;
|
|
179
|
+
return Math.atan2(g, n) * (180 / Math.PI);
|
|
180
180
|
}
|
|
181
181
|
}
|
|
182
182
|
return 0;
|
|
183
|
-
},
|
|
184
|
-
var u,
|
|
185
|
-
const { property:
|
|
186
|
-
if (
|
|
187
|
-
const X = Number(((u = t.details) == null ? void 0 : u.fromX) ?? t.from ?? 0),
|
|
188
|
-
let
|
|
189
|
-
if (
|
|
190
|
-
const
|
|
191
|
-
|
|
183
|
+
}, Pt = (t, f, l, a, c) => {
|
|
184
|
+
var u, s, r, d, $;
|
|
185
|
+
const { property: n } = t;
|
|
186
|
+
if (n === "move") {
|
|
187
|
+
const X = Number(((u = t.details) == null ? void 0 : u.fromX) ?? t.from ?? 0), B = Number(((s = t.details) == null ? void 0 : s.toX) ?? t.to ?? 0), T = Number(((r = t.details) == null ? void 0 : r.fromY) ?? 0), P = Number(((d = t.details) == null ? void 0 : d.toY) ?? 0), E = Number((($ = t.details) == null ? void 0 : $.scale) || 1) || 1;
|
|
188
|
+
let O = c;
|
|
189
|
+
if (O == null || Number.isNaN(O)) {
|
|
190
|
+
const m = t.details;
|
|
191
|
+
O = Q((m == null ? void 0 : m.rotate) ?? (m == null ? void 0 : m.rotation) ?? (m == null ? void 0 : m.transform));
|
|
192
192
|
}
|
|
193
|
-
const e = t.delay || 0,
|
|
193
|
+
const e = t.delay || 0, x = t.durationInFrames || 30, F = a ? [l - x - e, Math.max(0, l - 1 - e)] : [e, e + x], C = K(f, F, [X, B], {
|
|
194
194
|
extrapolateLeft: "clamp",
|
|
195
195
|
extrapolateRight: "clamp",
|
|
196
196
|
easing: t.ease
|
|
197
|
-
}),
|
|
197
|
+
}), w = K(f, F, [T, P], {
|
|
198
198
|
extrapolateLeft: "clamp",
|
|
199
199
|
extrapolateRight: "clamp",
|
|
200
200
|
easing: t.ease
|
|
201
|
-
}),
|
|
201
|
+
}), S = (O || 0) * Math.PI / 180, Y = Math.cos(S), i = Math.sin(S), h = C * Y + w * i, y = -C * i + w * Y, V = h / E, Z = y / E;
|
|
202
202
|
return {
|
|
203
|
-
transform: `translateX(${
|
|
203
|
+
transform: `translateX(${V}px) translateY(${Z}px)`
|
|
204
204
|
};
|
|
205
205
|
}
|
|
206
|
-
const
|
|
207
|
-
return (
|
|
208
|
-
},
|
|
206
|
+
const g = Wt(f, t, l, a), p = Tt();
|
|
207
|
+
return (p[n] || p.default)(g);
|
|
208
|
+
}, G = (t, f, l, a = !1, c = !1, n) => J.useMemo(() => {
|
|
209
209
|
if (t.length === 0) return {};
|
|
210
|
-
const
|
|
211
|
-
(
|
|
210
|
+
const g = t.filter(
|
|
211
|
+
(p) => p.from !== void 0 && p.to !== void 0
|
|
212
212
|
);
|
|
213
|
-
if (
|
|
214
|
-
const
|
|
215
|
-
return
|
|
216
|
-
const r =
|
|
217
|
-
n,
|
|
213
|
+
if (g.length !== t.length && console.error("Some animations are invalid and will be ignored"), c) {
|
|
214
|
+
const p = [];
|
|
215
|
+
return g.reverse().forEach((s) => {
|
|
216
|
+
const r = Pt(
|
|
218
217
|
s,
|
|
219
|
-
|
|
218
|
+
l,
|
|
219
|
+
f,
|
|
220
220
|
!1,
|
|
221
|
-
|
|
221
|
+
n
|
|
222
222
|
);
|
|
223
|
-
|
|
224
|
-
}),
|
|
225
|
-
(
|
|
226
|
-
|
|
227
|
-
}),
|
|
223
|
+
p.push(r);
|
|
224
|
+
}), p.reduce(
|
|
225
|
+
(s, r) => (Object.keys(r).forEach((d) => {
|
|
226
|
+
d === "transform" || d === "filter" ? s[d] = s[d] ? `${s[d]} ${r[d]}` : r[d] : s[d] = r[d];
|
|
227
|
+
}), s),
|
|
228
228
|
{}
|
|
229
229
|
);
|
|
230
230
|
} else
|
|
231
|
-
return
|
|
232
|
-
(u,
|
|
233
|
-
r === "transform" || r === "filter" ? u[r] = u[r] ? `${u[r]} ${
|
|
231
|
+
return g.map((u) => Pt(u, l, f, a, n)).reduce(
|
|
232
|
+
(u, s) => (Object.keys(s).forEach((r) => {
|
|
233
|
+
r === "transform" || r === "filter" ? u[r] = u[r] ? `${u[r]} ${s[r]}` : s[r] : u[r] = s[r];
|
|
234
234
|
}), u),
|
|
235
235
|
{}
|
|
236
236
|
);
|
|
237
|
-
}, [t,
|
|
238
|
-
const
|
|
239
|
-
return t.forEach((
|
|
240
|
-
Array.isArray(
|
|
241
|
-
}),
|
|
242
|
-
(
|
|
243
|
-
) ?
|
|
244
|
-
(
|
|
245
|
-
...
|
|
246
|
-
from: Math.min(
|
|
247
|
-
to: Math.max(
|
|
237
|
+
}, [t, l, f, a, n]), q = (t) => t ? Array.isArray(t) ? t : [t] : [], Gt = (...t) => {
|
|
238
|
+
const f = [];
|
|
239
|
+
return t.forEach((l) => {
|
|
240
|
+
Array.isArray(l) ? f.push(...l) : l && f.push(l);
|
|
241
|
+
}), f.filter((l) => l !== void 0).reduce((l, a) => l.find(
|
|
242
|
+
(n) => n.property === a.property
|
|
243
|
+
) ? l.map(
|
|
244
|
+
(n) => n.property === a.property ? {
|
|
245
|
+
...n,
|
|
246
|
+
from: Math.min(n.from, a.from),
|
|
247
|
+
to: Math.max(n.to, a.to),
|
|
248
248
|
durationInFrames: Math.max(
|
|
249
|
-
|
|
249
|
+
n.durationInFrames,
|
|
250
250
|
a.durationInFrames
|
|
251
251
|
),
|
|
252
|
-
delay: Math.min(
|
|
253
|
-
ease: (
|
|
252
|
+
delay: Math.min(n.delay || 0, a.delay || 0),
|
|
253
|
+
ease: (g) => (n.ease(g) + a.ease(g)) / 2
|
|
254
254
|
// Average the easing functions
|
|
255
|
-
} :
|
|
256
|
-
) : [...
|
|
257
|
-
},
|
|
255
|
+
} : n
|
|
256
|
+
) : [...l, a], []);
|
|
257
|
+
}, Jt = ({
|
|
258
258
|
animationIn: t,
|
|
259
|
-
animationOut:
|
|
260
|
-
durationInFrames:
|
|
259
|
+
animationOut: f,
|
|
260
|
+
durationInFrames: l,
|
|
261
261
|
children: a,
|
|
262
262
|
style: c = {},
|
|
263
|
-
frame:
|
|
264
|
-
isTransition:
|
|
265
|
-
basicCharAnimationsIn:
|
|
263
|
+
frame: n,
|
|
264
|
+
isTransition: g = !1,
|
|
265
|
+
basicCharAnimationsIn: p = [],
|
|
266
266
|
basicCharAnimationsOut: u = []
|
|
267
267
|
}) => {
|
|
268
|
-
const
|
|
268
|
+
const s = Q(
|
|
269
269
|
(c == null ? void 0 : c.transform) || (c == null ? void 0 : c.rotate) || (c == null ? void 0 : c.rotation)
|
|
270
|
-
), r =
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
270
|
+
), r = G(
|
|
271
|
+
q(t),
|
|
272
|
+
l,
|
|
273
|
+
n,
|
|
274
274
|
!1,
|
|
275
275
|
!1,
|
|
276
|
-
|
|
277
|
-
),
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
276
|
+
s
|
|
277
|
+
), d = G(
|
|
278
|
+
q(f),
|
|
279
|
+
l,
|
|
280
|
+
n,
|
|
281
281
|
!0,
|
|
282
282
|
!1,
|
|
283
|
-
|
|
284
|
-
), $ =
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
283
|
+
s
|
|
284
|
+
), $ = G(
|
|
285
|
+
q(p),
|
|
286
|
+
l,
|
|
287
|
+
n,
|
|
288
288
|
!0,
|
|
289
289
|
!1,
|
|
290
|
-
|
|
291
|
-
), X =
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
290
|
+
s
|
|
291
|
+
), X = G(
|
|
292
|
+
q(u),
|
|
293
|
+
l,
|
|
294
|
+
n,
|
|
295
295
|
!0,
|
|
296
296
|
!1,
|
|
297
|
-
|
|
298
|
-
),
|
|
299
|
-
const
|
|
300
|
-
(
|
|
297
|
+
s
|
|
298
|
+
), B = J.useMemo(() => {
|
|
299
|
+
const w = Object.keys(r).length > 0, S = t == null ? void 0 : t.reduce(
|
|
300
|
+
(i, h) => Math.min(i, h.delay || 0),
|
|
301
301
|
1 / 0
|
|
302
|
-
), Y =
|
|
303
|
-
return
|
|
304
|
-
}, [r,
|
|
305
|
-
if (
|
|
306
|
-
return { visibility:
|
|
307
|
-
const
|
|
308
|
-
if (!
|
|
309
|
-
let
|
|
310
|
-
|
|
311
|
-
const
|
|
312
|
-
|
|
302
|
+
), Y = n - (S || 0);
|
|
303
|
+
return w && Y < 0 ? { visibility: g ? "visible" : "hidden" } : r;
|
|
304
|
+
}, [r, n, t, g]), T = J.useMemo(() => {
|
|
305
|
+
if (n > l)
|
|
306
|
+
return { visibility: g ? "visible" : "hidden" };
|
|
307
|
+
const w = q(f);
|
|
308
|
+
if (!w || w.length === 0) return {};
|
|
309
|
+
let S = 0;
|
|
310
|
+
w.forEach((i) => {
|
|
311
|
+
const h = (i.durationInFrames || 0) + (i.delay || 0);
|
|
312
|
+
h > S && (S = h);
|
|
313
313
|
});
|
|
314
|
-
const Y = Math.max(0,
|
|
315
|
-
return
|
|
316
|
-
}, [
|
|
317
|
-
const
|
|
318
|
-
...
|
|
314
|
+
const Y = Math.max(0, l - S);
|
|
315
|
+
return n < Y ? {} : d;
|
|
316
|
+
}, [d, n, f, l, g]), P = J.useMemo(() => {
|
|
317
|
+
const w = {
|
|
318
|
+
...B
|
|
319
319
|
};
|
|
320
|
-
return Object.entries(
|
|
321
|
-
|
|
322
|
-
}),
|
|
323
|
-
}, [
|
|
324
|
-
const
|
|
325
|
-
translateX:
|
|
320
|
+
return Object.entries(T).forEach(([S, Y]) => {
|
|
321
|
+
S === "transform" ? w[S] = `${w[S] || ""} ${Y || ""}`.trim() : S in w && typeof w[S] == "number" && typeof Y == "number" ? w[S] = w[S] * Y : w[S] = Y;
|
|
322
|
+
}), w;
|
|
323
|
+
}, [B, T]), E = Ht(() => {
|
|
324
|
+
const w = P.transform || "", {
|
|
325
|
+
translateX: S,
|
|
326
326
|
translateY: Y,
|
|
327
|
-
scale:
|
|
328
|
-
rotation:
|
|
329
|
-
rotateX:
|
|
330
|
-
rotateY:
|
|
331
|
-
rotateZ:
|
|
332
|
-
} =
|
|
333
|
-
return `${
|
|
334
|
-
}, [
|
|
335
|
-
top:
|
|
327
|
+
scale: i,
|
|
328
|
+
rotation: h,
|
|
329
|
+
rotateX: y,
|
|
330
|
+
rotateY: V,
|
|
331
|
+
rotateZ: Z
|
|
332
|
+
} = Lt(w);
|
|
333
|
+
return `${h} ${S} ${Y} ${i} ${y} ${V} ${Z}`.trim();
|
|
334
|
+
}, [P]), {
|
|
335
|
+
top: O,
|
|
336
336
|
left: e,
|
|
337
|
-
position:
|
|
338
|
-
transform:
|
|
339
|
-
...
|
|
337
|
+
position: x,
|
|
338
|
+
transform: F,
|
|
339
|
+
...C
|
|
340
340
|
} = c || {};
|
|
341
341
|
return /* @__PURE__ */ H(
|
|
342
342
|
"div",
|
|
@@ -344,7 +344,7 @@ const vt = () => ({
|
|
|
344
344
|
style: {
|
|
345
345
|
width: "100%",
|
|
346
346
|
height: "100%",
|
|
347
|
-
overflow:
|
|
347
|
+
overflow: P.overflow || $.overflow || X.overflow || "visible",
|
|
348
348
|
pointerEvents: "none"
|
|
349
349
|
},
|
|
350
350
|
children: /* @__PURE__ */ H(
|
|
@@ -353,63 +353,63 @@ const vt = () => ({
|
|
|
353
353
|
style: {
|
|
354
354
|
width: "100%",
|
|
355
355
|
height: "100%",
|
|
356
|
-
...
|
|
357
|
-
...
|
|
356
|
+
...C,
|
|
357
|
+
...P,
|
|
358
358
|
overflow: "visible",
|
|
359
|
-
transform:
|
|
359
|
+
transform: E,
|
|
360
360
|
pointerEvents: "none",
|
|
361
|
-
background: Object.keys(
|
|
361
|
+
background: Object.keys(P).length === 0 ? "transparent" : P.backgroundColor
|
|
362
362
|
},
|
|
363
363
|
children: a
|
|
364
364
|
}
|
|
365
365
|
)
|
|
366
366
|
}
|
|
367
367
|
);
|
|
368
|
-
},
|
|
369
|
-
let
|
|
368
|
+
}, Lt = (t) => {
|
|
369
|
+
let f = "", l = "", a = "scale(1)", c = "", n = "", g = "", p = "";
|
|
370
370
|
const u = t.match(/translateX\([^)]+\)/g);
|
|
371
|
-
u && (
|
|
372
|
-
const
|
|
373
|
-
|
|
371
|
+
u && (f = u[u.length - 1]);
|
|
372
|
+
const s = t.match(/translateY\([^)]+\)/g);
|
|
373
|
+
s && (l = s[s.length - 1]);
|
|
374
374
|
const r = t.match(/scale\([^)]+\)/g);
|
|
375
375
|
r && (a = r[r.length - 1]);
|
|
376
|
-
const
|
|
377
|
-
|
|
376
|
+
const d = t.match(/rotate\([^)]+\)/g);
|
|
377
|
+
d && (c = d[d.length - 1]);
|
|
378
378
|
const $ = t.match(/rotateX\([^)]+\)/g);
|
|
379
|
-
$ && (
|
|
379
|
+
$ && (n = $[$.length - 1]);
|
|
380
380
|
const X = t.match(/rotateY\([^)]+\)/g);
|
|
381
|
-
X && (
|
|
382
|
-
const
|
|
383
|
-
return
|
|
384
|
-
},
|
|
381
|
+
X && (g = X[X.length - 1]);
|
|
382
|
+
const B = t.match(/rotateZ\([^)]+\)/g);
|
|
383
|
+
return B && (p = B[B.length - 1]), { translateX: f, translateY: l, scale: a, rotation: c, rotateX: n, rotateY: g, rotateZ: p };
|
|
384
|
+
}, Kt = ({
|
|
385
385
|
animationTimed: t,
|
|
386
|
-
durationInFrames:
|
|
387
|
-
children:
|
|
386
|
+
durationInFrames: f,
|
|
387
|
+
children: l,
|
|
388
388
|
style: a = {},
|
|
389
389
|
frame: c
|
|
390
390
|
}) => {
|
|
391
|
-
const
|
|
391
|
+
const n = Q(
|
|
392
392
|
(a == null ? void 0 : a.transform) || (a == null ? void 0 : a.rotate) || (a == null ? void 0 : a.rotation)
|
|
393
|
-
),
|
|
394
|
-
|
|
395
|
-
|
|
393
|
+
), g = G(
|
|
394
|
+
q(t),
|
|
395
|
+
f,
|
|
396
396
|
c,
|
|
397
397
|
!1,
|
|
398
398
|
!0,
|
|
399
|
-
|
|
400
|
-
),
|
|
401
|
-
...
|
|
402
|
-
}), [
|
|
399
|
+
n
|
|
400
|
+
), p = J.useMemo(() => ({
|
|
401
|
+
...g
|
|
402
|
+
}), [g]), u = !!p.borderRadius;
|
|
403
403
|
return /* @__PURE__ */ H(
|
|
404
404
|
"div",
|
|
405
405
|
{
|
|
406
406
|
style: {
|
|
407
|
-
overflow: u ? "hidden" :
|
|
408
|
-
borderRadius:
|
|
407
|
+
overflow: u ? "hidden" : p.overflow || "visible",
|
|
408
|
+
borderRadius: p.borderRadius,
|
|
409
409
|
pointerEvents: "none",
|
|
410
410
|
height: a.height || "100%",
|
|
411
411
|
width: a.width || "100%",
|
|
412
|
-
...
|
|
412
|
+
...p,
|
|
413
413
|
...u ? { overflow: "hidden" } : {}
|
|
414
414
|
},
|
|
415
415
|
children: /* @__PURE__ */ H(
|
|
@@ -417,7 +417,7 @@ const vt = () => ({
|
|
|
417
417
|
{
|
|
418
418
|
style: {
|
|
419
419
|
overflow: u ? "hidden" : "visible",
|
|
420
|
-
borderRadius:
|
|
420
|
+
borderRadius: p.borderRadius,
|
|
421
421
|
pointerEvents: "none",
|
|
422
422
|
height: "100%",
|
|
423
423
|
width: "100%",
|
|
@@ -425,211 +425,188 @@ const vt = () => ({
|
|
|
425
425
|
alignItems: "center",
|
|
426
426
|
justifyContent: "center"
|
|
427
427
|
},
|
|
428
|
-
children:
|
|
428
|
+
children: l
|
|
429
429
|
}
|
|
430
430
|
)
|
|
431
431
|
}
|
|
432
432
|
);
|
|
433
|
-
},
|
|
433
|
+
}, Mt = (t) => {
|
|
434
434
|
if (typeof (t == null ? void 0 : t.ease) == "function")
|
|
435
435
|
return t.ease;
|
|
436
436
|
switch (t == null ? void 0 : t.easing) {
|
|
437
437
|
case "ease-in":
|
|
438
438
|
case "accelerate":
|
|
439
|
-
return
|
|
439
|
+
return R.in(R.cubic);
|
|
440
440
|
case "ease-out":
|
|
441
441
|
case "smooth":
|
|
442
442
|
case "slowDown":
|
|
443
|
-
return
|
|
443
|
+
return R.out(R.cubic);
|
|
444
444
|
case "ease-in-out":
|
|
445
445
|
case "natural":
|
|
446
446
|
case "swing":
|
|
447
|
-
return
|
|
447
|
+
return R.inOut(R.cubic);
|
|
448
448
|
case "bounce":
|
|
449
|
-
return
|
|
449
|
+
return R.bounce;
|
|
450
450
|
case "elastic":
|
|
451
|
-
return
|
|
451
|
+
return R.elastic(1);
|
|
452
452
|
case "overshoot":
|
|
453
453
|
case "impulse":
|
|
454
|
-
return
|
|
454
|
+
return R.out(R.back(1.7));
|
|
455
455
|
case "none":
|
|
456
456
|
case "linear":
|
|
457
457
|
default:
|
|
458
|
-
return
|
|
458
|
+
return R.linear;
|
|
459
459
|
}
|
|
460
|
-
},
|
|
461
|
-
const
|
|
460
|
+
}, Ut = (t, f) => {
|
|
461
|
+
const l = f * Math.PI / 180, a = Math.cos(l), c = Math.sin(l), n = t / 100 * 50, g = 50, p = 50, u = 200, s = a, r = c, d = -c, $ = a;
|
|
462
462
|
return `polygon(${[
|
|
463
463
|
[
|
|
464
|
-
|
|
465
|
-
|
|
464
|
+
g - s * u - d * n,
|
|
465
|
+
p - r * u - $ * n
|
|
466
466
|
],
|
|
467
467
|
[
|
|
468
|
-
|
|
469
|
-
|
|
468
|
+
g + s * u - d * n,
|
|
469
|
+
p + r * u - $ * n
|
|
470
470
|
],
|
|
471
471
|
[
|
|
472
|
-
|
|
473
|
-
|
|
472
|
+
g + s * u + d * n,
|
|
473
|
+
p + r * u + $ * n
|
|
474
474
|
],
|
|
475
475
|
[
|
|
476
|
-
|
|
477
|
-
|
|
476
|
+
g - s * u + d * n,
|
|
477
|
+
p - r * u + $ * n
|
|
478
478
|
]
|
|
479
|
-
].map(([
|
|
480
|
-
},
|
|
479
|
+
].map(([B, T]) => `${B}% ${T}%`).join(", ")})`;
|
|
480
|
+
}, Zt = ({
|
|
481
481
|
children: t,
|
|
482
|
-
currentWidth:
|
|
483
|
-
currentHeight:
|
|
482
|
+
currentWidth: f,
|
|
483
|
+
currentHeight: l,
|
|
484
484
|
frame: a,
|
|
485
485
|
item: c,
|
|
486
|
-
keyframeAnimations:
|
|
487
|
-
durationInFrames:
|
|
486
|
+
keyframeAnimations: n,
|
|
487
|
+
durationInFrames: g
|
|
488
488
|
}) => {
|
|
489
|
-
var
|
|
490
|
-
if (!
|
|
491
|
-
return /* @__PURE__ */ H(
|
|
492
|
-
const
|
|
493
|
-
var
|
|
494
|
-
return !!((
|
|
495
|
-
}, u = (
|
|
496
|
-
var
|
|
497
|
-
return !!((
|
|
498
|
-
},
|
|
499
|
-
(
|
|
500
|
-
), r =
|
|
501
|
-
(
|
|
489
|
+
var rt, ot, st, nt, lt, at, it, ct, dt, ft, ut, pt, ht, gt, bt, $t, xt, wt, St, yt, Nt, mt, Yt, vt, Xt;
|
|
490
|
+
if (!n || !Array.isArray(n) || n.length === 0)
|
|
491
|
+
return /* @__PURE__ */ H(It, { children: t });
|
|
492
|
+
const p = (o) => {
|
|
493
|
+
var b, v, M, z, U, N;
|
|
494
|
+
return !!((b = o == null ? void 0 : o.property) != null && b.includes("maskReveal") || (v = o == null ? void 0 : o.id) != null && v.includes("maskReveal") || (M = o == null ? void 0 : o.property) != null && M.includes("maskUp") || (z = o == null ? void 0 : o.id) != null && z.includes("maskUp") || (U = o == null ? void 0 : o.property) != null && U.includes("maskDown") || (N = o == null ? void 0 : o.id) != null && N.includes("maskDown"));
|
|
495
|
+
}, u = (o) => {
|
|
496
|
+
var b, v;
|
|
497
|
+
return !!((o == null ? void 0 : o.type) === "exit" || (b = o == null ? void 0 : o.property) != null && b.includes("Out") || (v = o == null ? void 0 : o.id) != null && v.includes("Out"));
|
|
498
|
+
}, s = n.find(
|
|
499
|
+
(o) => p(o) && !u(o)
|
|
500
|
+
), r = n.find(
|
|
501
|
+
(o) => p(o) && u(o)
|
|
502
502
|
);
|
|
503
|
-
if (!
|
|
504
|
-
return /* @__PURE__ */ H(
|
|
505
|
-
const
|
|
506
|
-
let
|
|
507
|
-
if (r && a >=
|
|
508
|
-
e = r,
|
|
509
|
-
const
|
|
510
|
-
|
|
511
|
-
|
|
503
|
+
if (!s && !r)
|
|
504
|
+
return /* @__PURE__ */ H(It, { children: t });
|
|
505
|
+
const d = Math.max(1, g || 300), $ = s ? Math.max(1, Number(s.durationInFrames || 30)) : 30, X = s ? Math.max(0, Number(s.delay || 0)) : 0, B = r ? Math.max(1, Number(r.durationInFrames || 30)) : 30, T = r ? Math.max(0, Number(r.delay || 0)) : 0, P = r ? Math.max(0, d - B - T) : Number.POSITIVE_INFINITY;
|
|
506
|
+
let E = !1, O = !1, e = null, x = !1, F = 30, C = 0;
|
|
507
|
+
if (r && (a >= P || !s)) {
|
|
508
|
+
e = r, x = !0, F = B;
|
|
509
|
+
const o = s || P < d ? P : 0;
|
|
510
|
+
C = a - o;
|
|
511
|
+
const b = String(r.property || r.id || ""), v = b.includes("Blur") || b.includes("Soft") || !!((rt = r == null ? void 0 : r.details) != null && rt.blurBottom) || !!((ot = r == null ? void 0 : r.details) != null && ot.softEdge);
|
|
512
|
+
C >= F - 1 && !v && (E = !0);
|
|
513
|
+
} else if (s)
|
|
512
514
|
if (a < X)
|
|
513
|
-
|
|
515
|
+
E = !0, e = s, x = !1, F = $, C = 0;
|
|
514
516
|
else if (a < X + $)
|
|
515
|
-
e =
|
|
517
|
+
e = s, x = !1, F = $, C = a - X;
|
|
516
518
|
else {
|
|
517
|
-
const
|
|
518
|
-
|
|
519
|
+
const o = String(s.property || s.id || "");
|
|
520
|
+
o.includes("Blur") || o.includes("Soft") || !!((st = s == null ? void 0 : s.details) != null && st.blurBottom) || !!((nt = s == null ? void 0 : s.details) != null && nt.softEdge) ? (e = s, x = !1, F = $, C = $) : (O = !0, e = null);
|
|
519
521
|
}
|
|
520
522
|
else
|
|
521
|
-
|
|
522
|
-
const
|
|
523
|
+
O = !0, e = null;
|
|
524
|
+
const w = Math.max(0, C), S = F > 0 ? Math.min(Math.max(0, w / F), 1) : 1, Y = e ? Mt(e) : R.linear, i = Math.max(
|
|
523
525
|
0,
|
|
524
|
-
Math.min(1, Y(
|
|
526
|
+
Math.min(1, Y(S))
|
|
525
527
|
);
|
|
526
|
-
let
|
|
527
|
-
const
|
|
528
|
+
let h, y = "", V = 1;
|
|
529
|
+
const Z = String(
|
|
528
530
|
(e == null ? void 0 : e.property) || (e == null ? void 0 : e.id) || ""
|
|
529
|
-
),
|
|
530
|
-
if (
|
|
531
|
-
|
|
532
|
-
else if (
|
|
533
|
-
|
|
531
|
+
), m = ((lt = e == null ? void 0 : e.details) == null ? void 0 : lt.direction) || "up";
|
|
532
|
+
if (E)
|
|
533
|
+
h = "inset(100%)";
|
|
534
|
+
else if (O || !e)
|
|
535
|
+
h = void 0;
|
|
534
536
|
else {
|
|
535
|
-
const
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
537
|
+
const o = String(
|
|
538
|
+
e.property || e.id || ""
|
|
539
|
+
), b = ((at = e.details) == null ? void 0 : at.direction) || (o.includes("maskDown") ? "down" : (o.includes("maskUp"), "up")), v = o.includes("ShrinkScale"), M = o.includes("CenterScale"), z = o.includes("Slide") || o.includes("slide");
|
|
540
|
+
if (M) {
|
|
541
|
+
const N = Number(
|
|
542
|
+
((it = e == null ? void 0 : e.details) == null ? void 0 : it.angle) ?? (e == null ? void 0 : e.angle) ?? 0
|
|
543
|
+
), D = x ? 100 * (1 - i) : 100 * i;
|
|
544
|
+
h = Ut(
|
|
545
|
+
D,
|
|
546
|
+
N
|
|
543
547
|
);
|
|
544
|
-
} else if (
|
|
545
|
-
const
|
|
546
|
-
((
|
|
547
|
-
),
|
|
548
|
+
} else if (v) {
|
|
549
|
+
const N = Number(
|
|
550
|
+
((ct = e == null ? void 0 : e.details) == null ? void 0 : ct.initialVisiblePercent) ?? (e == null ? void 0 : e.initialVisiblePercent) ?? 50
|
|
551
|
+
), D = Math.max(
|
|
548
552
|
0,
|
|
549
|
-
Math.min(50, (100 -
|
|
550
|
-
),
|
|
551
|
-
|
|
552
|
-
${
|
|
553
|
-
${
|
|
554
|
-
${
|
|
555
|
-
${
|
|
553
|
+
Math.min(50, (100 - N) / 2)
|
|
554
|
+
), j = x ? D * i : D * (1 - i);
|
|
555
|
+
h = `inset(
|
|
556
|
+
${j}%
|
|
557
|
+
${j}%
|
|
558
|
+
${j}%
|
|
559
|
+
${j}%
|
|
556
560
|
)`;
|
|
557
|
-
} else if (
|
|
558
|
-
|
|
559
|
-
else if (
|
|
560
|
-
|
|
561
|
-
else if (
|
|
562
|
-
const
|
|
563
|
-
|
|
561
|
+
} else if (z)
|
|
562
|
+
h = "inset(0% 0% 0% 0%)", x ? b === "down" ? y = `translateY(${100 * i}%)` : b === "left" ? y = `translateX(${-100 * i}%)` : b === "right" ? y = `translateX(${100 * i}%)` : y = `translateY(${-100 * i}%)` : b === "down" ? y = `translateY(${-100 * (1 - i)}%)` : b === "left" ? y = `translateX(${100 * (1 - i)}%)` : b === "right" ? y = `translateX(${-100 * (1 - i)}%)` : y = `translateY(${100 * (1 - i)}%)`;
|
|
563
|
+
else if (o.includes("Center"))
|
|
564
|
+
h = `circle(${x ? 150 * (1 - i) : 150 * i}% at 50% 50%)`;
|
|
565
|
+
else if (o.includes("Corner")) {
|
|
566
|
+
const N = x ? i : 1 - i;
|
|
567
|
+
b === "down" ? h = `inset(0 ${100 * N}% ${100 * N}% 0)` : b === "up" ? h = `inset(${100 * N}% ${100 * N}% 0 0)` : b === "left" ? h = `inset(0 0 ${100 * N}% ${100 * N}%)` : b === "right" ? h = `inset(${100 * N}% 0 0 ${100 * N}%)` : h = `inset(0 ${100 * N}% ${100 * N}% 0)`;
|
|
564
568
|
} else
|
|
565
|
-
|
|
566
|
-
const
|
|
567
|
-
|
|
569
|
+
x ? b === "down" ? h = `inset(${100 * i}% 0 0 0)` : b === "left" ? h = `inset(0 0 0 ${100 * i}%)` : b === "right" ? h = `inset(0 ${100 * i}% 0 0)` : h = `inset(0 0 ${100 * i}% 0)` : b === "down" ? h = `inset(0 0 ${100 * (1 - i)}% 0)` : b === "left" ? h = `inset(0 0 0 ${100 * (1 - i)}%)` : b === "right" ? h = `inset(0 ${100 * (1 - i)}% 0 0)` : h = `inset(${100 * (1 - i)}% 0 0 0)`;
|
|
570
|
+
const U = !!((dt = e == null ? void 0 : e.details) != null && dt.scale || e != null && e.scale);
|
|
571
|
+
M || v ? ((ft = e == null ? void 0 : e.details) == null ? void 0 : ft.scale) === !1 ? V = 1 : V = x ? 1 + 0.5 * i : 1.5 - 0.5 * i : U && (V = x ? 1 - 0.2 * i : 0.8 + 0.2 * i);
|
|
568
572
|
}
|
|
569
|
-
const
|
|
570
|
-
let
|
|
571
|
-
if (
|
|
572
|
-
|
|
573
|
-
const
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
0,
|
|
581
|
-
S - p
|
|
582
|
-
)}%, transparent ${S}%, transparent 100%)`) : i === "left" ? (m = `translateX(${N * l}%)`, V = `linear-gradient(to right, black 0%, black ${Math.max(
|
|
583
|
-
0,
|
|
584
|
-
S - p
|
|
585
|
-
)}%, transparent ${S}%, transparent 100%)`) : i === "right" && (m = `translateX(${-N * l}%)`, V = `linear-gradient(to left, black 0%, black ${Math.max(
|
|
586
|
-
0,
|
|
587
|
-
S - p
|
|
588
|
-
)}%, transparent ${S}%, transparent 100%)`);
|
|
589
|
-
} else {
|
|
590
|
-
const S = B * l;
|
|
591
|
-
i === "up" ? (m = `translateY(${N * (1 - l)}%)`, V = `linear-gradient(to bottom, black 0%, black ${Math.max(
|
|
592
|
-
0,
|
|
593
|
-
S - p
|
|
594
|
-
)}%, transparent ${S}%, transparent 100%)`) : i === "down" ? (m = `translateY(${-N * (1 - l)}%)`, V = `linear-gradient(to top, black 0%, black ${Math.max(
|
|
595
|
-
0,
|
|
596
|
-
S - p
|
|
597
|
-
)}%, transparent ${S}%, transparent 100%)`) : i === "left" ? (m = `translateX(${N * (1 - l)}%)`, V = `linear-gradient(to right, black 0%, black ${Math.max(
|
|
598
|
-
0,
|
|
599
|
-
S - p
|
|
600
|
-
)}%, transparent ${S}%, transparent 100%)`) : i === "right" && (m = `translateX(${-N * (1 - l)}%)`, V = `linear-gradient(to left, black 0%, black ${Math.max(
|
|
601
|
-
0,
|
|
602
|
-
S - p
|
|
603
|
-
)}%, transparent ${S}%, transparent 100%)`);
|
|
604
|
-
}
|
|
573
|
+
const _ = Z.includes("Blur") || Z.includes("Soft") || !!((ut = e == null ? void 0 : e.details) != null && ut.blurBottom) || !!((pt = e == null ? void 0 : e.details) != null && pt.softEdge);
|
|
574
|
+
let L;
|
|
575
|
+
if (_ && !E && e) {
|
|
576
|
+
h = void 0;
|
|
577
|
+
const o = 30, b = ((ht = e == null ? void 0 : e.details) == null ? void 0 : ht.blurPosition) || "bottom";
|
|
578
|
+
x ? m === "up" ? y = `translateY(${o * i}%)` : m === "down" ? y = `translateY(${-o * i}%)` : m === "left" ? y = `translateX(${o * i}%)` : m === "right" && (y = `translateX(${-o * i}%)`) : m === "up" ? y = `translateY(${o * (1 - i)}%)` : m === "down" ? y = `translateY(${-o * (1 - i)}%)` : m === "left" ? y = `translateX(${o * (1 - i)}%)` : m === "right" && (y = `translateX(${-o * (1 - i)}%)`);
|
|
579
|
+
const v = typeof ((gt = e == null ? void 0 : e.details) == null ? void 0 : gt.blurHeight) == "number" ? e.details.blurHeight : parseInt(String(((bt = e == null ? void 0 : e.details) == null ? void 0 : bt.blurHeight) || "35"), 10) || 35, M = x ? 100 : 0, z = x ? 0 : 100, U = Number((($t = e == null ? void 0 : e.details) == null ? void 0 : $t.initialOpacity) ?? M) / 100, N = Number(((xt = e == null ? void 0 : e.details) == null ? void 0 : xt.finalOpacity) ?? z) / 100, D = Math.max(
|
|
580
|
+
0,
|
|
581
|
+
Math.min(1, U + (N - U) * i)
|
|
582
|
+
), j = Math.max(0, 1 - D);
|
|
583
|
+
b === "bottom" ? L = `linear-gradient(to bottom, black 0%, black ${100 - v}%, rgba(0,0,0,${j}) 100%)` : b === "top" ? L = `linear-gradient(to top, black 0%, black ${100 - v}%, rgba(0,0,0,${j}) 100%)` : b === "right" ? L = `linear-gradient(to right, black 0%, black ${100 - v}%, rgba(0,0,0,${j}) 100%)` : b === "left" && (L = `linear-gradient(to left, black 0%, black ${100 - v}%, rgba(0,0,0,${j}) 100%)`);
|
|
605
584
|
}
|
|
606
|
-
const
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
].filter(Boolean).join(" ") || void 0,
|
|
585
|
+
const Rt = [
|
|
586
|
+
y,
|
|
587
|
+
V !== 1 ? `scale(${V})` : ""
|
|
588
|
+
].filter(Boolean).join(" ") || void 0, W = (wt = c == null ? void 0 : c.details) == null ? void 0 : wt.boxShadow, k = W && (W.x || W.y || W.blur) ? `drop-shadow(${W.x || 0}px ${W.y || 0}px ${W.blur || 0}px ${W.color || "#000000"})` : void 0, A = Number(((St = e == null ? void 0 : e.details) == null ? void 0 : St.blurAmount) ?? 16), Et = !!(_ && (((yt = e == null ? void 0 : e.details) == null ? void 0 : yt.blurBottom) ?? !0)), I = ((Nt = e == null ? void 0 : e.details) == null ? void 0 : Nt.blurPosition) || "bottom", tt = typeof ((mt = e == null ? void 0 : e.details) == null ? void 0 : mt.blurHeight) == "number" ? `${e.details.blurHeight}%` : ((Yt = e == null ? void 0 : e.details) == null ? void 0 : Yt.blurHeight) || "35%", Ft = x ? 100 : 0, Ct = x ? 0 : 100, et = Number(((vt = e == null ? void 0 : e.details) == null ? void 0 : vt.initialOpacity) ?? Ft) / 100, Ot = Number(((Xt = e == null ? void 0 : e.details) == null ? void 0 : Xt.finalOpacity) ?? Ct) / 100, Vt = _ && e ? Math.max(0, Math.min(1, et + (Ot - et) * i)) : 1;
|
|
610
589
|
return /* @__PURE__ */ H(
|
|
611
590
|
"div",
|
|
612
591
|
{
|
|
613
592
|
style: {
|
|
614
|
-
width:
|
|
615
|
-
height:
|
|
593
|
+
width: f !== void 0 ? f : "100%",
|
|
594
|
+
height: l !== void 0 ? l : "100%",
|
|
616
595
|
position: "relative",
|
|
617
|
-
visibility:
|
|
618
|
-
filter: Q,
|
|
619
|
-
WebkitFilter: Q
|
|
596
|
+
visibility: E ? "hidden" : "visible"
|
|
620
597
|
},
|
|
621
|
-
children: /* @__PURE__ */
|
|
598
|
+
children: /* @__PURE__ */ jt(
|
|
622
599
|
"div",
|
|
623
600
|
{
|
|
624
601
|
style: {
|
|
625
602
|
width: "100%",
|
|
626
603
|
height: "100%",
|
|
627
604
|
position: "relative",
|
|
628
|
-
clipPath:
|
|
629
|
-
WebkitClipPath:
|
|
630
|
-
maskImage:
|
|
631
|
-
WebkitMaskImage:
|
|
632
|
-
overflow:
|
|
605
|
+
clipPath: h || void 0,
|
|
606
|
+
WebkitClipPath: h || void 0,
|
|
607
|
+
maskImage: L || void 0,
|
|
608
|
+
WebkitMaskImage: L || void 0,
|
|
609
|
+
overflow: h || L ? "hidden" : "visible"
|
|
633
610
|
},
|
|
634
611
|
children: [
|
|
635
612
|
/* @__PURE__ */ H(
|
|
@@ -638,28 +615,31 @@ const vt = () => ({
|
|
|
638
615
|
style: {
|
|
639
616
|
width: "100%",
|
|
640
617
|
height: "100%",
|
|
641
|
-
transform:
|
|
642
|
-
transformOrigin: "center"
|
|
618
|
+
transform: Rt,
|
|
619
|
+
transformOrigin: "center",
|
|
620
|
+
filter: k,
|
|
621
|
+
WebkitFilter: k
|
|
643
622
|
},
|
|
644
623
|
children: t
|
|
645
624
|
}
|
|
646
625
|
),
|
|
647
|
-
|
|
626
|
+
Et && !E && /* @__PURE__ */ H(
|
|
648
627
|
"div",
|
|
649
628
|
{
|
|
650
629
|
style: {
|
|
651
630
|
position: "absolute",
|
|
652
|
-
top:
|
|
653
|
-
bottom:
|
|
631
|
+
top: I === "top" ? 0 : void 0,
|
|
632
|
+
bottom: I === "bottom" ? 0 : void 0,
|
|
654
633
|
left: 0,
|
|
655
634
|
right: 0,
|
|
656
|
-
width:
|
|
657
|
-
height:
|
|
635
|
+
width: I === "left" || I === "right" ? tt : "100%",
|
|
636
|
+
height: I === "top" || I === "bottom" ? tt : "100%",
|
|
658
637
|
pointerEvents: "none",
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
638
|
+
opacity: Vt,
|
|
639
|
+
backdropFilter: `blur(${A}px)`,
|
|
640
|
+
WebkitBackdropFilter: `blur(${A}px)`,
|
|
641
|
+
maskImage: I === "top" ? "linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, transparent 100%)" : I === "left" ? "linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, transparent 100%)" : I === "right" ? "linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, transparent 100%)" : "linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, transparent 100%)",
|
|
642
|
+
WebkitMaskImage: I === "top" ? "linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, transparent 100%)" : I === "left" ? "linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, transparent 100%)" : I === "right" ? "linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, transparent 100%)" : "linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, transparent 100%)"
|
|
663
643
|
}
|
|
664
644
|
}
|
|
665
645
|
)
|
|
@@ -668,13 +648,13 @@ const vt = () => ({
|
|
|
668
648
|
)
|
|
669
649
|
}
|
|
670
650
|
);
|
|
671
|
-
},
|
|
651
|
+
}, Qt = Zt;
|
|
672
652
|
export {
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
653
|
+
Jt as BoxAnim,
|
|
654
|
+
Kt as ContentAnim,
|
|
655
|
+
Qt as MaskAnim,
|
|
656
|
+
Gt as combine,
|
|
657
|
+
q as combineAnimations,
|
|
658
|
+
Lt as extractTransformations,
|
|
659
|
+
G as useAnimation
|
|
680
660
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
(function(E,N){typeof exports=="object"&&typeof module<"u"?N(exports,require("react/jsx-runtime"),require("react"),require("remotion")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","remotion"],N):(E=typeof globalThis<"u"?globalThis:E||self,N(E.animations={},E.jsxRuntime,E.React,E.remotion))})(this,function(E,N,q,Y){"use strict";const xt=()=>({scale:t=>({transform:`scale(${t})`}),growIn:t=>({transform:`scale(${t})`}),shrinkIn:t=>({transform:`scale(${t})`}),shrinkOut:t=>({transform:`scale(${t})`}),opacity:t=>({opacity:t}),translateX:t=>({transform:`translateX(${t}%)`}),translateY:t=>({transform:`translateY(${t}%)`}),rotate:t=>({transform:`rotate(${t}deg)`}),spin:t=>({transform:`rotate(${t}deg)`}),spinIn:t=>({transform:`rotate(${t}deg)`}),twistIn:t=>({transform:`rotate(${t}deg)`}),twistOut:t=>({transform:`rotate(${t}deg)`}),moveScaleIn:t=>({transform:`scale(${t})`}),spinOut:t=>({transform:`rotate(${t}deg)`}),default:()=>({}),rotateY:t=>({transform:`rotateY(${t}deg)`}),rotateX:t=>({transform:`rotateX(${t}deg)`}),blur:t=>({filter:`blur(${t}px)`}),blurIn:t=>({filter:`blur(${t}px)`}),blurOut:t=>({filter:`blur(${t}px)`}),blurV2In:t=>({filter:`blur(${t}px)`}),blurSlide:t=>({filter:`blur(${t}px)`,transform:`translateY(${t*5}%)`}),blurSlideV2In:t=>({filter:`blur(${t}px)`}),brightness:t=>({filter:`brightness(${t}%)`}),contrast:t=>({filter:`contrast(${t}%)`}),grayscale:t=>({filter:`grayscale(${t}%)`}),hue:t=>({filter:`hue-rotate(${t}deg)`}),saturation:t=>({filter:`saturate(${t}%)`}),vignette:t=>({filter:`contrast(${100+t*20}%) brightness(${100-t*20}%)`}),noise:t=>({filter:`contrast(${100+t*40}%) brightness(${100+t*20}%)`}),pixelate:t=>({filter:`contrast(${100+t*2}%)`}),chromaticAberration:t=>({filter:`hue-rotate(${t*10}deg) contrast(110%)`}),lightLeak:t=>({filter:`brightness(${100+t*50}%) saturate(${100+t*30}%)`}),duotone:t=>({filter:`sepia(${t*100}%) hue-rotate(${t*180}deg)`}),shakeHorizontalIn:t=>({transform:`translateX(${t}px)`}),shakeVerticalIn:t=>({transform:`translateY(${t}px)`}),shakeHorizontalOut:t=>({transform:`translateX(${t}px)`}),shakeVerticalOut:t=>({transform:`translateY(${t}px)`}),maskUpIn:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),maskUpOut:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),maskDownIn:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),maskDownOut:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),moveTranslateY:t=>({transform:`translateY(${t}%)`}),"hide-show":t=>({opacity:t}),hide:t=>({opacity:t}),show:t=>({opacity:t}),borderRadius:t=>({borderRadius:`${t}px`,overflow:"hidden"}),"corner-radius":t=>({borderRadius:`${t}px`,overflow:"hidden"})}),K=(t,d=0)=>{const s=[],a=t/5;for(let c=0;c<6;c+=1)s.push(c*a+d);return s},wt=(t,d,s,a=!1)=>{const{from:c,to:o,ease:b}=d,h=d.durationInFrames||30,u=Number(c),n=Number(o),r=Math.max(1,Number(h));if(isNaN(u)||isNaN(n))return console.error("Invalid animation values:",{from:c,to:o,animationDurationInFrames:h,property:d.property}),u;h===void 0&&console.warn(`durationInFrames is undefined for animation: ${d.property}. Using 1 frame as default.`);const f=d.delay||0;if(d.property==="hide-show"||d.property==="hide"||d.property==="show")return t<f?u:n;let $;if(d.property==="moveScaleIn"?$=a?[s-r-f,s-r*.5-f]:[f+r*.5,f+r]:d.property==="moveTranslateY"?$=a?[s-r*.5-f,s-f]:[f,f+r*.5]:$=a?[s-r-f,s-f]:[f,f+r],d.property.includes("shake")){const I=a?K(r,s-r-f):K(r,f);return Y.interpolate(t,I,[0,u,n,u,n,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:b})}return Y.interpolate(t,$,[u,n],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:b})},U=t=>{if(t==null)return 0;if(typeof t=="number")return Number.isNaN(t)?0:t;if(typeof t=="object"){if(t.rotate!==void 0&&t.rotate!==null){const c=parseFloat(String(t.rotate));if(!Number.isNaN(c))return c}if(t.rotation!==void 0&&t.rotation!==null){const c=parseFloat(String(t.rotation));if(!Number.isNaN(c))return c}return t.transform?U(t.transform):0}const d=String(t),s=/rotate\((-?[\d.]+)deg\)/.exec(d);if(s)return parseFloat(s[1])||0;const a=/matrix\(([^)]+)\)/.exec(d);if(a){const c=a[1].split(",").map(o=>parseFloat(o.trim()));if(c.length>=4){const[o,b]=c;return Math.atan2(b,o)*(180/Math.PI)}}return 0},Q=(t,d,s,a,c)=>{var u,n,r,f,$;const{property:o}=t;if(o==="move"){const I=Number(((u=t.details)==null?void 0:u.fromX)??t.from??0),P=Number(((n=t.details)==null?void 0:n.toX)??t.to??0),L=Number(((r=t.details)==null?void 0:r.fromY)??0),C=Number(((f=t.details)==null?void 0:f.toY)??0),F=Number((($=t.details)==null?void 0:$.scale)||1)||1;let W=c;if(W==null||Number.isNaN(W)){const i=t.details;W=U((i==null?void 0:i.rotate)??(i==null?void 0:i.rotation)??(i==null?void 0:i.transform))}const e=t.delay||0,m=t.durationInFrames||30,T=a?[s-m-e,s-e]:[e,e+m],V=Y.interpolate(d,T,[I,P],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:t.ease}),x=Y.interpolate(d,T,[L,C],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:t.ease}),w=(W||0)*Math.PI/180,X=Math.cos(w),l=Math.sin(w),g=V*X+x*l,S=-V*l+x*X,H=g/F,j=S/F;return{transform:`translateX(${H}px) translateY(${j}px)`}}const b=wt(d,t,s,a),h=xt();return(h[o]||h.default)(b)},O=(t,d,s,a=!1,c=!1,o)=>q.useMemo(()=>{if(t.length===0)return{};const b=t.filter(h=>h.from!==void 0&&h.to!==void 0);if(b.length!==t.length&&console.error("Some animations are invalid and will be ignored"),c){const h=[];return b.reverse().forEach(n=>{const r=Q(n,s,d,!1,o);h.push(r)}),h.reduce((n,r)=>(Object.keys(r).forEach(f=>{f==="transform"||f==="filter"?n[f]=n[f]?`${n[f]} ${r[f]}`:r[f]:n[f]=r[f]}),n),{})}else return b.map(u=>Q(u,s,d,a,o)).reduce((u,n)=>(Object.keys(n).forEach(r=>{r==="transform"||r==="filter"?u[r]=u[r]?`${u[r]} ${n[r]}`:n[r]:u[r]=n[r]}),u),{})},[t,s,d,a,o]),Z=t=>t?Array.isArray(t)?t:[t]:[],St=(...t)=>{const d=[];return t.forEach(s=>{Array.isArray(s)?d.push(...s):s&&d.push(s)}),d.filter(s=>s!==void 0).reduce((s,a)=>s.find(o=>o.property===a.property)?s.map(o=>o.property===a.property?{...o,from:Math.min(o.from,a.from),to:Math.max(o.to,a.to),durationInFrames:Math.max(o.durationInFrames,a.durationInFrames),delay:Math.min(o.delay||0,a.delay||0),ease:b=>(o.ease(b)+a.ease(b))/2}:o):[...s,a],[])},vt=({animationIn:t,animationOut:d,durationInFrames:s,children:a,style:c={},frame:o,isTransition:b=!1,basicCharAnimationsIn:h=[],basicCharAnimationsOut:u=[]})=>{const n=U((c==null?void 0:c.transform)||(c==null?void 0:c.rotate)||(c==null?void 0:c.rotation)),r=O(Z(t),s,o,!1,!1,n),f=O(Z(d),s,o,!0,!1,n),$=O(Z(h),s,o,!0,!1,n),I=O(Z(u),s,o,!0,!1,n),P=q.useMemo(()=>{const x=Object.keys(r).length>0,w=t==null?void 0:t.reduce((l,g)=>Math.min(l,g.delay||0),1/0),X=o-(w||0);return x&&X<0?{visibility:b?"visible":"hidden"}:r},[r,o,t,b]),L=q.useMemo(()=>{if(o>s)return{visibility:b?"visible":"hidden"};const x=Z(d);if(!x||x.length===0)return{};let w=0;x.forEach(l=>{const g=(l.durationInFrames||0)+(l.delay||0);g>w&&(w=g)});const X=Math.max(0,s-w);return o<X?{}:f},[f,o,d,s,b]),C=q.useMemo(()=>{const x={...P};return Object.entries(L).forEach(([w,X])=>{w==="transform"?x[w]=`${x[w]||""} ${X||""}`.trim():w in x&&typeof x[w]=="number"&&typeof X=="number"?x[w]=x[w]*X:x[w]=X}),x},[P,L]),F=q.useMemo(()=>{const x=C.transform||"",{translateX:w,translateY:X,scale:l,rotation:g,rotateX:S,rotateY:H,rotateZ:j}=D(x);return`${g} ${w} ${X} ${l} ${S} ${H} ${j}`.trim()},[C]),{top:W,left:e,position:m,transform:T,...V}=c||{};return N.jsx("div",{style:{width:"100%",height:"100%",overflow:C.overflow||$.overflow||I.overflow||"visible",pointerEvents:"none"},children:N.jsx("div",{style:{width:"100%",height:"100%",...V,...C,overflow:"visible",transform:F,pointerEvents:"none",background:Object.keys(C).length===0?"transparent":C.backgroundColor},children:a})})},D=t=>{let d="",s="",a="scale(1)",c="",o="",b="",h="";const u=t.match(/translateX\([^)]+\)/g);u&&(d=u[u.length-1]);const n=t.match(/translateY\([^)]+\)/g);n&&(s=n[n.length-1]);const r=t.match(/scale\([^)]+\)/g);r&&(a=r[r.length-1]);const f=t.match(/rotate\([^)]+\)/g);f&&(c=f[f.length-1]);const $=t.match(/rotateX\([^)]+\)/g);$&&(o=$[$.length-1]);const I=t.match(/rotateY\([^)]+\)/g);I&&(b=I[I.length-1]);const P=t.match(/rotateZ\([^)]+\)/g);return P&&(h=P[P.length-1]),{translateX:d,translateY:s,scale:a,rotation:c,rotateX:o,rotateY:b,rotateZ:h}},mt=({animationTimed:t,durationInFrames:d,children:s,style:a={},frame:c})=>{const o=U((a==null?void 0:a.transform)||(a==null?void 0:a.rotate)||(a==null?void 0:a.rotation)),b=O(Z(t),d,c,!1,!0,o),h=q.useMemo(()=>({...b}),[b]),u=!!h.borderRadius;return N.jsx("div",{style:{overflow:u?"hidden":h.overflow||"visible",borderRadius:h.borderRadius,pointerEvents:"none",height:a.height||"100%",width:a.width||"100%",...h,...u?{overflow:"hidden"}:{}},children:N.jsx("div",{style:{overflow:u?"hidden":"visible",borderRadius:h.borderRadius,pointerEvents:"none",height:"100%",width:"100%",display:"flex",alignItems:"center",justifyContent:"center"},children:s})})},Nt=t=>{if(typeof(t==null?void 0:t.ease)=="function")return t.ease;switch(t==null?void 0:t.easing){case"ease-in":case"accelerate":return Y.Easing.in(Y.Easing.cubic);case"ease-out":case"smooth":case"slowDown":return Y.Easing.out(Y.Easing.cubic);case"ease-in-out":case"natural":case"swing":return Y.Easing.inOut(Y.Easing.cubic);case"bounce":return Y.Easing.bounce;case"elastic":return Y.Easing.elastic(1);case"overshoot":case"impulse":return Y.Easing.out(Y.Easing.back(1.7));case"none":case"linear":default:return Y.Easing.linear}},Yt=(t,d)=>{const s=d*Math.PI/180,a=Math.cos(s),c=Math.sin(s),o=t/100*50,b=50,h=50,u=200,n=a,r=c,f=-c,$=a;return`polygon(${[[b-n*u-f*o,h-r*u-$*o],[b+n*u-f*o,h+r*u-$*o],[b+n*u+f*o,h+r*u+$*o],[b-n*u+f*o,h-r*u+$*o]].map(([P,L])=>`${P}% ${L}%`).join(", ")})`},yt=({children:t,currentWidth:d,currentHeight:s,frame:a,item:c,keyframeAnimations:o,durationInFrames:b})=>{var tt,et,rt,ot,nt,st,at,lt,it,ct,dt,ft,ut,pt,ht,gt,bt,$t;if(!o||!Array.isArray(o)||o.length===0)return N.jsx(N.Fragment,{children:t});const h=p=>{var M,y;return!!((M=p==null?void 0:p.property)!=null&&M.includes("maskReveal")||(y=p==null?void 0:p.id)!=null&&y.includes("maskReveal"))},u=p=>{var M,y;return!!((p==null?void 0:p.type)==="exit"||(M=p==null?void 0:p.property)!=null&&M.includes("Out")||(y=p==null?void 0:p.id)!=null&&y.includes("Out"))},n=o.find(p=>h(p)&&!u(p)),r=o.find(p=>h(p)&&u(p));if(!n&&!r)return N.jsx(N.Fragment,{children:t});const f=Math.max(1,b||300),$=n?Math.max(1,Number(n.durationInFrames||30)):30,I=n?Math.max(0,Number(n.delay||0)):0,P=r?Math.max(1,Number(r.durationInFrames||30)):30,L=r?Math.max(0,Number(r.delay||0)):0,C=r?Math.max(0,f-P-L):Number.POSITIVE_INFINITY;let F=!1,W=!1,e=null,m=!1,T=30,V=0;if(r&&a>=C){e=r,m=!0,T=P,V=a-C;const p=String(r.property||r.id||""),M=p.includes("Blur")||p.includes("Soft")||!!((tt=r==null?void 0:r.details)!=null&&tt.blurBottom)||!!((et=r==null?void 0:r.details)!=null&&et.softEdge);V>=T-1&&!M&&(F=!0)}else if(n)if(a<I)F=!0,e=n,m=!1,T=$,V=0;else if(a<I+$)e=n,m=!1,T=$,V=a-I;else{const p=String(n.property||n.id||"");p.includes("Blur")||p.includes("Soft")||!!((rt=n==null?void 0:n.details)!=null&&rt.blurBottom)||!!((ot=n==null?void 0:n.details)!=null&&ot.softEdge)?(e=n,m=!1,T=$,V=$):(W=!0,e=null)}else W=!0,e=null;const x=Math.max(0,V),w=T>0?Math.min(Math.max(0,x/T),1):1,X=e?Nt(e):Y.Easing.linear,l=Math.max(0,Math.min(1,X(w)));let g,S="",H=1;const j=String((e==null?void 0:e.property)||(e==null?void 0:e.id)||""),i=((nt=e==null?void 0:e.details)==null?void 0:nt.direction)||"up";if(F)g="inset(100%)";else if(W||!e)g=void 0;else{const p=j.includes("ShrinkScale"),M=j.includes("CenterScale"),y=j.includes("Slide")||j.includes("slide");if(M){const B=Number(((st=e==null?void 0:e.details)==null?void 0:st.angle)??(e==null?void 0:e.angle)??0),G=m?100*(1-l):100*l;g=Yt(G,B)}else if(p){const B=Number(((at=e==null?void 0:e.details)==null?void 0:at.initialVisiblePercent)??(e==null?void 0:e.initialVisiblePercent)??50),G=Math.max(0,Math.min(50,(100-B)/2)),J=m?G*l:G*(1-l);g=`inset(
|
|
2
|
-
${
|
|
3
|
-
${
|
|
4
|
-
${
|
|
5
|
-
${
|
|
6
|
-
)`}else if(
|
|
1
|
+
(function(X,v){typeof exports=="object"&&typeof module<"u"?v(exports,require("react/jsx-runtime"),require("react"),require("remotion")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","remotion"],v):(X=typeof globalThis<"u"?globalThis:X||self,v(X.animations={},X.jsxRuntime,X.React,X.remotion))})(this,function(X,v,z,E){"use strict";const Pt=()=>({scale:t=>({transform:`scale(${t})`}),growIn:t=>({transform:`scale(${t})`}),shrinkIn:t=>({transform:`scale(${t})`}),shrinkOut:t=>({transform:`scale(${t})`}),opacity:t=>({opacity:t}),translateX:t=>({transform:`translateX(${t}%)`}),translateY:t=>({transform:`translateY(${t}%)`}),rotate:t=>({transform:`rotate(${t}deg)`}),spin:t=>({transform:`rotate(${t}deg)`}),spinIn:t=>({transform:`rotate(${t}deg)`}),twistIn:t=>({transform:`rotate(${t}deg)`}),twistOut:t=>({transform:`rotate(${t}deg)`}),moveScaleIn:t=>({transform:`scale(${t})`}),spinOut:t=>({transform:`rotate(${t}deg)`}),default:()=>({}),rotateY:t=>({transform:`rotateY(${t}deg)`}),rotateX:t=>({transform:`rotateX(${t}deg)`}),blur:t=>({filter:`blur(${t}px)`}),blurIn:t=>({filter:`blur(${t}px)`}),blurOut:t=>({filter:`blur(${t}px)`}),blurV2In:t=>({filter:`blur(${t}px)`}),blurSlide:t=>({filter:`blur(${t}px)`,transform:`translateY(${t*5}%)`}),blurSlideV2In:t=>({filter:`blur(${t}px)`}),brightness:t=>({filter:`brightness(${t}%)`}),contrast:t=>({filter:`contrast(${t}%)`}),grayscale:t=>({filter:`grayscale(${t}%)`}),hue:t=>({filter:`hue-rotate(${t}deg)`}),saturation:t=>({filter:`saturate(${t}%)`}),vignette:t=>({filter:`contrast(${100+t*20}%) brightness(${100-t*20}%)`}),noise:t=>({filter:`contrast(${100+t*40}%) brightness(${100+t*20}%)`}),pixelate:t=>({filter:`contrast(${100+t*2}%)`}),chromaticAberration:t=>({filter:`hue-rotate(${t*10}deg) contrast(110%)`}),lightLeak:t=>({filter:`brightness(${100+t*50}%) saturate(${100+t*30}%)`}),duotone:t=>({filter:`sepia(${t*100}%) hue-rotate(${t*180}deg)`}),shakeHorizontalIn:t=>({transform:`translateX(${t}px)`}),shakeVerticalIn:t=>({transform:`translateY(${t}px)`}),shakeHorizontalOut:t=>({transform:`translateX(${t}px)`}),shakeVerticalOut:t=>({transform:`translateY(${t}px)`}),maskUpIn:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),maskUpOut:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),maskDownIn:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),maskDownOut:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),moveTranslateY:t=>({transform:`translateY(${t}%)`}),"hide-show":t=>({opacity:t}),hide:t=>({opacity:t}),show:t=>({opacity:t}),borderRadius:t=>({borderRadius:`${t}px`,overflow:"hidden"}),"corner-radius":t=>({borderRadius:`${t}px`,overflow:"hidden"})}),k=(t,f=0)=>{const l=[],a=t/5;for(let c=0;c<6;c+=1)l.push(c*a+f);return l},Ft=(t,f,l,a=!1)=>{const{from:c,to:n,ease:g}=f,p=f.durationInFrames||30,u=Number(c),s=Number(n),r=Math.max(1,Number(p));if(isNaN(u)||isNaN(s))return console.error("Invalid animation values:",{from:c,to:n,animationDurationInFrames:p,property:f.property}),u;p===void 0&&console.warn(`durationInFrames is undefined for animation: ${f.property}. Using 1 frame as default.`);const d=f.delay||0;if(f.property==="hide-show"||f.property==="hide"||f.property==="show")return t<d?u:s;let $;if(f.property==="moveScaleIn"?$=a?[l-r-d,Math.max(0,l-1-d)]:[d+r*.5,d+r]:f.property==="moveTranslateY"?$=a?[l-r*.5-d,Math.max(0,l-1-d)]:[d,d+r*.5]:$=a?[l-r-d,Math.max(0,l-1-d)]:[d,d+r],f.property.includes("shake")){const m=a?k(r,l-r-d):k(r,d);return E.interpolate(t,m,[0,u,s,u,s,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:g})}return E.interpolate(t,$,[u,s],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:g})},Q=t=>{if(t==null)return 0;if(typeof t=="number")return Number.isNaN(t)?0:t;if(typeof t=="object"){if(t.rotate!==void 0&&t.rotate!==null){const c=parseFloat(String(t.rotate));if(!Number.isNaN(c))return c}if(t.rotation!==void 0&&t.rotation!==null){const c=parseFloat(String(t.rotation));if(!Number.isNaN(c))return c}return t.transform?Q(t.transform):0}const f=String(t),l=/rotate\((-?[\d.]+)deg\)/.exec(f);if(l)return parseFloat(l[1])||0;const a=/matrix\(([^)]+)\)/.exec(f);if(a){const c=a[1].split(",").map(n=>parseFloat(n.trim()));if(c.length>=4){const[n,g]=c;return Math.atan2(g,n)*(180/Math.PI)}}return 0},A=(t,f,l,a,c)=>{var u,s,r,d,$;const{property:n}=t;if(n==="move"){const m=Number(((u=t.details)==null?void 0:u.fromX)??t.from??0),F=Number(((s=t.details)==null?void 0:s.toX)??t.to??0),W=Number(((r=t.details)==null?void 0:r.fromY)??0),j=Number(((d=t.details)==null?void 0:d.toY)??0),C=Number((($=t.details)==null?void 0:$.scale)||1)||1;let V=c;if(V==null||Number.isNaN(V)){const Y=t.details;V=Q((Y==null?void 0:Y.rotate)??(Y==null?void 0:Y.rotation)??(Y==null?void 0:Y.transform))}const e=t.delay||0,x=t.durationInFrames||30,O=a?[l-x-e,Math.max(0,l-1-e)]:[e,e+x],T=E.interpolate(f,O,[m,F],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:t.ease}),S=E.interpolate(f,O,[W,j],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:t.ease}),w=(V||0)*Math.PI/180,B=Math.cos(w),i=Math.sin(w),h=T*B+S*i,y=-T*i+S*B,H=h/C,G=y/C;return{transform:`translateX(${H}px) translateY(${G}px)`}}const g=Ft(f,t,l,a),p=Pt();return(p[n]||p.default)(g)},D=(t,f,l,a=!1,c=!1,n)=>z.useMemo(()=>{if(t.length===0)return{};const g=t.filter(p=>p.from!==void 0&&p.to!==void 0);if(g.length!==t.length&&console.error("Some animations are invalid and will be ignored"),c){const p=[];return g.reverse().forEach(s=>{const r=A(s,l,f,!1,n);p.push(r)}),p.reduce((s,r)=>(Object.keys(r).forEach(d=>{d==="transform"||d==="filter"?s[d]=s[d]?`${s[d]} ${r[d]}`:r[d]:s[d]=r[d]}),s),{})}else return g.map(u=>A(u,l,f,a,n)).reduce((u,s)=>(Object.keys(s).forEach(r=>{r==="transform"||r==="filter"?u[r]=u[r]?`${u[r]} ${s[r]}`:s[r]:u[r]=s[r]}),u),{})},[t,l,f,a,n]),R=t=>t?Array.isArray(t)?t:[t]:[],jt=(...t)=>{const f=[];return t.forEach(l=>{Array.isArray(l)?f.push(...l):l&&f.push(l)}),f.filter(l=>l!==void 0).reduce((l,a)=>l.find(n=>n.property===a.property)?l.map(n=>n.property===a.property?{...n,from:Math.min(n.from,a.from),to:Math.max(n.to,a.to),durationInFrames:Math.max(n.durationInFrames,a.durationInFrames),delay:Math.min(n.delay||0,a.delay||0),ease:g=>(n.ease(g)+a.ease(g))/2}:n):[...l,a],[])},Ct=({animationIn:t,animationOut:f,durationInFrames:l,children:a,style:c={},frame:n,isTransition:g=!1,basicCharAnimationsIn:p=[],basicCharAnimationsOut:u=[]})=>{const s=Q((c==null?void 0:c.transform)||(c==null?void 0:c.rotate)||(c==null?void 0:c.rotation)),r=D(R(t),l,n,!1,!1,s),d=D(R(f),l,n,!0,!1,s),$=D(R(p),l,n,!0,!1,s),m=D(R(u),l,n,!0,!1,s),F=z.useMemo(()=>{const S=Object.keys(r).length>0,w=t==null?void 0:t.reduce((i,h)=>Math.min(i,h.delay||0),1/0),B=n-(w||0);return S&&B<0?{visibility:g?"visible":"hidden"}:r},[r,n,t,g]),W=z.useMemo(()=>{if(n>l)return{visibility:g?"visible":"hidden"};const S=R(f);if(!S||S.length===0)return{};let w=0;S.forEach(i=>{const h=(i.durationInFrames||0)+(i.delay||0);h>w&&(w=h)});const B=Math.max(0,l-w);return n<B?{}:d},[d,n,f,l,g]),j=z.useMemo(()=>{const S={...F};return Object.entries(W).forEach(([w,B])=>{w==="transform"?S[w]=`${S[w]||""} ${B||""}`.trim():w in S&&typeof S[w]=="number"&&typeof B=="number"?S[w]=S[w]*B:S[w]=B}),S},[F,W]),C=z.useMemo(()=>{const S=j.transform||"",{translateX:w,translateY:B,scale:i,rotation:h,rotateX:y,rotateY:H,rotateZ:G}=tt(S);return`${h} ${w} ${B} ${i} ${y} ${H} ${G}`.trim()},[j]),{top:V,left:e,position:x,transform:O,...T}=c||{};return v.jsx("div",{style:{width:"100%",height:"100%",overflow:j.overflow||$.overflow||m.overflow||"visible",pointerEvents:"none"},children:v.jsx("div",{style:{width:"100%",height:"100%",...T,...j,overflow:"visible",transform:C,pointerEvents:"none",background:Object.keys(j).length===0?"transparent":j.backgroundColor},children:a})})},tt=t=>{let f="",l="",a="scale(1)",c="",n="",g="",p="";const u=t.match(/translateX\([^)]+\)/g);u&&(f=u[u.length-1]);const s=t.match(/translateY\([^)]+\)/g);s&&(l=s[s.length-1]);const r=t.match(/scale\([^)]+\)/g);r&&(a=r[r.length-1]);const d=t.match(/rotate\([^)]+\)/g);d&&(c=d[d.length-1]);const $=t.match(/rotateX\([^)]+\)/g);$&&(n=$[$.length-1]);const m=t.match(/rotateY\([^)]+\)/g);m&&(g=m[m.length-1]);const F=t.match(/rotateZ\([^)]+\)/g);return F&&(p=F[F.length-1]),{translateX:f,translateY:l,scale:a,rotation:c,rotateX:n,rotateY:g,rotateZ:p}},Ot=({animationTimed:t,durationInFrames:f,children:l,style:a={},frame:c})=>{const n=Q((a==null?void 0:a.transform)||(a==null?void 0:a.rotate)||(a==null?void 0:a.rotation)),g=D(R(t),f,c,!1,!0,n),p=z.useMemo(()=>({...g}),[g]),u=!!p.borderRadius;return v.jsx("div",{style:{overflow:u?"hidden":p.overflow||"visible",borderRadius:p.borderRadius,pointerEvents:"none",height:a.height||"100%",width:a.width||"100%",...p,...u?{overflow:"hidden"}:{}},children:v.jsx("div",{style:{overflow:u?"hidden":"visible",borderRadius:p.borderRadius,pointerEvents:"none",height:"100%",width:"100%",display:"flex",alignItems:"center",justifyContent:"center"},children:l})})},Tt=t=>{if(typeof(t==null?void 0:t.ease)=="function")return t.ease;switch(t==null?void 0:t.easing){case"ease-in":case"accelerate":return E.Easing.in(E.Easing.cubic);case"ease-out":case"smooth":case"slowDown":return E.Easing.out(E.Easing.cubic);case"ease-in-out":case"natural":case"swing":return E.Easing.inOut(E.Easing.cubic);case"bounce":return E.Easing.bounce;case"elastic":return E.Easing.elastic(1);case"overshoot":case"impulse":return E.Easing.out(E.Easing.back(1.7));case"none":case"linear":default:return E.Easing.linear}},Vt=(t,f)=>{const l=f*Math.PI/180,a=Math.cos(l),c=Math.sin(l),n=t/100*50,g=50,p=50,u=200,s=a,r=c,d=-c,$=a;return`polygon(${[[g-s*u-d*n,p-r*u-$*n],[g+s*u-d*n,p+r*u-$*n],[g+s*u+d*n,p+r*u+$*n],[g-s*u+d*n,p-r*u+$*n]].map(([F,W])=>`${F}% ${W}%`).join(", ")})`},Ht=({children:t,currentWidth:f,currentHeight:l,frame:a,item:c,keyframeAnimations:n,durationInFrames:g})=>{var nt,lt,at,it,ct,dt,ft,ut,pt,ht,gt,bt,$t,xt,St,wt,yt,Nt,Yt,vt,Et,Xt,Bt,It,mt;if(!n||!Array.isArray(n)||n.length===0)return v.jsx(v.Fragment,{children:t});const p=o=>{var b,I,Z,J,q,N;return!!((b=o==null?void 0:o.property)!=null&&b.includes("maskReveal")||(I=o==null?void 0:o.id)!=null&&I.includes("maskReveal")||(Z=o==null?void 0:o.property)!=null&&Z.includes("maskUp")||(J=o==null?void 0:o.id)!=null&&J.includes("maskUp")||(q=o==null?void 0:o.property)!=null&&q.includes("maskDown")||(N=o==null?void 0:o.id)!=null&&N.includes("maskDown"))},u=o=>{var b,I;return!!((o==null?void 0:o.type)==="exit"||(b=o==null?void 0:o.property)!=null&&b.includes("Out")||(I=o==null?void 0:o.id)!=null&&I.includes("Out"))},s=n.find(o=>p(o)&&!u(o)),r=n.find(o=>p(o)&&u(o));if(!s&&!r)return v.jsx(v.Fragment,{children:t});const d=Math.max(1,g||300),$=s?Math.max(1,Number(s.durationInFrames||30)):30,m=s?Math.max(0,Number(s.delay||0)):0,F=r?Math.max(1,Number(r.durationInFrames||30)):30,W=r?Math.max(0,Number(r.delay||0)):0,j=r?Math.max(0,d-F-W):Number.POSITIVE_INFINITY;let C=!1,V=!1,e=null,x=!1,O=30,T=0;if(r&&(a>=j||!s)){e=r,x=!0,O=F;const o=s||j<d?j:0;T=a-o;const b=String(r.property||r.id||""),I=b.includes("Blur")||b.includes("Soft")||!!((nt=r==null?void 0:r.details)!=null&&nt.blurBottom)||!!((lt=r==null?void 0:r.details)!=null&<.softEdge);T>=O-1&&!I&&(C=!0)}else if(s)if(a<m)C=!0,e=s,x=!1,O=$,T=0;else if(a<m+$)e=s,x=!1,O=$,T=a-m;else{const o=String(s.property||s.id||"");o.includes("Blur")||o.includes("Soft")||!!((at=s==null?void 0:s.details)!=null&&at.blurBottom)||!!((it=s==null?void 0:s.details)!=null&&it.softEdge)?(e=s,x=!1,O=$,T=$):(V=!0,e=null)}else V=!0,e=null;const S=Math.max(0,T),w=O>0?Math.min(Math.max(0,S/O),1):1,B=e?Tt(e):E.Easing.linear,i=Math.max(0,Math.min(1,B(w)));let h,y="",H=1;const G=String((e==null?void 0:e.property)||(e==null?void 0:e.id)||""),Y=((ct=e==null?void 0:e.details)==null?void 0:ct.direction)||"up";if(C)h="inset(100%)";else if(V||!e)h=void 0;else{const o=String(e.property||e.id||""),b=((dt=e.details)==null?void 0:dt.direction)||(o.includes("maskDown")?"down":(o.includes("maskUp"),"up")),I=o.includes("ShrinkScale"),Z=o.includes("CenterScale"),J=o.includes("Slide")||o.includes("slide");if(Z){const N=Number(((ft=e==null?void 0:e.details)==null?void 0:ft.angle)??(e==null?void 0:e.angle)??0),K=x?100*(1-i):100*i;h=Vt(K,N)}else if(I){const N=Number(((ut=e==null?void 0:e.details)==null?void 0:ut.initialVisiblePercent)??(e==null?void 0:e.initialVisiblePercent)??50),K=Math.max(0,Math.min(50,(100-N)/2)),M=x?K*i:K*(1-i);h=`inset(
|
|
2
|
+
${M}%
|
|
3
|
+
${M}%
|
|
4
|
+
${M}%
|
|
5
|
+
${M}%
|
|
6
|
+
)`}else if(J)h="inset(0% 0% 0% 0%)",x?b==="down"?y=`translateY(${100*i}%)`:b==="left"?y=`translateX(${-100*i}%)`:b==="right"?y=`translateX(${100*i}%)`:y=`translateY(${-100*i}%)`:b==="down"?y=`translateY(${-100*(1-i)}%)`:b==="left"?y=`translateX(${100*(1-i)}%)`:b==="right"?y=`translateX(${-100*(1-i)}%)`:y=`translateY(${100*(1-i)}%)`;else if(o.includes("Center"))h=`circle(${x?150*(1-i):150*i}% at 50% 50%)`;else if(o.includes("Corner")){const N=x?i:1-i;b==="down"?h=`inset(0 ${100*N}% ${100*N}% 0)`:b==="up"?h=`inset(${100*N}% ${100*N}% 0 0)`:b==="left"?h=`inset(0 0 ${100*N}% ${100*N}%)`:b==="right"?h=`inset(${100*N}% 0 0 ${100*N}%)`:h=`inset(0 ${100*N}% ${100*N}% 0)`}else x?b==="down"?h=`inset(${100*i}% 0 0 0)`:b==="left"?h=`inset(0 0 0 ${100*i}%)`:b==="right"?h=`inset(0 ${100*i}% 0 0)`:h=`inset(0 0 ${100*i}% 0)`:b==="down"?h=`inset(0 0 ${100*(1-i)}% 0)`:b==="left"?h=`inset(0 0 0 ${100*(1-i)}%)`:b==="right"?h=`inset(0 ${100*(1-i)}% 0 0)`:h=`inset(${100*(1-i)}% 0 0 0)`;const q=!!((pt=e==null?void 0:e.details)!=null&&pt.scale||e!=null&&e.scale);Z||I?((ht=e==null?void 0:e.details)==null?void 0:ht.scale)===!1?H=1:H=x?1+.5*i:1.5-.5*i:q&&(H=x?1-.2*i:.8+.2*i)}const _=G.includes("Blur")||G.includes("Soft")||!!((gt=e==null?void 0:e.details)!=null&>.blurBottom)||!!((bt=e==null?void 0:e.details)!=null&&bt.softEdge);let U;if(_&&!C&&e){h=void 0;const o=30,b=(($t=e==null?void 0:e.details)==null?void 0:$t.blurPosition)||"bottom";x?Y==="up"?y=`translateY(${o*i}%)`:Y==="down"?y=`translateY(${-o*i}%)`:Y==="left"?y=`translateX(${o*i}%)`:Y==="right"&&(y=`translateX(${-o*i}%)`):Y==="up"?y=`translateY(${o*(1-i)}%)`:Y==="down"?y=`translateY(${-o*(1-i)}%)`:Y==="left"?y=`translateX(${o*(1-i)}%)`:Y==="right"&&(y=`translateX(${-o*(1-i)}%)`);const I=typeof((xt=e==null?void 0:e.details)==null?void 0:xt.blurHeight)=="number"?e.details.blurHeight:parseInt(String(((St=e==null?void 0:e.details)==null?void 0:St.blurHeight)||"35"),10)||35,Z=x?100:0,J=x?0:100,q=Number(((wt=e==null?void 0:e.details)==null?void 0:wt.initialOpacity)??Z)/100,N=Number(((yt=e==null?void 0:e.details)==null?void 0:yt.finalOpacity)??J)/100,K=Math.max(0,Math.min(1,q+(N-q)*i)),M=Math.max(0,1-K);b==="bottom"?U=`linear-gradient(to bottom, black 0%, black ${100-I}%, rgba(0,0,0,${M}) 100%)`:b==="top"?U=`linear-gradient(to top, black 0%, black ${100-I}%, rgba(0,0,0,${M}) 100%)`:b==="right"?U=`linear-gradient(to right, black 0%, black ${100-I}%, rgba(0,0,0,${M}) 100%)`:b==="left"&&(U=`linear-gradient(to left, black 0%, black ${100-I}%, rgba(0,0,0,${M}) 100%)`)}const Mt=[y,H!==1?`scale(${H})`:""].filter(Boolean).join(" ")||void 0,L=(Nt=c==null?void 0:c.details)==null?void 0:Nt.boxShadow,et=L&&(L.x||L.y||L.blur)?`drop-shadow(${L.x||0}px ${L.y||0}px ${L.blur||0}px ${L.color||"#000000"})`:void 0,rt=Number(((Yt=e==null?void 0:e.details)==null?void 0:Yt.blurAmount)??16),Wt=!!(_&&(((vt=e==null?void 0:e.details)==null?void 0:vt.blurBottom)??!0)),P=((Et=e==null?void 0:e.details)==null?void 0:Et.blurPosition)||"bottom",ot=typeof((Xt=e==null?void 0:e.details)==null?void 0:Xt.blurHeight)=="number"?`${e.details.blurHeight}%`:((Bt=e==null?void 0:e.details)==null?void 0:Bt.blurHeight)||"35%",Lt=x?100:0,Rt=x?0:100,st=Number(((It=e==null?void 0:e.details)==null?void 0:It.initialOpacity)??Lt)/100,Ut=Number(((mt=e==null?void 0:e.details)==null?void 0:mt.finalOpacity)??Rt)/100,Zt=_&&e?Math.max(0,Math.min(1,st+(Ut-st)*i)):1;return v.jsx("div",{style:{width:f!==void 0?f:"100%",height:l!==void 0?l:"100%",position:"relative",visibility:C?"hidden":"visible"},children:v.jsxs("div",{style:{width:"100%",height:"100%",position:"relative",clipPath:h||void 0,WebkitClipPath:h||void 0,maskImage:U||void 0,WebkitMaskImage:U||void 0,overflow:h||U?"hidden":"visible"},children:[v.jsx("div",{style:{width:"100%",height:"100%",transform:Mt,transformOrigin:"center",filter:et,WebkitFilter:et},children:t}),Wt&&!C&&v.jsx("div",{style:{position:"absolute",top:P==="top"?0:void 0,bottom:P==="bottom"?0:void 0,left:0,right:0,width:P==="left"||P==="right"?ot:"100%",height:P==="top"||P==="bottom"?ot:"100%",pointerEvents:"none",opacity:Zt,backdropFilter:`blur(${rt}px)`,WebkitBackdropFilter:`blur(${rt}px)`,maskImage:P==="top"?"linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, transparent 100%)":P==="left"?"linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, transparent 100%)":P==="right"?"linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, transparent 100%)":"linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, transparent 100%)",WebkitMaskImage:P==="top"?"linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, transparent 100%)":P==="left"?"linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, transparent 100%)":P==="right"?"linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, transparent 100%)":"linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, transparent 100%)"}})]})})};X.BoxAnim=Ct,X.ContentAnim=Ot,X.MaskAnim=Ht,X.combine=jt,X.combineAnimations=R,X.extractTransformations=tt,X.useAnimation=D,Object.defineProperty(X,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cliquify.me/animations",
|
|
3
|
-
"version": "10.0.
|
|
3
|
+
"version": "10.0.3",
|
|
4
4
|
"private": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -8,9 +8,16 @@
|
|
|
8
8
|
"files": [
|
|
9
9
|
"dist"
|
|
10
10
|
],
|
|
11
|
-
"main": "
|
|
12
|
-
"module": "
|
|
13
|
-
"types": "
|
|
11
|
+
"main": "dist/index.umd.js",
|
|
12
|
+
"module": "dist/index.es.js",
|
|
13
|
+
"types": "dist/index.d.ts",
|
|
14
|
+
"exports": {
|
|
15
|
+
".": {
|
|
16
|
+
"import": "./dist/index.es.js",
|
|
17
|
+
"require": "./dist/index.umd.js",
|
|
18
|
+
"types": "./dist/index.d.ts"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
14
21
|
"devDependencies": {
|
|
15
22
|
"@designcombo/events": "^1.0.2",
|
|
16
23
|
"@types/node": "^20.11.24",
|
|
@@ -19,8 +26,8 @@
|
|
|
19
26
|
"typescript": "^5.3.3",
|
|
20
27
|
"vite": "^5.2.0",
|
|
21
28
|
"vite-plugin-dts": "^3.9.1",
|
|
22
|
-
"@cliquify.me/types": "9.0.
|
|
23
|
-
"@cliquify.me/typescript-config": "1.0.
|
|
29
|
+
"@cliquify.me/types": "9.0.4",
|
|
30
|
+
"@cliquify.me/typescript-config": "1.0.1"
|
|
24
31
|
},
|
|
25
32
|
"dependencies": {
|
|
26
33
|
"remotion": "4.0.506",
|
|
@@ -31,7 +38,7 @@
|
|
|
31
38
|
"@designcombo/events": "^1.0.2",
|
|
32
39
|
"react": "^18.2.0 || ^19.0.0",
|
|
33
40
|
"remotion": "4.0.506",
|
|
34
|
-
"@cliquify.me/types": "9.0.
|
|
41
|
+
"@cliquify.me/types": "9.0.4"
|
|
35
42
|
},
|
|
36
43
|
"scripts": {
|
|
37
44
|
"dev": "vite",
|
package/src/index.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export { BoxAnim } from "./Animated";
|
|
2
|
-
export { useAnimation, combineAnimations, combine } from "./use-animation";
|
|
3
|
-
export type { Animation, AnimatedProps } from "./Animated";
|
|
4
|
-
export { extractTransformations } from "./Animated";
|
|
5
|
-
export { ContentAnim } from "./content";
|
|
6
|
-
export type { ContentAnimationsProps } from "./content";
|
|
7
|
-
export { MaskAnim } from "./mask";
|