@cliquify.me/animations 9.0.6 → 9.0.8
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 +88 -79
- package/dist/index.umd.js +1 -1
- package/package.json +6 -6
package/dist/index.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as x } from "react/jsx-runtime";
|
|
2
|
-
import X, { useMemo as
|
|
3
|
-
import { interpolate as R, Easing as
|
|
2
|
+
import X, { useMemo as T } from "react";
|
|
3
|
+
import { interpolate as R, Easing as M } from "remotion";
|
|
4
4
|
const I = () => ({
|
|
5
5
|
scale: (t) => ({ transform: `scale(${t})` }),
|
|
6
6
|
opacity: (t) => ({ opacity: t }),
|
|
@@ -48,13 +48,13 @@ const I = () => ({
|
|
|
48
48
|
transform: `translateY(${t}%)`,
|
|
49
49
|
overflow: "hidden"
|
|
50
50
|
})
|
|
51
|
-
}),
|
|
51
|
+
}), V = (t, l = 0) => {
|
|
52
52
|
const r = [], c = t / 5;
|
|
53
53
|
for (let a = 0; a < 6; a += 1)
|
|
54
54
|
r.push(a * c + l);
|
|
55
55
|
return r;
|
|
56
|
-
},
|
|
57
|
-
const { from: a, to: o, ease:
|
|
56
|
+
}, C = (t, l, r, c = !1) => {
|
|
57
|
+
const { from: a, to: o, ease: h } = l, n = l.durationInFrames || 30, f = Number(a), i = Number(o), e = Math.max(1, Number(n));
|
|
58
58
|
if (isNaN(f) || isNaN(i))
|
|
59
59
|
return console.error("Invalid animation values:", {
|
|
60
60
|
from: a,
|
|
@@ -65,12 +65,12 @@ const I = () => ({
|
|
|
65
65
|
n === void 0 && console.warn(
|
|
66
66
|
`durationInFrames is undefined for animation: ${l.property}. Using 1 frame as default.`
|
|
67
67
|
);
|
|
68
|
-
const s = l.delay || 0,
|
|
68
|
+
const s = l.delay || 0, d = c ? [r - e - s, r - s] : [s, s + e];
|
|
69
69
|
if (l.property.includes("shake")) {
|
|
70
|
-
const p = c ?
|
|
70
|
+
const p = c ? V(
|
|
71
71
|
e,
|
|
72
72
|
r - e - s
|
|
73
|
-
) :
|
|
73
|
+
) : V(e, s);
|
|
74
74
|
return R(
|
|
75
75
|
t,
|
|
76
76
|
p,
|
|
@@ -78,40 +78,40 @@ const I = () => ({
|
|
|
78
78
|
{
|
|
79
79
|
extrapolateLeft: "clamp",
|
|
80
80
|
extrapolateRight: "clamp",
|
|
81
|
-
easing:
|
|
81
|
+
easing: h
|
|
82
82
|
}
|
|
83
83
|
);
|
|
84
84
|
}
|
|
85
|
-
return R(t,
|
|
85
|
+
return R(t, d, [f, i], {
|
|
86
86
|
extrapolateLeft: "clamp",
|
|
87
87
|
extrapolateRight: "clamp",
|
|
88
|
-
easing:
|
|
88
|
+
easing: h
|
|
89
89
|
});
|
|
90
|
-
},
|
|
91
|
-
const { property: a } = t, o =
|
|
92
|
-
return (
|
|
90
|
+
}, j = (t, l, r, c) => {
|
|
91
|
+
const { property: a } = t, o = C(l, t, r, c), h = I();
|
|
92
|
+
return (h[a] || h.default)(o);
|
|
93
93
|
}, E = (t, l, r, c = !1, a = !1) => X.useMemo(() => {
|
|
94
94
|
if (t.length === 0) return {};
|
|
95
95
|
const o = t.filter(
|
|
96
|
-
(
|
|
96
|
+
(h) => h.from !== void 0 && h.to !== void 0
|
|
97
97
|
);
|
|
98
98
|
if (o.length !== t.length && console.error("Some animations are invalid and will be ignored"), a) {
|
|
99
|
-
const
|
|
99
|
+
const h = [], n = {};
|
|
100
100
|
o.reverse().forEach((e) => {
|
|
101
|
-
const s =
|
|
101
|
+
const s = j(e, r, l, !1);
|
|
102
102
|
if (e.persist === !0 && r - (e.delay || 0) >= e.durationInFrames) {
|
|
103
|
-
const p = e.to, v = I(),
|
|
104
|
-
Object.keys(
|
|
103
|
+
const p = e.to, v = I(), u = (v[e.property] || v.default)(p);
|
|
104
|
+
Object.keys(u).forEach(($) => {
|
|
105
105
|
$ === "transform" ? n[$] = n[$] ? {
|
|
106
|
-
[$]: `${n[$][$]} ${
|
|
107
|
-
} :
|
|
106
|
+
[$]: `${n[$][$]} ${u[$]}`
|
|
107
|
+
} : u : n[$] = u;
|
|
108
108
|
});
|
|
109
109
|
}
|
|
110
|
-
|
|
110
|
+
h.push(s);
|
|
111
111
|
});
|
|
112
|
-
const i = { ...
|
|
113
|
-
(e, s) => (Object.keys(s).forEach((
|
|
114
|
-
|
|
112
|
+
const i = { ...h.reduce(
|
|
113
|
+
(e, s) => (Object.keys(s).forEach((d) => {
|
|
114
|
+
d === "transform" || d === "filter" ? e[d] = e[d] ? `${e[d]} ${s[d]}` : s[d] : e[d] = s[d];
|
|
115
115
|
}), e),
|
|
116
116
|
{}
|
|
117
117
|
) };
|
|
@@ -120,13 +120,13 @@ const I = () => ({
|
|
|
120
120
|
(e === "transform" || e === "filter") && s[e] ? i[e] = i[e] ? `${i[e]} ${s[e]}` : String(s[e]) : s[e] !== void 0 && (i[e] = s[e]);
|
|
121
121
|
}), i;
|
|
122
122
|
} else
|
|
123
|
-
return o.map((n) =>
|
|
123
|
+
return o.map((n) => j(n, r, l, c)).reduce(
|
|
124
124
|
(n, f) => (Object.keys(f).forEach((i) => {
|
|
125
125
|
i === "transform" || i === "filter" ? n[i] = n[i] ? `${n[i]} ${f[i]}` : f[i] : n[i] = f[i];
|
|
126
126
|
}), n),
|
|
127
127
|
{}
|
|
128
128
|
);
|
|
129
|
-
}, [t, r, l, c]), A = (t) => t ? Array.isArray(t) ? t : [t] : [],
|
|
129
|
+
}, [t, r, l, c]), A = (t) => t ? Array.isArray(t) ? t : [t] : [], q = (...t) => {
|
|
130
130
|
const l = [];
|
|
131
131
|
return t.forEach((r) => {
|
|
132
132
|
Array.isArray(r) ? l.push(...r) : r && l.push(r);
|
|
@@ -142,18 +142,18 @@ const I = () => ({
|
|
|
142
142
|
c.durationInFrames
|
|
143
143
|
),
|
|
144
144
|
delay: Math.min(o.delay || 0, c.delay || 0),
|
|
145
|
-
ease: (
|
|
145
|
+
ease: (h) => (o.ease(h) + c.ease(h)) / 2
|
|
146
146
|
// Average the easing functions
|
|
147
147
|
} : o
|
|
148
148
|
) : [...r, c], []);
|
|
149
|
-
},
|
|
149
|
+
}, G = ({
|
|
150
150
|
animationIn: t,
|
|
151
151
|
animationOut: l,
|
|
152
152
|
durationInFrames: r,
|
|
153
153
|
children: c,
|
|
154
154
|
style: a = {},
|
|
155
155
|
frame: o,
|
|
156
|
-
isTransition:
|
|
156
|
+
isTransition: h = !1
|
|
157
157
|
}) => {
|
|
158
158
|
var F;
|
|
159
159
|
const n = E(
|
|
@@ -168,23 +168,23 @@ const I = () => ({
|
|
|
168
168
|
!0
|
|
169
169
|
), i = X.useMemo(() => {
|
|
170
170
|
const m = Object.keys(n).length > 0, g = t == null ? void 0 : t.reduce(
|
|
171
|
-
(
|
|
171
|
+
(w, S) => Math.min(w, S.delay || 0),
|
|
172
172
|
1 / 0
|
|
173
173
|
), b = o - (g || 0);
|
|
174
|
-
return m && b < 0 ? { visibility:
|
|
174
|
+
return m && b < 0 ? { visibility: h ? "visible" : "hidden" } : n;
|
|
175
175
|
}, [n, o, t]), e = X.useMemo(() => {
|
|
176
176
|
if (o > r)
|
|
177
|
-
return { visibility:
|
|
177
|
+
return { visibility: h ? "visible" : "hidden" };
|
|
178
178
|
const m = A(l);
|
|
179
179
|
if (!m || m.length === 0) return {};
|
|
180
180
|
let g = 0;
|
|
181
|
-
m.forEach((
|
|
182
|
-
const S = (
|
|
181
|
+
m.forEach((w) => {
|
|
182
|
+
const S = (w.durationInFrames || 0) + (w.delay || 0);
|
|
183
183
|
S > g && (g = S);
|
|
184
184
|
});
|
|
185
185
|
const b = Math.max(0, r - g);
|
|
186
186
|
return o < b ? {} : f;
|
|
187
|
-
}, [f, o, l, r,
|
|
187
|
+
}, [f, o, l, r, h]), d = ((a == null ? void 0 : a.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), p = d ? parseFloat(d[1]) : 0, v = -p, u = X.useMemo(() => {
|
|
188
188
|
const m = {
|
|
189
189
|
...i
|
|
190
190
|
// , ...timedStyle
|
|
@@ -193,53 +193,62 @@ const I = () => ({
|
|
|
193
193
|
g === "transform" ? m[g] = `${m[g] || ""} ${b || ""}`.trim() : g in m && typeof m[g] == "number" && typeof b == "number" ? m[g] = m[g] * b : m[g] = b;
|
|
194
194
|
}), m;
|
|
195
195
|
}, [i, e]);
|
|
196
|
-
if ((F =
|
|
197
|
-
const m =
|
|
198
|
-
|
|
196
|
+
if ((F = u.transform) != null && F.includes("rotate")) {
|
|
197
|
+
const m = u.transform;
|
|
198
|
+
u.transform = m.replace(
|
|
199
199
|
/rotate\(([^)]+)deg\)/,
|
|
200
200
|
(g, b) => `rotate(${parseFloat(b) - v}deg)`
|
|
201
201
|
);
|
|
202
202
|
}
|
|
203
|
-
const $ =
|
|
204
|
-
const m =
|
|
203
|
+
const $ = T(() => {
|
|
204
|
+
const m = u.transform || "", {
|
|
205
205
|
translateX: g,
|
|
206
206
|
translateY: b,
|
|
207
|
-
scale:
|
|
207
|
+
scale: w,
|
|
208
208
|
rotation: S,
|
|
209
|
-
rotateX:
|
|
209
|
+
rotateX: _,
|
|
210
210
|
rotateY: H,
|
|
211
211
|
rotateZ: N
|
|
212
212
|
} = D(m);
|
|
213
|
-
return `${g} ${b} ${
|
|
214
|
-
}, [
|
|
213
|
+
return `${g} ${b} ${w} ${S || `rotate(${p}deg)`} ${_} ${H} ${N}`.trim();
|
|
214
|
+
}, [u, p]);
|
|
215
215
|
let y = n;
|
|
216
|
-
|
|
216
|
+
p > 0 && y.transform && y.transform.includes("translateX") && (y = {
|
|
217
217
|
...y,
|
|
218
218
|
transform: y.transform.replace(
|
|
219
219
|
/translateX\(([^)]+)\)/g,
|
|
220
220
|
(m, g) => `translateX(${parseFloat(g)}%)`
|
|
221
221
|
)
|
|
222
|
-
})
|
|
222
|
+
});
|
|
223
|
+
const {
|
|
224
|
+
top: Z,
|
|
225
|
+
left: L,
|
|
226
|
+
position: P,
|
|
227
|
+
transform: z,
|
|
228
|
+
...O
|
|
229
|
+
} = a || {};
|
|
230
|
+
return /* @__PURE__ */ x(
|
|
223
231
|
"div",
|
|
224
232
|
{
|
|
225
233
|
style: {
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
justifyContent: "center"
|
|
234
|
+
width: "100%",
|
|
235
|
+
height: "100%",
|
|
236
|
+
overflow: u.overflow || "visible",
|
|
237
|
+
pointerEvents: "none"
|
|
231
238
|
},
|
|
232
239
|
children: /* @__PURE__ */ x(
|
|
233
240
|
"div",
|
|
234
241
|
{
|
|
235
242
|
style: {
|
|
236
|
-
|
|
237
|
-
|
|
243
|
+
width: "100%",
|
|
244
|
+
height: "100%",
|
|
245
|
+
...O,
|
|
246
|
+
...u,
|
|
238
247
|
rotate: `${v}deg`,
|
|
239
248
|
overflow: "visible",
|
|
240
249
|
transform: $,
|
|
241
250
|
pointerEvents: "none",
|
|
242
|
-
background: Object.keys(
|
|
251
|
+
background: Object.keys(u).length === 0 ? "transparent" : u.backgroundColor
|
|
243
252
|
},
|
|
244
253
|
children: c
|
|
245
254
|
}
|
|
@@ -247,7 +256,7 @@ const I = () => ({
|
|
|
247
256
|
}
|
|
248
257
|
);
|
|
249
258
|
}, D = (t) => {
|
|
250
|
-
let l = "", r = "", c = "scale(1)", a = "", o = "",
|
|
259
|
+
let l = "", r = "", c = "scale(1)", a = "", o = "", h = "", n = "";
|
|
251
260
|
const f = t.match(/translateX\([^)]+\)/g);
|
|
252
261
|
f && (l = f[f.length - 1]);
|
|
253
262
|
const i = t.match(/translateY\([^)]+\)/g);
|
|
@@ -256,20 +265,20 @@ const I = () => ({
|
|
|
256
265
|
e && (c = e[e.length - 1]);
|
|
257
266
|
const s = t.match(/rotate\([^)]+\)/g);
|
|
258
267
|
s && (a = s[s.length - 1]);
|
|
259
|
-
const
|
|
260
|
-
|
|
268
|
+
const d = t.match(/rotateX\([^)]+\)/g);
|
|
269
|
+
d && (o = d[d.length - 1]);
|
|
261
270
|
const p = t.match(/rotateY\([^)]+\)/g);
|
|
262
|
-
p && (
|
|
271
|
+
p && (h = p[p.length - 1]);
|
|
263
272
|
const v = t.match(/rotateZ\([^)]+\)/g);
|
|
264
|
-
return v && (n = v[v.length - 1]), { translateX: l, translateY: r, scale: c, rotation: a, rotateX: o, rotateY:
|
|
265
|
-
},
|
|
273
|
+
return v && (n = v[v.length - 1]), { translateX: l, translateY: r, scale: c, rotation: a, rotateX: o, rotateY: h, rotateZ: n };
|
|
274
|
+
}, J = ({
|
|
266
275
|
animationTimed: t,
|
|
267
276
|
durationInFrames: l,
|
|
268
277
|
children: r,
|
|
269
278
|
style: c = {},
|
|
270
279
|
frame: a
|
|
271
280
|
}) => {
|
|
272
|
-
var
|
|
281
|
+
var d;
|
|
273
282
|
const o = E(
|
|
274
283
|
A(t),
|
|
275
284
|
l,
|
|
@@ -279,11 +288,11 @@ const I = () => ({
|
|
|
279
288
|
), n = ((c == null ? void 0 : c.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), f = n ? parseFloat(n[1]) : 0, i = -f, e = X.useMemo(() => ({
|
|
280
289
|
...o
|
|
281
290
|
}), [o]);
|
|
282
|
-
if ((
|
|
291
|
+
if ((d = e.transform) != null && d.includes("rotate")) {
|
|
283
292
|
const p = e.transform;
|
|
284
293
|
e.transform = p.replace(
|
|
285
294
|
/rotate\(([^)]+)deg\)/,
|
|
286
|
-
(v,
|
|
295
|
+
(v, u) => `rotate(${parseFloat(u) - i}deg)`
|
|
287
296
|
);
|
|
288
297
|
}
|
|
289
298
|
let s = e;
|
|
@@ -325,30 +334,30 @@ const I = () => ({
|
|
|
325
334
|
if (typeof (t == null ? void 0 : t.ease) == "function") return t.ease;
|
|
326
335
|
switch (t == null ? void 0 : t.easing) {
|
|
327
336
|
case "ease-in":
|
|
328
|
-
return
|
|
337
|
+
return M.in(M.cubic);
|
|
329
338
|
case "ease-out":
|
|
330
|
-
return
|
|
339
|
+
return M.out(M.cubic);
|
|
331
340
|
case "ease-in-out":
|
|
332
|
-
return
|
|
341
|
+
return M.inOut(M.cubic);
|
|
333
342
|
case "linear":
|
|
334
343
|
default:
|
|
335
|
-
return
|
|
344
|
+
return M.linear;
|
|
336
345
|
}
|
|
337
|
-
},
|
|
346
|
+
}, K = ({
|
|
338
347
|
children: t,
|
|
339
348
|
frame: l,
|
|
340
349
|
item: r,
|
|
341
350
|
keyframeAnimations: c
|
|
342
351
|
}) => {
|
|
343
|
-
var v,
|
|
344
|
-
const a = c ? [...c].reverse().find(($) => $.property.includes("maskReveal")) : void 0, o = ((v = r.details.crop) == null ? void 0 : v.width) || r.details.width,
|
|
345
|
-
let n = 1, f = n, i =
|
|
346
|
-
return (l || 0) >= 0 && (a == null ? void 0 : a.property) === "maskRevealIn" ? (n = Math.min((l || 0) / a.durationInFrames, 1), f = Math.max(0, Math.min(1, Y(a)(n))), i =
|
|
352
|
+
var v, u;
|
|
353
|
+
const a = c ? [...c].reverse().find(($) => $.property.includes("maskReveal")) : void 0, o = ((v = r.details.crop) == null ? void 0 : v.width) || r.details.width, h = ((u = r.details.crop) == null ? void 0 : u.height) || r.details.height;
|
|
354
|
+
let n = 1, f = n, i = h, e = 0, s = 0, d = o, p;
|
|
355
|
+
return (l || 0) >= 0 && (a == null ? void 0 : a.property) === "maskRevealIn" ? (n = Math.min((l || 0) / a.durationInFrames, 1), f = Math.max(0, Math.min(1, Y(a)(n))), i = h * f) : (l || 0) >= 0 && (a == null ? void 0 : a.property) === "maskRevealCenterIn" ? (n = Math.min((l || 0) / a.durationInFrames, 1), f = Math.max(0, Math.min(1, Y(a)(n))), d = o, i = h, e = 0, s = 0, p = `circle(${Math.max(o, h) * f}px at 50% 50%)`) : (l || 0) >= 0 && (a == null ? void 0 : a.property) === "maskRevealCornerIn" && (n = Math.min((l || 0) / a.durationInFrames, 1), f = Math.max(0, Math.min(1, Y(a)(n))), d = o * f, i = h * f, e = o - d, s = 0), /* @__PURE__ */ x(
|
|
347
356
|
"div",
|
|
348
357
|
{
|
|
349
358
|
style: {
|
|
350
359
|
width: o,
|
|
351
|
-
height:
|
|
360
|
+
height: h,
|
|
352
361
|
position: "relative",
|
|
353
362
|
overflow: f < 1 ? "hidden" : "visible"
|
|
354
363
|
},
|
|
@@ -359,7 +368,7 @@ const I = () => ({
|
|
|
359
368
|
position: "absolute",
|
|
360
369
|
left: e,
|
|
361
370
|
top: s,
|
|
362
|
-
width:
|
|
371
|
+
width: d,
|
|
363
372
|
height: i,
|
|
364
373
|
overflow: f < 1 ? "hidden" : "visible",
|
|
365
374
|
clipPath: p
|
|
@@ -371,10 +380,10 @@ const I = () => ({
|
|
|
371
380
|
);
|
|
372
381
|
};
|
|
373
382
|
export {
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
383
|
+
G as BoxAnim,
|
|
384
|
+
J as ContentAnim,
|
|
385
|
+
K as MaskAnim,
|
|
386
|
+
q as combine,
|
|
378
387
|
A as combineAnimations,
|
|
379
388
|
D as extractTransformations,
|
|
380
389
|
E as useAnimation
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(v,S){typeof exports=="object"&&typeof module<"u"?S(exports,require("react/jsx-runtime"),require("react"),require("remotion")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","remotion"],S):(v=typeof globalThis<"u"?globalThis:v||self,S(v.animations={},v.jsxRuntime,v.React,v.remotion))})(this,function(v,S,x,w){"use strict";const F=()=>({scale:t=>({transform:`scale(${t})`}),opacity:t=>({opacity:t}),translateX:t=>({transform:`translateX(${t}%)`}),translateY:t=>({transform:`translateY(${t}%)`}),rotate:t=>({transform:`rotate(${t}deg)`}),default:()=>({}),rotateY:t=>({transform:`rotateY(${t}deg)`}),rotateX:t=>({transform:`rotateX(${t}deg)`}),blur: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}%)`,overflow:"hidden"}),shakeVerticalIn:t=>({transform:`translateY(${t}%)`,overflow:"hidden"}),shakeHorizontalOut:t=>({transform:`translateX(${t}%)`,overflow:"hidden"}),shakeVerticalOut:t=>({transform:`translateY(${t}%)`,overflow:"hidden"})}),V=(t,i=0)=>{const r=[],c=t/5;for(let
|
|
1
|
+
(function(v,S){typeof exports=="object"&&typeof module<"u"?S(exports,require("react/jsx-runtime"),require("react"),require("remotion")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","remotion"],S):(v=typeof globalThis<"u"?globalThis:v||self,S(v.animations={},v.jsxRuntime,v.React,v.remotion))})(this,function(v,S,x,w){"use strict";const F=()=>({scale:t=>({transform:`scale(${t})`}),opacity:t=>({opacity:t}),translateX:t=>({transform:`translateX(${t}%)`}),translateY:t=>({transform:`translateY(${t}%)`}),rotate:t=>({transform:`rotate(${t}deg)`}),default:()=>({}),rotateY:t=>({transform:`rotateY(${t}deg)`}),rotateX:t=>({transform:`rotateX(${t}deg)`}),blur: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}%)`,overflow:"hidden"}),shakeVerticalIn:t=>({transform:`translateY(${t}%)`,overflow:"hidden"}),shakeHorizontalOut:t=>({transform:`translateX(${t}%)`,overflow:"hidden"}),shakeVerticalOut:t=>({transform:`translateY(${t}%)`,overflow:"hidden"})}),V=(t,i=0)=>{const r=[],c=t/5;for(let o=0;o<6;o+=1)r.push(o*c+i);return r},_=(t,i,r,c=!1)=>{const{from:o,to:n,ease:d}=i,a=i.durationInFrames||30,f=Number(o),l=Number(n),e=Math.max(1,Number(a));if(isNaN(f)||isNaN(l))return console.error("Invalid animation values:",{from:o,to:n,animationDurationInFrames:a,property:i.property}),f;a===void 0&&console.warn(`durationInFrames is undefined for animation: ${i.property}. Using 1 frame as default.`);const s=i.delay||0,u=c?[r-e-s,r-s]:[s,s+e];if(i.property.includes("shake")){const p=c?V(e,r-e-s):V(e,s);return w.interpolate(t,p,[0,f,l,f,l,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:d})}return w.interpolate(t,u,[f,l],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:d})},T=(t,i,r,c)=>{const{property:o}=t,n=_(i,t,r,c),d=F();return(d[o]||d.default)(n)},j=(t,i,r,c=!1,o=!1)=>x.useMemo(()=>{if(t.length===0)return{};const n=t.filter(d=>d.from!==void 0&&d.to!==void 0);if(n.length!==t.length&&console.error("Some animations are invalid and will be ignored"),o){const d=[],a={};n.reverse().forEach(e=>{const s=T(e,r,i,!1);if(e.persist===!0&&r-(e.delay||0)>=e.durationInFrames){const p=e.to,$=F(),h=($[e.property]||$.default)(p);Object.keys(h).forEach(b=>{b==="transform"?a[b]=a[b]?{[b]:`${a[b][b]} ${h[b]}`}:h:a[b]=h})}d.push(s)});const l={...d.reduce((e,s)=>(Object.keys(s).forEach(u=>{u==="transform"||u==="filter"?e[u]=e[u]?`${e[u]} ${s[u]}`:s[u]:e[u]=s[u]}),e),{})};return Object.keys(a).forEach(e=>{const s=a[e];(e==="transform"||e==="filter")&&s[e]?l[e]=l[e]?`${l[e]} ${s[e]}`:String(s[e]):s[e]!==void 0&&(l[e]=s[e])}),l}else return n.map(a=>T(a,r,i,c)).reduce((a,f)=>(Object.keys(f).forEach(l=>{l==="transform"||l==="filter"?a[l]=a[l]?`${a[l]} ${f[l]}`:f[l]:a[l]=f[l]}),a),{})},[t,r,i,c]),A=t=>t?Array.isArray(t)?t:[t]:[],H=(...t)=>{const i=[];return t.forEach(r=>{Array.isArray(r)?i.push(...r):r&&i.push(r)}),i.filter(r=>r!==void 0).reduce((r,c)=>r.find(n=>n.property===c.property)?r.map(n=>n.property===c.property?{...n,from:Math.min(n.from,c.from),to:Math.max(n.to,c.to),durationInFrames:Math.max(n.durationInFrames,c.durationInFrames),delay:Math.min(n.delay||0,c.delay||0),ease:d=>(n.ease(d)+c.ease(d))/2}:n):[...r,c],[])},N=({animationIn:t,animationOut:i,durationInFrames:r,children:c,style:o={},frame:n,isTransition:d=!1})=>{var I;const a=j(A(t),r,n,!1),f=j(A(i),r,n,!0),l=x.useMemo(()=>{const m=Object.keys(a).length>0,g=t==null?void 0:t.reduce((y,X)=>Math.min(y,X.delay||0),1/0),M=n-(g||0);return m&&M<0?{visibility:d?"visible":"hidden"}:a},[a,n,t]),e=x.useMemo(()=>{if(n>r)return{visibility:d?"visible":"hidden"};const m=A(i);if(!m||m.length===0)return{};let g=0;m.forEach(y=>{const X=(y.durationInFrames||0)+(y.delay||0);X>g&&(g=X)});const M=Math.max(0,r-g);return n<M?{}:f},[f,n,i,r,d]),u=((o==null?void 0:o.transform)||"").match(/rotate\((-?[\d.]+)deg\)/),p=u?parseFloat(u[1]):0,$=-p,h=x.useMemo(()=>{const m={...l};return Object.entries(e).forEach(([g,M])=>{g==="transform"?m[g]=`${m[g]||""} ${M||""}`.trim():g in m&&typeof m[g]=="number"&&typeof M=="number"?m[g]=m[g]*M:m[g]=M}),m},[l,e]);if((I=h.transform)!=null&&I.includes("rotate")){const m=h.transform;h.transform=m.replace(/rotate\(([^)]+)deg\)/,(g,M)=>`rotate(${parseFloat(M)-$}deg)`)}const b=x.useMemo(()=>{const m=h.transform||"",{translateX:g,translateY:M,scale:y,rotation:X,rotateX:P,rotateY:Z,rotateZ:q}=O(m);return`${g} ${M} ${y} ${X||`rotate(${p}deg)`} ${P} ${Z} ${q}`.trim()},[h,p]);let E=a;p>0&&E.transform&&E.transform.includes("translateX")&&(E={...E,transform:E.transform.replace(/translateX\(([^)]+)\)/g,(m,g)=>`translateX(${parseFloat(g)}%)`)});const{top:L,left:z,position:B,transform:W,...D}=o||{};return S.jsx("div",{style:{width:"100%",height:"100%",overflow:h.overflow||"visible",pointerEvents:"none"},children:S.jsx("div",{style:{width:"100%",height:"100%",...D,...h,rotate:`${$}deg`,overflow:"visible",transform:b,pointerEvents:"none",background:Object.keys(h).length===0?"transparent":h.backgroundColor},children:c})})},O=t=>{let i="",r="",c="scale(1)",o="",n="",d="",a="";const f=t.match(/translateX\([^)]+\)/g);f&&(i=f[f.length-1]);const l=t.match(/translateY\([^)]+\)/g);l&&(r=l[l.length-1]);const e=t.match(/scale\([^)]+\)/g);e&&(c=e[e.length-1]);const s=t.match(/rotate\([^)]+\)/g);s&&(o=s[s.length-1]);const u=t.match(/rotateX\([^)]+\)/g);u&&(n=u[u.length-1]);const p=t.match(/rotateY\([^)]+\)/g);p&&(d=p[p.length-1]);const $=t.match(/rotateZ\([^)]+\)/g);return $&&(a=$[$.length-1]),{translateX:i,translateY:r,scale:c,rotation:o,rotateX:n,rotateY:d,rotateZ:a}},C=({animationTimed:t,durationInFrames:i,children:r,style:c={},frame:o})=>{var u;const n=j(A(t),i,o,!1,!0),a=((c==null?void 0:c.transform)||"").match(/rotate\((-?[\d.]+)deg\)/),f=a?parseFloat(a[1]):0,l=-f,e=x.useMemo(()=>({...n}),[n]);if((u=e.transform)!=null&&u.includes("rotate")){const p=e.transform;e.transform=p.replace(/rotate\(([^)]+)deg\)/,($,h)=>`rotate(${parseFloat(h)-l}deg)`)}let s=e;return f>0&&s.transform&&s.transform.includes("translateX")&&(s={...s,transform:s.transform.replace(/translateX\(([^)]+)\)/g,(p,$)=>`translateX(${parseFloat($)}px)`)}),S.jsx("div",{style:{overflow:e.overflow||"visible",pointerEvents:"none",height:c.height,width:c.width,...s},children:S.jsx("div",{style:{...e,overflow:"visible",pointerEvents:"none",height:"100%",width:"100%",display:"flex",alignItems:"center",justifyContent:"center"},children:r})})},Y=t=>{if(typeof(t==null?void 0:t.ease)=="function")return t.ease;switch(t==null?void 0:t.easing){case"ease-in":return w.Easing.in(w.Easing.cubic);case"ease-out":return w.Easing.out(w.Easing.cubic);case"ease-in-out":return w.Easing.inOut(w.Easing.cubic);case"linear":default:return w.Easing.linear}},R=({children:t,frame:i,item:r,keyframeAnimations:c})=>{var $,h;const o=c?[...c].reverse().find(b=>b.property.includes("maskReveal")):void 0,n=(($=r.details.crop)==null?void 0:$.width)||r.details.width,d=((h=r.details.crop)==null?void 0:h.height)||r.details.height;let a=1,f=a,l=d,e=0,s=0,u=n,p;return(i||0)>=0&&(o==null?void 0:o.property)==="maskRevealIn"?(a=Math.min((i||0)/o.durationInFrames,1),f=Math.max(0,Math.min(1,Y(o)(a))),l=d*f):(i||0)>=0&&(o==null?void 0:o.property)==="maskRevealCenterIn"?(a=Math.min((i||0)/o.durationInFrames,1),f=Math.max(0,Math.min(1,Y(o)(a))),u=n,l=d,e=0,s=0,p=`circle(${Math.max(n,d)*f}px at 50% 50%)`):(i||0)>=0&&(o==null?void 0:o.property)==="maskRevealCornerIn"&&(a=Math.min((i||0)/o.durationInFrames,1),f=Math.max(0,Math.min(1,Y(o)(a))),u=n*f,l=d*f,e=n-u,s=0),S.jsx("div",{style:{width:n,height:d,position:"relative",overflow:f<1?"hidden":"visible"},children:S.jsx("div",{style:{position:"absolute",left:e,top:s,width:u,height:l,overflow:f<1?"hidden":"visible",clipPath:p},children:t})})};v.BoxAnim=N,v.ContentAnim=C,v.MaskAnim=R,v.combine=H,v.combineAnimations=A,v.extractTransformations=O,v.useAnimation=j,Object.defineProperty(v,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.8",
|
|
4
4
|
"private": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -26,19 +26,19 @@
|
|
|
26
26
|
"typescript": "^5.3.3",
|
|
27
27
|
"vite": "^5.2.0",
|
|
28
28
|
"vite-plugin-dts": "^3.9.1",
|
|
29
|
-
"@cliquify.me/
|
|
30
|
-
"@cliquify.me/
|
|
29
|
+
"@cliquify.me/typescript-config": "0.0.2",
|
|
30
|
+
"@cliquify.me/types": "8.0.7"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"remotion": "4.0.
|
|
33
|
+
"remotion": "4.0.506",
|
|
34
34
|
"rxjs": "^7.8.1",
|
|
35
35
|
"nanoid": "^5.0.7"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"@designcombo/events": "^1.0.2",
|
|
39
39
|
"react": "^18.2.0 || ^19.0.0",
|
|
40
|
-
"remotion": "4.0.
|
|
41
|
-
"@cliquify.me/types": "8.0.
|
|
40
|
+
"remotion": "4.0.506",
|
|
41
|
+
"@cliquify.me/types": "8.0.7"
|
|
42
42
|
},
|
|
43
43
|
"scripts": {
|
|
44
44
|
"dev": "vite",
|