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