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