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