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