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