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