@cliquify.me/animations 6.0.13 → 6.0.14
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 +69 -69
- package/dist/index.umd.js +1 -1
- package/package.json +3 -3
package/dist/index.es.js
CHANGED
|
@@ -29,27 +29,27 @@ const A = () => ({
|
|
|
29
29
|
overflow: "hidden"
|
|
30
30
|
})
|
|
31
31
|
}), j = (t, a = 0) => {
|
|
32
|
-
const
|
|
32
|
+
const r = [], s = t / 5;
|
|
33
33
|
for (let l = 0; l < 6; l += 1)
|
|
34
|
-
|
|
35
|
-
return
|
|
36
|
-
}, N = (t, a,
|
|
37
|
-
const { from: l, to: o, ease: f } = a,
|
|
34
|
+
r.push(l * s + a);
|
|
35
|
+
return r;
|
|
36
|
+
}, N = (t, a, r, s = !1) => {
|
|
37
|
+
const { from: l, to: o, ease: f } = a, e = a.durationInFrames || 30, d = Number(l), i = Number(o), n = Math.max(1, Number(e));
|
|
38
38
|
if (isNaN(d) || isNaN(i))
|
|
39
39
|
return console.error("Invalid animation values:", {
|
|
40
40
|
from: l,
|
|
41
41
|
to: o,
|
|
42
|
-
animationDurationInFrames:
|
|
42
|
+
animationDurationInFrames: e,
|
|
43
43
|
property: a.property
|
|
44
44
|
}), d;
|
|
45
|
-
|
|
45
|
+
e === void 0 && console.warn(
|
|
46
46
|
`durationInFrames is undefined for animation: ${a.property}. Using 1 frame as default.`
|
|
47
47
|
);
|
|
48
|
-
const c = s ? [
|
|
48
|
+
const c = s ? [r - e, r] : [0, n];
|
|
49
49
|
if (a.property.includes("shake")) {
|
|
50
50
|
const p = s ? j(
|
|
51
51
|
n,
|
|
52
|
-
|
|
52
|
+
r - e
|
|
53
53
|
) : j(n);
|
|
54
54
|
return R(
|
|
55
55
|
t,
|
|
@@ -67,31 +67,31 @@ const A = () => ({
|
|
|
67
67
|
extrapolateRight: "clamp",
|
|
68
68
|
easing: f
|
|
69
69
|
});
|
|
70
|
-
}, E = (t, a,
|
|
70
|
+
}, E = (t, a, r, s) => {
|
|
71
71
|
const l = a - (t.delay || 0) * (s ? -1 : 1) + (s ? 1 : 0), { property: o, durationInFrames: f } = t;
|
|
72
72
|
if (!s && l > f) return {};
|
|
73
|
-
const
|
|
73
|
+
const e = N(
|
|
74
74
|
l,
|
|
75
75
|
t,
|
|
76
|
-
|
|
76
|
+
r,
|
|
77
77
|
s
|
|
78
78
|
), d = A();
|
|
79
|
-
return (d[o] || d.default)(
|
|
80
|
-
}, M = (t, a,
|
|
79
|
+
return (d[o] || d.default)(e);
|
|
80
|
+
}, M = (t, a, r, s = !1, l = !1) => X.useMemo(() => {
|
|
81
81
|
if (t.length === 0) return {};
|
|
82
82
|
const o = t.filter(
|
|
83
83
|
(f) => f.from !== void 0 && f.to !== void 0
|
|
84
84
|
);
|
|
85
85
|
if (o.length !== t.length && console.error("Some animations are invalid and will be ignored"), l) {
|
|
86
|
-
const f = [],
|
|
86
|
+
const f = [], e = {};
|
|
87
87
|
o.reverse().forEach((n) => {
|
|
88
|
-
const c = E(n,
|
|
89
|
-
if (n.persist === !0 &&
|
|
88
|
+
const c = E(n, r, a, !1);
|
|
89
|
+
if (n.persist === !0 && r - (n.delay || 0) >= n.durationInFrames) {
|
|
90
90
|
const v = n.to, g = A(), h = (g[n.property] || g.default)(v);
|
|
91
|
-
Object.keys(h).forEach((
|
|
92
|
-
|
|
93
|
-
[
|
|
94
|
-
} : h :
|
|
91
|
+
Object.keys(h).forEach(($) => {
|
|
92
|
+
$ === "transform" ? e[$] = e[$] ? {
|
|
93
|
+
[$]: `${e[$][$]} ${h[$]}`
|
|
94
|
+
} : h : e[$] = h;
|
|
95
95
|
});
|
|
96
96
|
}
|
|
97
97
|
f.push(c);
|
|
@@ -102,24 +102,24 @@ const A = () => ({
|
|
|
102
102
|
}), n),
|
|
103
103
|
{}
|
|
104
104
|
) };
|
|
105
|
-
return Object.keys(
|
|
106
|
-
const c =
|
|
105
|
+
return Object.keys(e).forEach((n) => {
|
|
106
|
+
const c = e[n];
|
|
107
107
|
n === "transform" && c.transform ? i.transform = i.transform ? `${i.transform} ${c.transform}` : c.transform : c[n] !== void 0 && (i[n] = c[n]);
|
|
108
108
|
}), i;
|
|
109
109
|
} else
|
|
110
|
-
return o.map((
|
|
111
|
-
(
|
|
112
|
-
i === "transform" ?
|
|
113
|
-
}),
|
|
110
|
+
return o.map((e) => E(e, r, a, s)).reduce(
|
|
111
|
+
(e, d) => (Object.keys(d).forEach((i) => {
|
|
112
|
+
i === "transform" ? e[i] = e[i] ? `${e[i]} ${d[i]}` : d[i] : e[i] = d[i];
|
|
113
|
+
}), e),
|
|
114
114
|
{}
|
|
115
115
|
);
|
|
116
|
-
}, [t,
|
|
116
|
+
}, [t, r, a, s]), F = (t) => t ? Array.isArray(t) ? t : [t] : [], z = (...t) => {
|
|
117
117
|
const a = [];
|
|
118
|
-
return t.forEach((
|
|
119
|
-
Array.isArray(
|
|
120
|
-
}), a.filter((
|
|
118
|
+
return t.forEach((r) => {
|
|
119
|
+
Array.isArray(r) ? a.push(...r) : r && a.push(r);
|
|
120
|
+
}), a.filter((r) => r !== void 0).reduce((r, s) => r.find(
|
|
121
121
|
(o) => o.property === s.property
|
|
122
|
-
) ?
|
|
122
|
+
) ? r.map(
|
|
123
123
|
(o) => o.property === s.property ? {
|
|
124
124
|
...o,
|
|
125
125
|
from: Math.min(o.from, s.from),
|
|
@@ -132,71 +132,71 @@ const A = () => ({
|
|
|
132
132
|
ease: (f) => (o.ease(f) + s.ease(f)) / 2
|
|
133
133
|
// Average the easing functions
|
|
134
134
|
} : o
|
|
135
|
-
) : [...
|
|
135
|
+
) : [...r, s], []);
|
|
136
136
|
}, L = ({
|
|
137
137
|
animationIn: t,
|
|
138
138
|
animationOut: a,
|
|
139
|
-
durationInFrames:
|
|
139
|
+
durationInFrames: r,
|
|
140
140
|
children: s,
|
|
141
141
|
style: l = {},
|
|
142
142
|
frame: o,
|
|
143
143
|
isTransition: f = !1
|
|
144
144
|
}) => {
|
|
145
145
|
var Y;
|
|
146
|
-
const
|
|
146
|
+
const e = M(
|
|
147
147
|
F(t),
|
|
148
|
-
|
|
148
|
+
r,
|
|
149
149
|
o,
|
|
150
150
|
!1
|
|
151
151
|
), d = M(
|
|
152
152
|
F(a),
|
|
153
|
-
|
|
153
|
+
r,
|
|
154
154
|
o,
|
|
155
155
|
!0
|
|
156
156
|
), i = X.useMemo(() => {
|
|
157
|
-
const u = Object.keys(
|
|
157
|
+
const u = Object.keys(e).length > 0, m = t == null ? void 0 : t.reduce(
|
|
158
158
|
(x, S) => Math.min(x, S.delay || 0),
|
|
159
159
|
1 / 0
|
|
160
|
-
),
|
|
161
|
-
return u &&
|
|
162
|
-
}, [
|
|
160
|
+
), b = o - (m || 0);
|
|
161
|
+
return u && b < 0 ? { visibility: f ? "visible" : "hidden" } : e;
|
|
162
|
+
}, [e, o, t]), n = X.useMemo(() => {
|
|
163
163
|
const u = (a == null ? void 0 : a.length) > 0, m = a == null ? void 0 : a.reduce(
|
|
164
|
-
(
|
|
164
|
+
(b, x) => {
|
|
165
165
|
const S = x.delay || 0;
|
|
166
|
-
return Math.max(
|
|
166
|
+
return Math.max(b, S);
|
|
167
167
|
},
|
|
168
168
|
0
|
|
169
169
|
);
|
|
170
|
-
return u && o >
|
|
170
|
+
return u && o > r - m ? { visibility: f ? "visible" : "hidden" } : d;
|
|
171
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
172
|
const u = {
|
|
173
173
|
...i
|
|
174
174
|
// , ...timedStyle
|
|
175
175
|
};
|
|
176
|
-
return Object.entries(n).forEach(([m,
|
|
177
|
-
m === "transform" ? u[m] = `${u[m] || ""} ${
|
|
176
|
+
return Object.entries(n).forEach(([m, b]) => {
|
|
177
|
+
m === "transform" ? u[m] = `${u[m] || ""} ${b || ""}`.trim() : m in u && typeof u[m] == "number" && typeof b == "number" ? u[m] = u[m] * b : u[m] = b;
|
|
178
178
|
}), u;
|
|
179
179
|
}, [i, n]);
|
|
180
180
|
if ((Y = h.transform) != null && Y.includes("rotate")) {
|
|
181
181
|
const u = h.transform;
|
|
182
182
|
h.transform = u.replace(
|
|
183
183
|
/rotate\(([^)]+)deg\)/,
|
|
184
|
-
(m,
|
|
184
|
+
(m, b) => `rotate(${parseFloat(b) - g}deg)`
|
|
185
185
|
);
|
|
186
186
|
}
|
|
187
|
-
const
|
|
187
|
+
const $ = H(() => {
|
|
188
188
|
const u = h.transform || "", {
|
|
189
189
|
translateX: m,
|
|
190
|
-
translateY:
|
|
190
|
+
translateY: b,
|
|
191
191
|
scale: x,
|
|
192
192
|
rotation: S,
|
|
193
193
|
rotateX: V,
|
|
194
194
|
rotateY: I,
|
|
195
195
|
rotateZ: C
|
|
196
196
|
} = T(u);
|
|
197
|
-
return `${m} ${
|
|
197
|
+
return `${m} ${b} ${x} ${S || `rotate(${v}deg)`} ${V} ${I} ${C}`.trim();
|
|
198
198
|
}, [h, v]);
|
|
199
|
-
let y =
|
|
199
|
+
let y = e;
|
|
200
200
|
return v > 0 && y.transform && y.transform.includes("translateX") && (y = {
|
|
201
201
|
...y,
|
|
202
202
|
transform: y.transform.replace(
|
|
@@ -223,7 +223,7 @@ const A = () => ({
|
|
|
223
223
|
...h,
|
|
224
224
|
rotate: `${g}deg`,
|
|
225
225
|
overflow: "visible",
|
|
226
|
-
transform:
|
|
226
|
+
transform: $,
|
|
227
227
|
pointerEvents: "none",
|
|
228
228
|
background: Object.keys(h).length === 0 ? "transparent" : h.backgroundColor
|
|
229
229
|
},
|
|
@@ -233,11 +233,11 @@ const A = () => ({
|
|
|
233
233
|
}
|
|
234
234
|
);
|
|
235
235
|
}, T = (t) => {
|
|
236
|
-
let a = "",
|
|
236
|
+
let a = "", r = "", s = "scale(1)", l = "", o = "", f = "", e = "";
|
|
237
237
|
const d = t.match(/translateX\([^)]+\)/);
|
|
238
238
|
d && (a = d[0]);
|
|
239
239
|
const i = t.match(/translateY\([^)]+\)/);
|
|
240
|
-
i && (
|
|
240
|
+
i && (r = i[0]);
|
|
241
241
|
const n = t.match(/scale\([^)]+\)/);
|
|
242
242
|
n && (s = n[0]);
|
|
243
243
|
const c = t.match(/rotate\([^)]+\)/);
|
|
@@ -247,11 +247,11 @@ const A = () => ({
|
|
|
247
247
|
const v = t.match(/rotateY\([^)]+\)/);
|
|
248
248
|
v && (f = v[0]);
|
|
249
249
|
const g = t.match(/rotateZ\([^)]+\)/);
|
|
250
|
-
return g && (
|
|
250
|
+
return g && (e = g[0]), { translateX: a, translateY: r, scale: s, rotation: l, rotateX: o, rotateY: f, rotateZ: e };
|
|
251
251
|
}, W = ({
|
|
252
252
|
animationTimed: t,
|
|
253
253
|
durationInFrames: a,
|
|
254
|
-
children:
|
|
254
|
+
children: r,
|
|
255
255
|
style: s = {},
|
|
256
256
|
frame: l
|
|
257
257
|
}) => {
|
|
@@ -262,7 +262,7 @@ const A = () => ({
|
|
|
262
262
|
l,
|
|
263
263
|
!1,
|
|
264
264
|
!0
|
|
265
|
-
),
|
|
265
|
+
), e = ((s == null ? void 0 : s.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), d = e ? parseFloat(e[1]) : 0, i = -d, n = X.useMemo(() => ({
|
|
266
266
|
...o
|
|
267
267
|
}), [o]);
|
|
268
268
|
if ((p = n.transform) != null && p.includes("rotate")) {
|
|
@@ -302,7 +302,7 @@ const A = () => ({
|
|
|
302
302
|
alignItems: "center",
|
|
303
303
|
justifyContent: "center"
|
|
304
304
|
},
|
|
305
|
-
children:
|
|
305
|
+
children: r
|
|
306
306
|
}
|
|
307
307
|
)
|
|
308
308
|
}
|
|
@@ -310,21 +310,21 @@ const A = () => ({
|
|
|
310
310
|
}, B = ({
|
|
311
311
|
children: t,
|
|
312
312
|
frame: a,
|
|
313
|
-
item:
|
|
313
|
+
item: r,
|
|
314
314
|
keyframeAnimations: s
|
|
315
315
|
}) => {
|
|
316
316
|
var p, v;
|
|
317
317
|
const l = s == null ? void 0 : s.find(
|
|
318
318
|
(g) => g.property.includes("maskReveal")
|
|
319
|
-
), o = ((p =
|
|
320
|
-
let
|
|
321
|
-
if ((a || 0) -
|
|
322
|
-
|
|
323
|
-
else if ((a || 0) -
|
|
324
|
-
|
|
319
|
+
), o = ((p = r.details.crop) == null ? void 0 : p.width) || r.details.width, f = ((v = r.details.crop) == null ? void 0 : v.height) || r.details.height;
|
|
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
325
|
const g = o / 2, h = f / 2;
|
|
326
|
-
c = o, d = f *
|
|
327
|
-
} else (a || 0) -
|
|
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
328
|
return /* @__PURE__ */ w(
|
|
329
329
|
"div",
|
|
330
330
|
{
|
|
@@ -332,7 +332,7 @@ const A = () => ({
|
|
|
332
332
|
width: o,
|
|
333
333
|
height: f,
|
|
334
334
|
position: "relative",
|
|
335
|
-
overflow: "hidden"
|
|
335
|
+
overflow: e < 1 ? "hidden" : "visible"
|
|
336
336
|
},
|
|
337
337
|
children: /* @__PURE__ */ w(
|
|
338
338
|
"div",
|
|
@@ -343,7 +343,7 @@ const A = () => ({
|
|
|
343
343
|
top: n,
|
|
344
344
|
width: c,
|
|
345
345
|
height: d,
|
|
346
|
-
overflow: "hidden"
|
|
346
|
+
overflow: e < 1 ? "hidden" : "visible"
|
|
347
347
|
},
|
|
348
348
|
children: t
|
|
349
349
|
}
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
|
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 r=[],s=t/5;for(let l=0;l<6;l+=1)r.push(l*s+a);return r},C=(t,a,r,s=!1)=>{const{from:l,to:o,ease:f}=a,e=a.durationInFrames||30,d=Number(l),i=Number(o),n=Math.max(1,Number(e));if(isNaN(d)||isNaN(i))return console.error("Invalid animation values:",{from:l,to:o,animationDurationInFrames:e,property:a.property}),d;e===void 0&&console.warn(`durationInFrames is undefined for animation: ${a.property}. Using 1 frame as default.`);const c=s?[r-e,r]:[0,n];if(a.property.includes("shake")){const u=s?E(n,r-e):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,r,s)=>{const l=a-(t.delay||0)*(s?-1:1)+(s?1:0),{property:o,durationInFrames:f}=t;if(!s&&l>f)return{};const e=C(l,t,r,s),d=Y();return(d[o]||d.default)(e)},j=(t,a,r,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=[],e={};o.reverse().forEach(n=>{const c=V(n,r,a,!1);if(n.persist===!0&&r-(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"?e[y]=e[y]?{[y]:`${e[y][y]} ${h[y]}`}:h:e[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(e).forEach(n=>{const c=e[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(e=>V(e,r,a,s)).reduce((e,d)=>(Object.keys(d).forEach(i=>{i==="transform"?e[i]=e[i]?`${e[i]} ${d[i]}`:d[i]:e[i]=d[i]}),e),{})},[t,r,a,s]),A=t=>t?Array.isArray(t)?t:[t]:[],H=(...t)=>{const a=[];return t.forEach(r=>{Array.isArray(r)?a.push(...r):r&&a.push(r)}),a.filter(r=>r!==void 0).reduce((r,s)=>r.find(o=>o.property===s.property)?r.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):[...r,s],[])},N=({animationIn:t,animationOut:a,durationInFrames:r,children:s,style:l={},frame:o,isTransition:f=!1})=>{var T;const e=j(A(t),r,o,!1),d=j(A(a),r,o,!0),i=w.useMemo(()=>{const p=Object.keys(e).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"}:e},[e,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>r-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=e;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="",r="",s="scale(1)",l="",o="",f="",e="";const d=t.match(/translateX\([^)]+\)/);d&&(a=d[0]);const i=t.match(/translateY\([^)]+\)/);i&&(r=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&&(e=g[0]),{translateX:a,translateY:r,scale:s,rotation:l,rotateX:o,rotateY:f,rotateZ:e}},R=({animationTimed:t,durationInFrames:a,children:r,style:s={},frame:l})=>{var u;const o=j(A(t),a,l,!1,!0),e=((s==null?void 0:s.transform)||"").match(/rotate\((-?[\d.]+)deg\)/),d=e?parseFloat(e[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:r})})},D=({children:t,frame:a,item:r,keyframeAnimations:s})=>{var u,v;const l=s==null?void 0:s.find(g=>g.property.includes("maskReveal")),o=((u=r.details.crop)==null?void 0:u.width)||r.details.width,f=((v=r.details.crop)==null?void 0:v.height)||r.details.height;let e=1,d=f,i=0,n=0,c=o;if((a||0)-r.display.from>=0&&(l==null?void 0:l.property)==="maskRevealIn")e=Math.min((a||0)/l.durationInFrames,1),d=f-f*(1-e);else if((a||0)-r.display.from>=0&&(l==null?void 0:l.property)==="maskRevealCenterIn"){e=Math.min((a||0)/l.durationInFrames,1);const g=o/2,h=f/2;c=o,d=f*e,i=g-c/2,n=h-d/2}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);return S.jsx("div",{style:{width:o,height:f,position:"relative",overflow:e<1?"hidden":"visible"},children:S.jsx("div",{style:{position:"absolute",left:i,top:n,width:c,height:d,overflow:e<1?"hidden":"visible"},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.14",
|
|
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.11",
|
|
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.11"
|
|
43
43
|
},
|
|
44
44
|
"scripts": {
|
|
45
45
|
"dev": "vite",
|