@cliquify.me/animations 8.0.3 → 9.0.0
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 +119 -99
- package/dist/index.umd.js +1 -1
- package/package.json +3 -3
package/dist/index.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as x } from "react/jsx-runtime";
|
|
2
2
|
import X, { useMemo as C } from "react";
|
|
3
|
-
import { interpolate as R, Easing as
|
|
3
|
+
import { interpolate as R, Easing as w } from "remotion";
|
|
4
4
|
const I = () => ({
|
|
5
5
|
scale: (t) => ({ transform: `scale(${t})` }),
|
|
6
6
|
opacity: (t) => ({ opacity: t }),
|
|
@@ -11,7 +11,27 @@ const I = () => ({
|
|
|
11
11
|
rotateY: (t) => ({ transform: `rotateY(${t}deg)` }),
|
|
12
12
|
rotateX: (t) => ({ transform: `rotateX(${t}deg)` }),
|
|
13
13
|
blur: (t) => ({ filter: `blur(${t}px)` }),
|
|
14
|
-
brightness: (t) => ({ filter: `brightness(${t})` }),
|
|
14
|
+
brightness: (t) => ({ filter: `brightness(${t}%)` }),
|
|
15
|
+
contrast: (t) => ({ filter: `contrast(${t}%)` }),
|
|
16
|
+
grayscale: (t) => ({ filter: `grayscale(${t}%)` }),
|
|
17
|
+
hue: (t) => ({ filter: `hue-rotate(${t}deg)` }),
|
|
18
|
+
saturation: (t) => ({ filter: `saturate(${t}%)` }),
|
|
19
|
+
vignette: (t) => ({
|
|
20
|
+
filter: `contrast(${100 + t * 20}%) brightness(${100 - t * 20}%)`
|
|
21
|
+
}),
|
|
22
|
+
noise: (t) => ({
|
|
23
|
+
filter: `contrast(${100 + t * 40}%) brightness(${100 + t * 20}%)`
|
|
24
|
+
}),
|
|
25
|
+
pixelate: (t) => ({ filter: `contrast(${100 + t * 2}%)` }),
|
|
26
|
+
chromaticAberration: (t) => ({
|
|
27
|
+
filter: `hue-rotate(${t * 10}deg) contrast(110%)`
|
|
28
|
+
}),
|
|
29
|
+
lightLeak: (t) => ({
|
|
30
|
+
filter: `brightness(${100 + t * 50}%) saturate(${100 + t * 30}%)`
|
|
31
|
+
}),
|
|
32
|
+
duotone: (t) => ({
|
|
33
|
+
filter: `sepia(${t * 100}%) hue-rotate(${t * 180}deg)`
|
|
34
|
+
}),
|
|
15
35
|
shakeHorizontalIn: (t) => ({
|
|
16
36
|
transform: `translateX(${t}%)`,
|
|
17
37
|
overflow: "hidden"
|
|
@@ -30,30 +50,30 @@ const I = () => ({
|
|
|
30
50
|
})
|
|
31
51
|
}), j = (t, l = 0) => {
|
|
32
52
|
const r = [], c = t / 5;
|
|
33
|
-
for (let
|
|
34
|
-
r.push(
|
|
53
|
+
for (let a = 0; a < 6; a += 1)
|
|
54
|
+
r.push(a * c + l);
|
|
35
55
|
return r;
|
|
36
56
|
}, T = (t, l, r, c = !1) => {
|
|
37
|
-
const { from:
|
|
57
|
+
const { from: a, to: o, ease: d } = l, n = l.durationInFrames || 30, f = Number(a), i = Number(o), e = Math.max(1, Number(n));
|
|
38
58
|
if (isNaN(f) || isNaN(i))
|
|
39
59
|
return console.error("Invalid animation values:", {
|
|
40
|
-
from:
|
|
60
|
+
from: a,
|
|
41
61
|
to: o,
|
|
42
|
-
animationDurationInFrames:
|
|
62
|
+
animationDurationInFrames: n,
|
|
43
63
|
property: l.property
|
|
44
64
|
}), f;
|
|
45
|
-
|
|
65
|
+
n === void 0 && console.warn(
|
|
46
66
|
`durationInFrames is undefined for animation: ${l.property}. Using 1 frame as default.`
|
|
47
67
|
);
|
|
48
68
|
const s = l.delay || 0, u = c ? [r - e - s, r - s] : [s, s + e];
|
|
49
69
|
if (l.property.includes("shake")) {
|
|
50
|
-
const
|
|
70
|
+
const p = c ? j(
|
|
51
71
|
e,
|
|
52
72
|
r - e - s
|
|
53
73
|
) : j(e, s);
|
|
54
74
|
return R(
|
|
55
75
|
t,
|
|
56
|
-
|
|
76
|
+
p,
|
|
57
77
|
[0, f, i, f, i, 0],
|
|
58
78
|
{
|
|
59
79
|
extrapolateLeft: "clamp",
|
|
@@ -68,45 +88,45 @@ const I = () => ({
|
|
|
68
88
|
easing: d
|
|
69
89
|
});
|
|
70
90
|
}, V = (t, l, r, c) => {
|
|
71
|
-
const { property:
|
|
72
|
-
return (d[
|
|
73
|
-
}, E = (t, l, r, c = !1,
|
|
91
|
+
const { property: a } = t, o = T(l, t, r, c), d = I();
|
|
92
|
+
return (d[a] || d.default)(o);
|
|
93
|
+
}, E = (t, l, r, c = !1, a = !1) => X.useMemo(() => {
|
|
74
94
|
if (t.length === 0) return {};
|
|
75
95
|
const o = t.filter(
|
|
76
96
|
(d) => d.from !== void 0 && d.to !== void 0
|
|
77
97
|
);
|
|
78
|
-
if (o.length !== t.length && console.error("Some animations are invalid and will be ignored"),
|
|
79
|
-
const d = [],
|
|
98
|
+
if (o.length !== t.length && console.error("Some animations are invalid and will be ignored"), a) {
|
|
99
|
+
const d = [], n = {};
|
|
80
100
|
o.reverse().forEach((e) => {
|
|
81
101
|
const s = V(e, r, l, !1);
|
|
82
102
|
if (e.persist === !0 && r - (e.delay || 0) >= e.durationInFrames) {
|
|
83
|
-
const
|
|
84
|
-
Object.keys(h).forEach((
|
|
85
|
-
|
|
86
|
-
[
|
|
87
|
-
} : h :
|
|
103
|
+
const p = e.to, v = I(), h = (v[e.property] || v.default)(p);
|
|
104
|
+
Object.keys(h).forEach(($) => {
|
|
105
|
+
$ === "transform" ? n[$] = n[$] ? {
|
|
106
|
+
[$]: `${n[$][$]} ${h[$]}`
|
|
107
|
+
} : h : n[$] = h;
|
|
88
108
|
});
|
|
89
109
|
}
|
|
90
110
|
d.push(s);
|
|
91
111
|
});
|
|
92
112
|
const i = { ...d.reduce(
|
|
93
113
|
(e, s) => (Object.keys(s).forEach((u) => {
|
|
94
|
-
u === "transform" ? e[u] = e[u] ? `${e[u]} ${s[u]}` : s[u] : e[u] = s[u];
|
|
114
|
+
u === "transform" || u === "filter" ? e[u] = e[u] ? `${e[u]} ${s[u]}` : s[u] : e[u] = s[u];
|
|
95
115
|
}), e),
|
|
96
116
|
{}
|
|
97
117
|
) };
|
|
98
|
-
return Object.keys(
|
|
99
|
-
const s =
|
|
100
|
-
e === "transform" && s
|
|
118
|
+
return Object.keys(n).forEach((e) => {
|
|
119
|
+
const s = n[e];
|
|
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]);
|
|
101
121
|
}), i;
|
|
102
122
|
} else
|
|
103
|
-
return o.map((
|
|
104
|
-
(
|
|
105
|
-
i === "transform" ?
|
|
106
|
-
}),
|
|
123
|
+
return o.map((n) => V(n, r, l, c)).reduce(
|
|
124
|
+
(n, f) => (Object.keys(f).forEach((i) => {
|
|
125
|
+
i === "transform" || i === "filter" ? n[i] = n[i] ? `${n[i]} ${f[i]}` : f[i] : n[i] = f[i];
|
|
126
|
+
}), n),
|
|
107
127
|
{}
|
|
108
128
|
);
|
|
109
|
-
}, [t, r, l, c]),
|
|
129
|
+
}, [t, r, l, c]), A = (t) => t ? Array.isArray(t) ? t : [t] : [], P = (...t) => {
|
|
110
130
|
const l = [];
|
|
111
131
|
return t.forEach((r) => {
|
|
112
132
|
Array.isArray(r) ? l.push(...r) : r && l.push(r);
|
|
@@ -126,80 +146,80 @@ const I = () => ({
|
|
|
126
146
|
// Average the easing functions
|
|
127
147
|
} : o
|
|
128
148
|
) : [...r, c], []);
|
|
129
|
-
},
|
|
149
|
+
}, z = ({
|
|
130
150
|
animationIn: t,
|
|
131
151
|
animationOut: l,
|
|
132
152
|
durationInFrames: r,
|
|
133
153
|
children: c,
|
|
134
|
-
style:
|
|
154
|
+
style: a = {},
|
|
135
155
|
frame: o,
|
|
136
156
|
isTransition: d = !1
|
|
137
157
|
}) => {
|
|
138
158
|
var F;
|
|
139
|
-
const
|
|
140
|
-
|
|
159
|
+
const n = E(
|
|
160
|
+
A(t),
|
|
141
161
|
r,
|
|
142
162
|
o,
|
|
143
163
|
!1
|
|
144
164
|
), f = E(
|
|
145
|
-
|
|
165
|
+
A(l),
|
|
146
166
|
r,
|
|
147
167
|
o,
|
|
148
168
|
!0
|
|
149
169
|
), i = X.useMemo(() => {
|
|
150
|
-
const
|
|
151
|
-
(
|
|
170
|
+
const m = Object.keys(n).length > 0, g = t == null ? void 0 : t.reduce(
|
|
171
|
+
(M, S) => Math.min(M, S.delay || 0),
|
|
152
172
|
1 / 0
|
|
153
|
-
),
|
|
154
|
-
return
|
|
155
|
-
}, [
|
|
173
|
+
), b = o - (g || 0);
|
|
174
|
+
return m && b < 0 ? { visibility: d ? "visible" : "hidden" } : n;
|
|
175
|
+
}, [n, o, t]), e = X.useMemo(() => {
|
|
156
176
|
if (o >= r)
|
|
157
177
|
return { visibility: d ? "visible" : "hidden" };
|
|
158
|
-
const
|
|
159
|
-
if (!
|
|
178
|
+
const m = A(l);
|
|
179
|
+
if (!m || m.length === 0) return {};
|
|
160
180
|
let g = 0;
|
|
161
|
-
|
|
162
|
-
const
|
|
163
|
-
|
|
181
|
+
m.forEach((M) => {
|
|
182
|
+
const S = (M.durationInFrames || 0) + (M.delay || 0);
|
|
183
|
+
S > g && (g = S);
|
|
164
184
|
});
|
|
165
|
-
const
|
|
166
|
-
return o <
|
|
167
|
-
}, [f, o, l, r, d]), u = ((
|
|
168
|
-
const
|
|
185
|
+
const b = Math.max(0, r - g);
|
|
186
|
+
return o < b ? {} : f;
|
|
187
|
+
}, [f, o, l, r, d]), u = ((a == null ? void 0 : a.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), p = u ? parseFloat(u[1]) : 0, v = -p, h = X.useMemo(() => {
|
|
188
|
+
const m = {
|
|
169
189
|
...i
|
|
170
190
|
// , ...timedStyle
|
|
171
191
|
};
|
|
172
|
-
return Object.entries(e).forEach(([g,
|
|
173
|
-
g === "transform" ?
|
|
174
|
-
}),
|
|
192
|
+
return Object.entries(e).forEach(([g, b]) => {
|
|
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
|
+
}), m;
|
|
175
195
|
}, [i, e]);
|
|
176
196
|
if ((F = h.transform) != null && F.includes("rotate")) {
|
|
177
|
-
const
|
|
178
|
-
h.transform =
|
|
197
|
+
const m = h.transform;
|
|
198
|
+
h.transform = m.replace(
|
|
179
199
|
/rotate\(([^)]+)deg\)/,
|
|
180
|
-
(g,
|
|
200
|
+
(g, b) => `rotate(${parseFloat(b) - v}deg)`
|
|
181
201
|
);
|
|
182
202
|
}
|
|
183
|
-
const
|
|
184
|
-
const
|
|
203
|
+
const $ = C(() => {
|
|
204
|
+
const m = h.transform || "", {
|
|
185
205
|
translateX: g,
|
|
186
|
-
translateY:
|
|
187
|
-
scale:
|
|
188
|
-
rotation:
|
|
206
|
+
translateY: b,
|
|
207
|
+
scale: M,
|
|
208
|
+
rotation: S,
|
|
189
209
|
rotateX: O,
|
|
190
210
|
rotateY: H,
|
|
191
211
|
rotateZ: N
|
|
192
|
-
} = D(
|
|
193
|
-
return `${g} ${
|
|
194
|
-
}, [h,
|
|
195
|
-
let
|
|
196
|
-
return
|
|
197
|
-
...
|
|
198
|
-
transform:
|
|
212
|
+
} = D(m);
|
|
213
|
+
return `${g} ${b} ${M} ${S || `rotate(${p}deg)`} ${O} ${H} ${N}`.trim();
|
|
214
|
+
}, [h, p]);
|
|
215
|
+
let y = n;
|
|
216
|
+
return p > 0 && y.transform && y.transform.includes("translateX") && (y = {
|
|
217
|
+
...y,
|
|
218
|
+
transform: y.transform.replace(
|
|
199
219
|
/translateX\(([^)]+)\)/g,
|
|
200
|
-
(
|
|
220
|
+
(m, g) => `translateX(${parseFloat(g)}%)`
|
|
201
221
|
)
|
|
202
|
-
}), /* @__PURE__ */
|
|
222
|
+
}), /* @__PURE__ */ x(
|
|
203
223
|
"div",
|
|
204
224
|
{
|
|
205
225
|
style: {
|
|
@@ -209,15 +229,15 @@ const I = () => ({
|
|
|
209
229
|
display: "flex",
|
|
210
230
|
justifyContent: "center"
|
|
211
231
|
},
|
|
212
|
-
children: /* @__PURE__ */
|
|
232
|
+
children: /* @__PURE__ */ x(
|
|
213
233
|
"div",
|
|
214
234
|
{
|
|
215
235
|
style: {
|
|
216
|
-
...
|
|
236
|
+
...a,
|
|
217
237
|
...h,
|
|
218
238
|
rotate: `${v}deg`,
|
|
219
239
|
overflow: "visible",
|
|
220
|
-
transform:
|
|
240
|
+
transform: $,
|
|
221
241
|
pointerEvents: "none",
|
|
222
242
|
background: Object.keys(h).length === 0 ? "transparent" : h.backgroundColor
|
|
223
243
|
},
|
|
@@ -227,7 +247,7 @@ const I = () => ({
|
|
|
227
247
|
}
|
|
228
248
|
);
|
|
229
249
|
}, D = (t) => {
|
|
230
|
-
let l = "", r = "", c = "scale(1)",
|
|
250
|
+
let l = "", r = "", c = "scale(1)", a = "", o = "", d = "", n = "";
|
|
231
251
|
const f = t.match(/translateX\([^)]+\)/g);
|
|
232
252
|
f && (l = f[f.length - 1]);
|
|
233
253
|
const i = t.match(/translateY\([^)]+\)/g);
|
|
@@ -235,33 +255,33 @@ const I = () => ({
|
|
|
235
255
|
const e = t.match(/scale\([^)]+\)/g);
|
|
236
256
|
e && (c = e[e.length - 1]);
|
|
237
257
|
const s = t.match(/rotate\([^)]+\)/g);
|
|
238
|
-
s && (
|
|
258
|
+
s && (a = s[s.length - 1]);
|
|
239
259
|
const u = t.match(/rotateX\([^)]+\)/g);
|
|
240
260
|
u && (o = u[u.length - 1]);
|
|
241
|
-
const
|
|
242
|
-
|
|
261
|
+
const p = t.match(/rotateY\([^)]+\)/g);
|
|
262
|
+
p && (d = p[p.length - 1]);
|
|
243
263
|
const v = t.match(/rotateZ\([^)]+\)/g);
|
|
244
|
-
return v && (
|
|
264
|
+
return v && (n = v[v.length - 1]), { translateX: l, translateY: r, scale: c, rotation: a, rotateX: o, rotateY: d, rotateZ: n };
|
|
245
265
|
}, W = ({
|
|
246
266
|
animationTimed: t,
|
|
247
267
|
durationInFrames: l,
|
|
248
268
|
children: r,
|
|
249
269
|
style: c = {},
|
|
250
|
-
frame:
|
|
270
|
+
frame: a
|
|
251
271
|
}) => {
|
|
252
272
|
var u;
|
|
253
273
|
const o = E(
|
|
254
|
-
|
|
274
|
+
A(t),
|
|
255
275
|
l,
|
|
256
|
-
|
|
276
|
+
a,
|
|
257
277
|
!1,
|
|
258
278
|
!0
|
|
259
|
-
),
|
|
279
|
+
), n = ((c == null ? void 0 : c.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), f = n ? parseFloat(n[1]) : 0, i = -f, e = X.useMemo(() => ({
|
|
260
280
|
...o
|
|
261
281
|
}), [o]);
|
|
262
282
|
if ((u = e.transform) != null && u.includes("rotate")) {
|
|
263
|
-
const
|
|
264
|
-
e.transform =
|
|
283
|
+
const p = e.transform;
|
|
284
|
+
e.transform = p.replace(
|
|
265
285
|
/rotate\(([^)]+)deg\)/,
|
|
266
286
|
(v, h) => `rotate(${parseFloat(h) - i}deg)`
|
|
267
287
|
);
|
|
@@ -271,9 +291,9 @@ const I = () => ({
|
|
|
271
291
|
...s,
|
|
272
292
|
transform: s.transform.replace(
|
|
273
293
|
/translateX\(([^)]+)\)/g,
|
|
274
|
-
(
|
|
294
|
+
(p, v) => `translateX(${parseFloat(v)}px)`
|
|
275
295
|
)
|
|
276
|
-
}), /* @__PURE__ */
|
|
296
|
+
}), /* @__PURE__ */ x(
|
|
277
297
|
"div",
|
|
278
298
|
{
|
|
279
299
|
style: {
|
|
@@ -283,7 +303,7 @@ const I = () => ({
|
|
|
283
303
|
width: c.width,
|
|
284
304
|
...s
|
|
285
305
|
},
|
|
286
|
-
children: /* @__PURE__ */
|
|
306
|
+
children: /* @__PURE__ */ x(
|
|
287
307
|
"div",
|
|
288
308
|
{
|
|
289
309
|
style: {
|
|
@@ -301,18 +321,18 @@ const I = () => ({
|
|
|
301
321
|
)
|
|
302
322
|
}
|
|
303
323
|
);
|
|
304
|
-
},
|
|
324
|
+
}, Y = (t) => {
|
|
305
325
|
if (typeof (t == null ? void 0 : t.ease) == "function") return t.ease;
|
|
306
326
|
switch (t == null ? void 0 : t.easing) {
|
|
307
327
|
case "ease-in":
|
|
308
|
-
return
|
|
328
|
+
return w.in(w.cubic);
|
|
309
329
|
case "ease-out":
|
|
310
|
-
return
|
|
330
|
+
return w.out(w.cubic);
|
|
311
331
|
case "ease-in-out":
|
|
312
|
-
return
|
|
332
|
+
return w.inOut(w.cubic);
|
|
313
333
|
case "linear":
|
|
314
334
|
default:
|
|
315
|
-
return
|
|
335
|
+
return w.linear;
|
|
316
336
|
}
|
|
317
337
|
}, B = ({
|
|
318
338
|
children: t,
|
|
@@ -321,9 +341,9 @@ const I = () => ({
|
|
|
321
341
|
keyframeAnimations: c
|
|
322
342
|
}) => {
|
|
323
343
|
var v, h;
|
|
324
|
-
const
|
|
325
|
-
let
|
|
326
|
-
return (l || 0) >= 0 && (
|
|
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, d = ((h = r.details.crop) == null ? void 0 : h.height) || r.details.height;
|
|
345
|
+
let n = 1, f = n, i = d, e = 0, s = 0, u = o, p;
|
|
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 = d * 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))), u = o, i = d, e = 0, s = 0, p = `circle(${Math.max(o, d) * 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))), u = o * f, i = d * f, e = o - u, s = 0), /* @__PURE__ */ x(
|
|
327
347
|
"div",
|
|
328
348
|
{
|
|
329
349
|
style: {
|
|
@@ -332,7 +352,7 @@ const I = () => ({
|
|
|
332
352
|
position: "relative",
|
|
333
353
|
overflow: f < 1 ? "hidden" : "visible"
|
|
334
354
|
},
|
|
335
|
-
children: /* @__PURE__ */
|
|
355
|
+
children: /* @__PURE__ */ x(
|
|
336
356
|
"div",
|
|
337
357
|
{
|
|
338
358
|
style: {
|
|
@@ -342,7 +362,7 @@ const I = () => ({
|
|
|
342
362
|
width: u,
|
|
343
363
|
height: i,
|
|
344
364
|
overflow: f < 1 ? "hidden" : "visible",
|
|
345
|
-
clipPath:
|
|
365
|
+
clipPath: p
|
|
346
366
|
},
|
|
347
367
|
children: t
|
|
348
368
|
}
|
|
@@ -351,11 +371,11 @@ const I = () => ({
|
|
|
351
371
|
);
|
|
352
372
|
};
|
|
353
373
|
export {
|
|
354
|
-
|
|
374
|
+
z as BoxAnim,
|
|
355
375
|
W as ContentAnim,
|
|
356
376
|
B as MaskAnim,
|
|
357
|
-
|
|
358
|
-
|
|
377
|
+
P as combine,
|
|
378
|
+
A as combineAnimations,
|
|
359
379
|
D as extractTransformations,
|
|
360
380
|
E as useAnimation
|
|
361
381
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(v,
|
|
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 a=0;a<6;a+=1)r.push(a*c+i);return r},C=(t,i,r,c=!1)=>{const{from:a,to:n,ease:d}=i,o=i.durationInFrames||30,f=Number(a),l=Number(n),e=Math.max(1,Number(o));if(isNaN(f)||isNaN(l))return console.error("Invalid animation values:",{from:a,to:n,animationDurationInFrames:o,property:i.property}),f;o===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:a}=t,n=C(i,t,r,c),d=F();return(d[a]||d.default)(n)},j=(t,i,r,c=!1,a=!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"),a){const d=[],o={};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"?o[b]=o[b]?{[b]:`${o[b][b]} ${h[b]}`}:h:o[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(o).forEach(e=>{const s=o[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(o=>T(o,r,i,c)).reduce((o,f)=>(Object.keys(f).forEach(l=>{l==="transform"||l==="filter"?o[l]=o[l]?`${o[l]} ${f[l]}`:f[l]:o[l]=f[l]}),o),{})},[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:a={},frame:n,isTransition:d=!1})=>{var I;const o=j(A(t),r,n,!1),f=j(A(i),r,n,!0),l=x.useMemo(()=>{const m=Object.keys(o).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"}:o},[o,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=((a==null?void 0:a.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:_}=O(m);return`${g} ${M} ${y} ${X||`rotate(${p}deg)`} ${P} ${Z} ${_}`.trim()},[h,p]);let E=o;return p>0&&E.transform&&E.transform.includes("translateX")&&(E={...E,transform:E.transform.replace(/translateX\(([^)]+)\)/g,(m,g)=>`translateX(${parseFloat(g)}%)`)}),S.jsx("div",{style:{transform:"scale(1)",overflow:h.overflow||"visible",pointerEvents:"none",display:"flex",justifyContent:"center"},children:S.jsx("div",{style:{...a,...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)",a="",n="",d="",o="";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&&(a=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 $&&(o=$[$.length-1]),{translateX:i,translateY:r,scale:c,rotation:a,rotateX:n,rotateY:d,rotateZ:o}},R=({animationTimed:t,durationInFrames:i,children:r,style:c={},frame:a})=>{var u;const n=j(A(t),i,a,!1,!0),o=((c==null?void 0:c.transform)||"").match(/rotate\((-?[\d.]+)deg\)/),f=o?parseFloat(o[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}},D=({children:t,frame:i,item:r,keyframeAnimations:c})=>{var $,h;const a=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 o=1,f=o,l=d,e=0,s=0,u=n,p;return(i||0)>=0&&(a==null?void 0:a.property)==="maskRevealIn"?(o=Math.min((i||0)/a.durationInFrames,1),f=Math.max(0,Math.min(1,Y(a)(o))),l=d*f):(i||0)>=0&&(a==null?void 0:a.property)==="maskRevealCenterIn"?(o=Math.min((i||0)/a.durationInFrames,1),f=Math.max(0,Math.min(1,Y(a)(o))),u=n,l=d,e=0,s=0,p=`circle(${Math.max(n,d)*f}px at 50% 50%)`):(i||0)>=0&&(a==null?void 0:a.property)==="maskRevealCornerIn"&&(o=Math.min((i||0)/a.durationInFrames,1),f=Math.max(0,Math.min(1,Y(a)(o))),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=R,v.MaskAnim=D,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": "
|
|
3
|
+
"version": "9.0.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"typescript": "^5.3.3",
|
|
27
27
|
"vite": "^5.2.0",
|
|
28
28
|
"vite-plugin-dts": "^3.9.1",
|
|
29
|
-
"@cliquify.me/types": "
|
|
29
|
+
"@cliquify.me/types": "8.0.0",
|
|
30
30
|
"@cliquify.me/typescript-config": "0.0.2"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"@designcombo/events": "^1.0.2",
|
|
40
40
|
"react": "^18.2.0",
|
|
41
41
|
"remotion": "4.0.221",
|
|
42
|
-
"@cliquify.me/types": "
|
|
42
|
+
"@cliquify.me/types": "8.0.0"
|
|
43
43
|
},
|
|
44
44
|
"scripts": {
|
|
45
45
|
"dev": "vite",
|