@cliquify.me/animations 6.0.9 → 6.0.11

package/dist/Animated.d.ts

@@ -16,6 +16,7 @@ export interface AnimatedProps {
     className?: string;
     style?: React.CSSProperties;
     frame: number;
+    isTransition?: boolean;
 }
 export declare const BoxAnim: React.FC<AnimatedProps>;
 export declare const combine: (...animations: (Animation | Animation[] | undefined)[]) => Animation[];

package/dist/index.es.js

@@ -1,7 +1,7 @@
-import { jsx as w } from "react/jsx-runtime";
-import S, { useMemo as V } from "react";
-import { interpolate as Y } from "remotion";
-const E = () => ({
+import { jsx as x } from "react/jsx-runtime";
+import M, { useMemo as I } from "react";
+import { interpolate as R } from "remotion";
+const A = () => ({
   scale: (t) => ({ transform: `scale(${t})` }),
   opacity: (t) => ({ opacity: t }),
   translateX: (t) => ({ transform: `translateX(${t}px)` }),
@@ -25,259 +25,260 @@ const E = () => ({
     transform: `translateY(${t}px)`,
     overflow: "hidden"
   })
-}), R = (t, n = 0) => {
+}), j = (t, a = 0) => {
   const e = [], s = t / 5;
   for (let l = 0; l < 6; l += 1)
-    e.push(l * s + n);
+    e.push(l * s + a);
   return e;
-}, I = (t, n, e, s = !1) => {
-  const { from: l, to: r, ease: i } = n, o = n.durationInFrames || 30, f = Number(l), c = Number(r), a = Math.max(1, Number(o));
-  if (isNaN(f) || isNaN(c))
+}, C = (t, a, e, s = !1) => {
+  const { from: l, to: o, ease: c } = a, r = a.durationInFrames || 30, f = Number(l), i = Number(o), n = Math.max(1, Number(r));
+  if (isNaN(f) || isNaN(i))
     return console.error("Invalid animation values:", {
       from: l,
-      to: r,
-      animationDurationInFrames: o,
-      property: n.property
+      to: o,
+      animationDurationInFrames: r,
+      property: a.property
     }), f;
-  o === void 0 && console.warn(
-    `durationInFrames is undefined for animation: ${n.property}. Using 1 frame as default.`
+  r === void 0 && console.warn(
+    `durationInFrames is undefined for animation: ${a.property}. Using 1 frame as default.`
   );
-  const d = s ? [e - o, e] : [0, a];
-  if (n.property.includes("shake")) {
-    const p = s ? R(
-      a,
-      e - o
-    ) : R(a);
-    return Y(
+  const d = s ? [e - r, e] : [0, n];
+  if (a.property.includes("shake")) {
+    const u = s ? j(
+      n,
+      e - r
+    ) : j(n);
+    return R(
       t,
-      p,
-      [0, f, c, f, c, 0],
+      u,
+      [0, f, i, f, i, 0],
       {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp",
-        easing: i
+        easing: c
       }
     );
   }
-  return Y(t, d, [f, c], {
+  return R(t, d, [f, i], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
-    easing: i
+    easing: c
   });
-}, j = (t, n, e, s) => {
-  const l = n - (t.delay || 0) * (s ? -1 : 1) + (s ? 1 : 0), { property: r, durationInFrames: i } = t;
-  if (!s && l > i) return {};
-  const o = I(
+}, E = (t, a, e, s) => {
+  const l = a - (t.delay || 0) * (s ? -1 : 1) + (s ? 1 : 0), { property: o, durationInFrames: c } = t;
+  if (!s && l > c) return {};
+  const r = C(
     l,
     t,
     e,
     s
-  ), f = E();
-  return (f[r] || f.default)(o);
-}, M = (t, n, e, s = !1, l = !1) => S.useMemo(() => {
+  ), f = A();
+  return (f[o] || f.default)(r);
+}, F = (t, a, e, s = !1, l = !1) => M.useMemo(() => {
   if (t.length === 0) return {};
-  const r = t.filter(
-    (i) => i.from !== void 0 && i.to !== void 0
+  const o = t.filter(
+    (c) => c.from !== void 0 && c.to !== void 0
   );
-  if (r.length !== t.length && console.error("Some animations are invalid and will be ignored"), l) {
-    const i = [], o = {};
-    r.reverse().forEach((a) => {
-      const d = j(a, e, n, !1);
-      if (a.persist === !0 && e - (a.delay || 0) >= a.durationInFrames) {
-        const $ = a.to, u = E(), b = (u[a.property] || u.default)($);
-        Object.keys(b).forEach((h) => {
-          h === "transform" ? o[h] = o[h] ? {
-            [h]: `${o[h][h]} ${b[h]}`
-          } : b : o[h] = b;
+  if (o.length !== t.length && console.error("Some animations are invalid and will be ignored"), l) {
+    const c = [], r = {};
+    o.reverse().forEach((n) => {
+      const d = E(n, e, a, !1);
+      if (n.persist === !0 && e - (n.delay || 0) >= n.durationInFrames) {
+        const v = n.to, g = A(), p = (g[n.property] || g.default)(v);
+        Object.keys(p).forEach(($) => {
+          $ === "transform" ? r[$] = r[$] ? {
+            [$]: `${r[$][$]} ${p[$]}`
+          } : p : r[$] = p;
         });
       }
-      i.push(d);
+      c.push(d);
     });
-    const c = { ...i.reduce(
-      (a, d) => (Object.keys(d).forEach((p) => {
-        p === "transform" ? a[p] = a[p] ? `${a[p]} ${d[p]}` : d[p] : a[p] = d[p];
-      }), a),
+    const i = { ...c.reduce(
+      (n, d) => (Object.keys(d).forEach((u) => {
+        u === "transform" ? n[u] = n[u] ? `${n[u]} ${d[u]}` : d[u] : n[u] = d[u];
+      }), n),
       {}
     ) };
-    return Object.keys(o).forEach((a) => {
-      const d = o[a];
-      a === "transform" && d.transform ? c.transform = c.transform ? `${c.transform} ${d.transform}` : d.transform : d[a] !== void 0 && (c[a] = d[a]);
-    }), c;
+    return Object.keys(r).forEach((n) => {
+      const d = r[n];
+      n === "transform" && d.transform ? i.transform = i.transform ? `${i.transform} ${d.transform}` : d.transform : d[n] !== void 0 && (i[n] = d[n]);
+    }), i;
   } else
-    return r.map((o) => j(o, e, n, s)).reduce(
-      (o, f) => (Object.keys(f).forEach((c) => {
-        c === "transform" ? o[c] = o[c] ? `${o[c]} ${f[c]}` : f[c] : o[c] = f[c];
-      }), o),
+    return o.map((r) => E(r, e, a, s)).reduce(
+      (r, f) => (Object.keys(f).forEach((i) => {
+        i === "transform" ? r[i] = r[i] ? `${r[i]} ${f[i]}` : f[i] : r[i] = f[i];
+      }), r),
       {}
     );
-}, [t, e, n, s]), F = (t) => t ? Array.isArray(t) ? t : [t] : [], D = (...t) => {
-  const n = [];
+}, [t, e, a, s]), X = (t) => t ? Array.isArray(t) ? t : [t] : [], _ = (...t) => {
+  const a = [];
   return t.forEach((e) => {
-    Array.isArray(e) ? n.push(...e) : e && n.push(e);
-  }), n.filter((e) => e !== void 0).reduce((e, s) => e.find(
-    (r) => r.property === s.property
+    Array.isArray(e) ? a.push(...e) : e && a.push(e);
+  }), a.filter((e) => e !== void 0).reduce((e, s) => e.find(
+    (o) => o.property === s.property
   ) ? e.map(
-    (r) => r.property === s.property ? {
-      ...r,
-      from: Math.min(r.from, s.from),
-      to: Math.max(r.to, s.to),
+    (o) => o.property === s.property ? {
+      ...o,
+      from: Math.min(o.from, s.from),
+      to: Math.max(o.to, s.to),
       durationInFrames: Math.max(
-        r.durationInFrames,
+        o.durationInFrames,
         s.durationInFrames
       ),
-      delay: Math.min(r.delay || 0, s.delay || 0),
-      ease: (i) => (r.ease(i) + s.ease(i)) / 2
+      delay: Math.min(o.delay || 0, s.delay || 0),
+      ease: (c) => (o.ease(c) + s.ease(c)) / 2
       // Average the easing functions
-    } : r
+    } : o
   ) : [...e, s], []);
-}, _ = ({
+}, z = ({
   animationIn: t,
-  animationOut: n,
+  animationOut: a,
   durationInFrames: e,
   children: s,
   style: l = {},
-  frame: r
+  frame: o,
+  isTransition: c = !1
 }) => {
-  var X;
-  const i = M(
-    F(t),
+  var Y;
+  const r = F(
+    X(t),
     e,
-    r,
+    o,
     !1
-  ), o = M(
-    F(n),
+  ), f = F(
+    X(a),
     e,
-    r,
+    o,
     !0
-  ), f = S.useMemo(() => {
-    const m = Object.keys(i).length > 0, v = t == null ? void 0 : t.reduce(
-      (y, x) => Math.min(y, x.delay || 0),
+  ), i = M.useMemo(() => {
+    const h = Object.keys(r).length > 0, m = t == null ? void 0 : t.reduce(
+      (w, S) => Math.min(w, S.delay || 0),
       1 / 0
-    ), g = r - (v || 0);
-    return m && g < 0 ? { visibility: "hidden" } : i;
-  }, [i, r, t]), c = S.useMemo(() => {
-    const m = (n == null ? void 0 : n.length) > 0, v = n == null ? void 0 : n.reduce(
-      (g, y) => {
-        const x = y.delay || 0;
-        return Math.max(g, x);
+    ), b = o - (m || 0);
+    return h && b < 0 ? { visibility: c ? "visible" : "hidden" } : r;
+  }, [r, o, t]), n = M.useMemo(() => {
+    const h = (a == null ? void 0 : a.length) > 0, m = a == null ? void 0 : a.reduce(
+      (b, w) => {
+        const S = w.delay || 0;
+        return Math.max(b, S);
       },
       0
     );
-    return m && r > e - v ? { visibility: "hidden" } : o;
-  }, [o, r, n]), d = ((l == null ? void 0 : l.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), p = d ? parseFloat(d[1]) : 0, $ = -p, u = S.useMemo(() => {
-    const m = {
-      ...f
+    return h && o > e - m ? { visibility: c ? "visible" : "hidden" } : f;
+  }, [f, o, a]), u = ((l == null ? void 0 : l.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), v = u ? parseFloat(u[1]) : 0, g = -v, p = M.useMemo(() => {
+    const h = {
+      ...i
       // , ...timedStyle
     };
-    return Object.entries(c).forEach(([v, g]) => {
-      v === "transform" ? m[v] = `${m[v] || ""} ${g || ""}`.trim() : v in m && typeof m[v] == "number" && typeof g == "number" ? m[v] = m[v] * g : m[v] = g;
-    }), m;
-  }, [f, c]);
-  if ((X = u.transform) != null && X.includes("rotate")) {
-    const m = u.transform;
-    u.transform = m.replace(
+    return Object.entries(n).forEach(([m, b]) => {
+      m === "transform" ? h[m] = `${h[m] || ""} ${b || ""}`.trim() : m in h && typeof h[m] == "number" && typeof b == "number" ? h[m] = h[m] * b : h[m] = b;
+    }), h;
+  }, [i, n]);
+  if ((Y = p.transform) != null && Y.includes("rotate")) {
+    const h = p.transform;
+    p.transform = h.replace(
       /rotate\(([^)]+)deg\)/,
-      (v, g) => `rotate(${parseFloat(g) - $}deg)`
+      (m, b) => `rotate(${parseFloat(b) - g}deg)`
     );
   }
-  const b = V(() => {
-    const m = u.transform || "", { translateX: v, translateY: g, scale: y, rotation: x, rotateY: A } = C(m);
-    return `${v} ${g} ${y} ${x || `rotate(${p}deg)`} ${A}`.trim();
-  }, [u, p]);
-  let h = i;
-  return p > 0 && h.transform && h.transform.includes("translateX") && (h = {
-    ...h,
-    transform: h.transform.replace(
+  const $ = I(() => {
+    const h = p.transform || "", { translateX: m, translateY: b, scale: w, rotation: S, rotateY: V } = H(h);
+    return `${m} ${b} ${w} ${S || `rotate(${v}deg)`} ${V}`.trim();
+  }, [p, v]);
+  let y = r;
+  return v > 0 && y.transform && y.transform.includes("translateX") && (y = {
+    ...y,
+    transform: y.transform.replace(
       /translateX\(([^)]+)\)/g,
-      (m, v) => `translateX(${parseFloat(v)}px)`
+      (h, m) => `translateX(${parseFloat(m)}px)`
     )
-  }), /* @__PURE__ */ w(
+  }), /* @__PURE__ */ x(
     "div",
     {
       style: {
-        overflow: u.overflow || "visible",
+        overflow: p.overflow || "visible",
         pointerEvents: "none",
-        ...h,
-        transform: (h.transform || "") + ` -rotate(${$}deg) scale(1)`,
-        background: Object.keys(u).length === 0 ? "transparent" : u.backgroundColor,
+        ...y,
+        transform: (y.transform || "") + ` -rotate(${g}deg) scale(1)`,
+        background: Object.keys(p).length === 0 ? "transparent" : p.backgroundColor,
         display: "flex",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ w(
+      children: /* @__PURE__ */ x(
         "div",
         {
           style: {
             ...l,
-            ...u,
-            rotate: `${$}deg`,
+            ...p,
+            rotate: `${g}deg`,
             overflow: "visible",
-            transform: b,
+            transform: $,
             pointerEvents: "none",
-            background: Object.keys(u).length === 0 ? "transparent" : u.backgroundColor
+            background: Object.keys(p).length === 0 ? "transparent" : p.backgroundColor
           },
           children: s
         }
       )
     }
   );
-}, C = (t) => {
-  let n = "", e = "", s = "scale(1)", l = "", r = "";
-  const i = t.match(/translateX\([^)]+\)/);
-  i && (n = i[0]);
-  const o = t.match(/translateY\([^)]+\)/);
-  o && (e = o[0]);
+}, H = (t) => {
+  let a = "", e = "", s = "scale(1)", l = "", o = "";
+  const c = t.match(/translateX\([^)]+\)/);
+  c && (a = c[0]);
+  const r = t.match(/translateY\([^)]+\)/);
+  r && (e = r[0]);
   const f = t.match(/scale\([^)]+\)/);
   f && (s = f[0]);
-  const c = t.match(/rotate\([^)]+\)/);
-  c && (l = c[0]);
-  const a = t.match(/rotateY\([^)]+\)/);
-  return a && (r = a[0]), { translateX: n, translateY: e, scale: s, rotation: l, rotateY: r };
-}, z = ({
+  const i = t.match(/rotate\([^)]+\)/);
+  i && (l = i[0]);
+  const n = t.match(/rotateY\([^)]+\)/);
+  return n && (o = n[0]), { translateX: a, translateY: e, scale: s, rotation: l, rotateY: o };
+}, L = ({
   animationTimed: t,
-  durationInFrames: n,
+  durationInFrames: a,
   children: e,
   style: s = {},
   frame: l
 }) => {
-  var p;
-  const r = M(
-    F(t),
-    n,
+  var u;
+  const o = F(
+    X(t),
+    a,
     l,
     !1,
     !0
-  ), o = ((s == null ? void 0 : s.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), f = o ? parseFloat(o[1]) : 0, c = -f, a = S.useMemo(() => ({
-    ...r
-  }), [r]);
-  if ((p = a.transform) != null && p.includes("rotate")) {
-    const $ = a.transform;
-    a.transform = $.replace(
+  ), r = ((s == null ? void 0 : s.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), f = r ? parseFloat(r[1]) : 0, i = -f, n = M.useMemo(() => ({
+    ...o
+  }), [o]);
+  if ((u = n.transform) != null && u.includes("rotate")) {
+    const v = n.transform;
+    n.transform = v.replace(
       /rotate\(([^)]+)deg\)/,
-      (u, b) => `rotate(${parseFloat(b) - c}deg)`
+      (g, p) => `rotate(${parseFloat(p) - i}deg)`
     );
   }
-  let d = a;
+  let d = n;
   return f > 0 && d.transform && d.transform.includes("translateX") && (d = {
     ...d,
     transform: d.transform.replace(
       /translateX\(([^)]+)\)/g,
-      ($, u) => `translateX(${parseFloat(u)}px)`
+      (v, g) => `translateX(${parseFloat(g)}px)`
     )
-  }), /* @__PURE__ */ w(
+  }), /* @__PURE__ */ x(
     "div",
     {
       style: {
-        overflow: a.overflow || "visible",
+        overflow: n.overflow || "visible",
         pointerEvents: "none",
         height: s.height,
         width: s.width,
         ...d
       },
-      children: /* @__PURE__ */ w(
+      children: /* @__PURE__ */ x(
         "div",
         {
           style: {
-            ...a,
+            ...n,
             overflow: "visible",
             pointerEvents: "none",
             height: "100%",
@@ -291,40 +292,40 @@ const E = () => ({
       )
     }
   );
-}, L = ({
+}, W = ({
   children: t,
-  frame: n,
+  frame: a,
   item: e,
   keyframeAnimations: s
 }) => {
-  var p, $;
+  var u, v;
   const l = s == null ? void 0 : s.find(
-    (u) => u.property.includes("maskReveal")
-  ), r = ((p = e.details.crop) == null ? void 0 : p.width) || e.details.width, i = (($ = e.details.crop) == null ? void 0 : $.height) || e.details.height;
-  let o = 1, f = i, c = 0, a = 0, d = r;
-  if ((n || 0) - e.display.from >= 0 && (l == null ? void 0 : l.property) === "maskRevealIn")
-    o = Math.min((n || 0) / l.durationInFrames, 1), f = i - i * (1 - o);
-  else if ((n || 0) - e.display.from >= 0 && (l == null ? void 0 : l.property) === "maskRevealCenterIn") {
-    o = Math.min((n || 0) / l.durationInFrames, 1);
-    const u = r / 2, b = i / 2;
-    d = r, f = i * o, c = u - d / 2, a = b - f / 2;
-  } else (n || 0) - e.display.from >= 0 && (l == null ? void 0 : l.property) === "maskRevealCornerIn" && (o = Math.min((n || 0) / l.durationInFrames, 1), d = r * o, f = i * o, c = r - d, a = 0);
-  return /* @__PURE__ */ w(
+    (g) => g.property.includes("maskReveal")
+  ), o = ((u = e.details.crop) == null ? void 0 : u.width) || e.details.width, c = ((v = e.details.crop) == null ? void 0 : v.height) || e.details.height;
+  let r = 1, f = c, i = 0, n = 0, d = o;
+  if ((a || 0) - e.display.from >= 0 && (l == null ? void 0 : l.property) === "maskRevealIn")
+    r = Math.min((a || 0) / l.durationInFrames, 1), f = c - c * (1 - r);
+  else if ((a || 0) - e.display.from >= 0 && (l == null ? void 0 : l.property) === "maskRevealCenterIn") {
+    r = Math.min((a || 0) / l.durationInFrames, 1);
+    const g = o / 2, p = c / 2;
+    d = o, f = c * r, i = g - d / 2, n = p - f / 2;
+  } else (a || 0) - e.display.from >= 0 && (l == null ? void 0 : l.property) === "maskRevealCornerIn" && (r = Math.min((a || 0) / l.durationInFrames, 1), d = o * r, f = c * r, i = o - d, n = 0);
+  return /* @__PURE__ */ x(
     "div",
     {
       style: {
-        width: r,
-        height: i,
+        width: o,
+        height: c,
         position: "relative",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ w(
+      children: /* @__PURE__ */ x(
         "div",
         {
           style: {
             position: "absolute",
-            left: c,
-            top: a,
+            left: i,
+            top: n,
             width: d,
             height: f,
             overflow: "hidden"
@@ -336,11 +337,11 @@ const E = () => ({
   );
 };
 export {
-  _ as BoxAnim,
-  z as ContentAnim,
-  L as MaskAnim,
-  D as combine,
-  F as combineAnimations,
-  C as extractTransformations,
-  M as useAnimation
+  z as BoxAnim,
+  L as ContentAnim,
+  W as MaskAnim,
+  _ as combine,
+  X as combineAnimations,
+  H as extractTransformations,
+  F as useAnimation
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(g,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):(g=typeof globalThis<"u"?globalThis:g||self,S(g.animations={},g.jsxRuntime,g.React,g.remotion))})(this,function(g,S,w,F){"use strict";const X=()=>({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)`}),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"})}),Y=(t,o=0)=>{const e=[],a=t/5;for(let l=0;l<6;l+=1)e.push(l*a+o);return e},T=(t,o,e,a=!1)=>{const{from:l,to:r,ease:i}=o,n=o.durationInFrames||30,f=Number(l),c=Number(r),s=Math.max(1,Number(n));if(isNaN(f)||isNaN(c))return console.error("Invalid animation values:",{from:l,to:r,animationDurationInFrames:n,property:o.property}),f;n===void 0&&console.warn(`durationInFrames is undefined for animation: ${o.property}. Using 1 frame as default.`);const d=a?[e-n,e]:[0,s];if(o.property.includes("shake")){const u=a?Y(s,e-n):Y(s);return F.interpolate(t,u,[0,f,c,f,c,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:i})}return F.interpolate(t,d,[f,c],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:i})},E=(t,o,e,a)=>{const l=o-(t.delay||0)*(a?-1:1)+(a?1:0),{property:r,durationInFrames:i}=t;if(!a&&l>i)return{};const n=T(l,t,e,a),f=X();return(f[r]||f.default)(n)},j=(t,o,e,a=!1,l=!1)=>w.useMemo(()=>{if(t.length===0)return{};const r=t.filter(i=>i.from!==void 0&&i.to!==void 0);if(r.length!==t.length&&console.error("Some animations are invalid and will be ignored"),l){const i=[],n={};r.reverse().forEach(s=>{const d=E(s,e,o,!1);if(s.persist===!0&&e-(s.delay||0)>=s.durationInFrames){const y=s.to,p=X(),$=(p[s.property]||p.default)(y);Object.keys($).forEach(h=>{h==="transform"?n[h]=n[h]?{[h]:`${n[h][h]} ${$[h]}`}:$:n[h]=$})}i.push(d)});const c={...i.reduce((s,d)=>(Object.keys(d).forEach(u=>{u==="transform"?s[u]=s[u]?`${s[u]} ${d[u]}`:d[u]:s[u]=d[u]}),s),{})};return Object.keys(n).forEach(s=>{const d=n[s];s==="transform"&&d.transform?c.transform=c.transform?`${c.transform} ${d.transform}`:d.transform:d[s]!==void 0&&(c[s]=d[s])}),c}else return r.map(n=>E(n,e,o,a)).reduce((n,f)=>(Object.keys(f).forEach(c=>{c==="transform"?n[c]=n[c]?`${n[c]} ${f[c]}`:f[c]:n[c]=f[c]}),n),{})},[t,e,o,a]),A=t=>t?Array.isArray(t)?t:[t]:[],C=(...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,a)=>e.find(r=>r.property===a.property)?e.map(r=>r.property===a.property?{...r,from:Math.min(r.from,a.from),to:Math.max(r.to,a.to),durationInFrames:Math.max(r.durationInFrames,a.durationInFrames),delay:Math.min(r.delay||0,a.delay||0),ease:i=>(r.ease(i)+a.ease(i))/2}:r):[...e,a],[])},H=({animationIn:t,animationOut:o,durationInFrames:e,children:a,style:l={},frame:r})=>{var I;const i=j(A(t),e,r,!1),n=j(A(o),e,r,!0),f=w.useMemo(()=>{const m=Object.keys(i).length>0,v=t==null?void 0:t.reduce((x,M)=>Math.min(x,M.delay||0),1/0),b=r-(v||0);return m&&b<0?{visibility:"hidden"}:i},[i,r,t]),c=w.useMemo(()=>{const m=(o==null?void 0:o.length)>0,v=o==null?void 0:o.reduce((b,x)=>{const M=x.delay||0;return Math.max(b,M)},0);return m&&r>e-v?{visibility:"hidden"}:n},[n,r,o]),d=((l==null?void 0:l.transform)||"").match(/rotate\((-?[\d.]+)deg\)/),u=d?parseFloat(d[1]):0,y=-u,p=w.useMemo(()=>{const m={...f};return Object.entries(c).forEach(([v,b])=>{v==="transform"?m[v]=`${m[v]||""} ${b||""}`.trim():v in m&&typeof m[v]=="number"&&typeof b=="number"?m[v]=m[v]*b:m[v]=b}),m},[f,c]);if((I=p.transform)!=null&&I.includes("rotate")){const m=p.transform;p.transform=m.replace(/rotate\(([^)]+)deg\)/,(v,b)=>`rotate(${parseFloat(b)-y}deg)`)}const $=w.useMemo(()=>{const m=p.transform||"",{translateX:v,translateY:b,scale:x,rotation:M,rotateY:D}=V(m);return`${v} ${b} ${x} ${M||`rotate(${u}deg)`} ${D}`.trim()},[p,u]);let h=i;return u>0&&h.transform&&h.transform.includes("translateX")&&(h={...h,transform:h.transform.replace(/translateX\(([^)]+)\)/g,(m,v)=>`translateX(${parseFloat(v)}px)`)}),S.jsx("div",{style:{overflow:p.overflow||"visible",pointerEvents:"none",...h,transform:(h.transform||"")+` -rotate(${y}deg) scale(1)`,background:Object.keys(p).length===0?"transparent":p.backgroundColor,display:"flex",justifyContent:"center"},children:S.jsx("div",{style:{...l,...p,rotate:`${y}deg`,overflow:"visible",transform:$,pointerEvents:"none",background:Object.keys(p).length===0?"transparent":p.backgroundColor},children:a})})},V=t=>{let o="",e="",a="scale(1)",l="",r="";const i=t.match(/translateX\([^)]+\)/);i&&(o=i[0]);const n=t.match(/translateY\([^)]+\)/);n&&(e=n[0]);const f=t.match(/scale\([^)]+\)/);f&&(a=f[0]);const c=t.match(/rotate\([^)]+\)/);c&&(l=c[0]);const s=t.match(/rotateY\([^)]+\)/);return s&&(r=s[0]),{translateX:o,translateY:e,scale:a,rotation:l,rotateY:r}},N=({animationTimed:t,durationInFrames:o,children:e,style:a={},frame:l})=>{var u;const r=j(A(t),o,l,!1,!0),n=((a==null?void 0:a.transform)||"").match(/rotate\((-?[\d.]+)deg\)/),f=n?parseFloat(n[1]):0,c=-f,s=w.useMemo(()=>({...r}),[r]);if((u=s.transform)!=null&&u.includes("rotate")){const y=s.transform;s.transform=y.replace(/rotate\(([^)]+)deg\)/,(p,$)=>`rotate(${parseFloat($)-c}deg)`)}let d=s;return f>0&&d.transform&&d.transform.includes("translateX")&&(d={...d,transform:d.transform.replace(/translateX\(([^)]+)\)/g,(y,p)=>`translateX(${parseFloat(p)}px)`)}),S.jsx("div",{style:{overflow:s.overflow||"visible",pointerEvents:"none",height:a.height,width:a.width,...d},children:S.jsx("div",{style:{...s,overflow:"visible",pointerEvents:"none",height:"100%",width:"100%",display:"flex",alignItems:"center",justifyContent:"center"},children:e})})},R=({children:t,frame:o,item:e,keyframeAnimations:a})=>{var u,y;const l=a==null?void 0:a.find(p=>p.property.includes("maskReveal")),r=((u=e.details.crop)==null?void 0:u.width)||e.details.width,i=((y=e.details.crop)==null?void 0:y.height)||e.details.height;let n=1,f=i,c=0,s=0,d=r;if((o||0)-e.display.from>=0&&(l==null?void 0:l.property)==="maskRevealIn")n=Math.min((o||0)/l.durationInFrames,1),f=i-i*(1-n);else if((o||0)-e.display.from>=0&&(l==null?void 0:l.property)==="maskRevealCenterIn"){n=Math.min((o||0)/l.durationInFrames,1);const p=r/2,$=i/2;d=r,f=i*n,c=p-d/2,s=$-f/2}else(o||0)-e.display.from>=0&&(l==null?void 0:l.property)==="maskRevealCornerIn"&&(n=Math.min((o||0)/l.durationInFrames,1),d=r*n,f=i*n,c=r-d,s=0);return S.jsx("div",{style:{width:r,height:i,position:"relative",overflow:"hidden"},children:S.jsx("div",{style:{position:"absolute",left:c,top:s,width:d,height:f,overflow:"hidden"},children:t})})};g.BoxAnim=H,g.ContentAnim=N,g.MaskAnim=R,g.combine=C,g.combineAnimations=A,g.extractTransformations=V,g.useAnimation=j,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})});
+(function(v,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):(v=typeof globalThis<"u"?globalThis:v||self,S(v.animations={},v.jsxRuntime,v.React,v.remotion))})(this,function(v,S,x,X){"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)`}),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,s=0)=>{const e=[],a=t/5;for(let l=0;l<6;l+=1)e.push(l*a+s);return e},C=(t,s,e,a=!1)=>{const{from:l,to:n,ease:c}=s,r=s.durationInFrames||30,d=Number(l),i=Number(n),o=Math.max(1,Number(r));if(isNaN(d)||isNaN(i))return console.error("Invalid animation values:",{from:l,to:n,animationDurationInFrames:r,property:s.property}),d;r===void 0&&console.warn(`durationInFrames is undefined for animation: ${s.property}. Using 1 frame as default.`);const f=a?[e-r,e]:[0,o];if(s.property.includes("shake")){const p=a?E(o,e-r):E(o);return X.interpolate(t,p,[0,d,i,d,i,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:c})}return X.interpolate(t,f,[d,i],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:c})},V=(t,s,e,a)=>{const l=s-(t.delay||0)*(a?-1:1)+(a?1:0),{property:n,durationInFrames:c}=t;if(!a&&l>c)return{};const r=C(l,t,e,a),d=Y();return(d[n]||d.default)(r)},A=(t,s,e,a=!1,l=!1)=>x.useMemo(()=>{if(t.length===0)return{};const n=t.filter(c=>c.from!==void 0&&c.to!==void 0);if(n.length!==t.length&&console.error("Some animations are invalid and will be ignored"),l){const c=[],r={};n.reverse().forEach(o=>{const f=V(o,e,s,!1);if(o.persist===!0&&e-(o.delay||0)>=o.durationInFrames){const g=o.to,b=Y(),u=(b[o.property]||b.default)(g);Object.keys(u).forEach($=>{$==="transform"?r[$]=r[$]?{[$]:`${r[$][$]} ${u[$]}`}:u:r[$]=u})}c.push(f)});const i={...c.reduce((o,f)=>(Object.keys(f).forEach(p=>{p==="transform"?o[p]=o[p]?`${o[p]} ${f[p]}`:f[p]:o[p]=f[p]}),o),{})};return Object.keys(r).forEach(o=>{const f=r[o];o==="transform"&&f.transform?i.transform=i.transform?`${i.transform} ${f.transform}`:f.transform:f[o]!==void 0&&(i[o]=f[o])}),i}else return n.map(r=>V(r,e,s,a)).reduce((r,d)=>(Object.keys(d).forEach(i=>{i==="transform"?r[i]=r[i]?`${r[i]} ${d[i]}`:d[i]:r[i]=d[i]}),r),{})},[t,e,s,a]),F=t=>t?Array.isArray(t)?t:[t]:[],H=(...t)=>{const s=[];return t.forEach(e=>{Array.isArray(e)?s.push(...e):e&&s.push(e)}),s.filter(e=>e!==void 0).reduce((e,a)=>e.find(n=>n.property===a.property)?e.map(n=>n.property===a.property?{...n,from:Math.min(n.from,a.from),to:Math.max(n.to,a.to),durationInFrames:Math.max(n.durationInFrames,a.durationInFrames),delay:Math.min(n.delay||0,a.delay||0),ease:c=>(n.ease(c)+a.ease(c))/2}:n):[...e,a],[])},N=({animationIn:t,animationOut:s,durationInFrames:e,children:a,style:l={},frame:n,isTransition:c=!1})=>{var T;const r=A(F(t),e,n,!1),d=A(F(s),e,n,!0),i=x.useMemo(()=>{const h=Object.keys(r).length>0,m=t==null?void 0:t.reduce((M,j)=>Math.min(M,j.delay||0),1/0),y=n-(m||0);return h&&y<0?{visibility:c?"visible":"hidden"}:r},[r,n,t]),o=x.useMemo(()=>{const h=(s==null?void 0:s.length)>0,m=s==null?void 0:s.reduce((y,M)=>{const j=M.delay||0;return Math.max(y,j)},0);return h&&n>e-m?{visibility:c?"visible":"hidden"}:d},[d,n,s]),p=((l==null?void 0:l.transform)||"").match(/rotate\((-?[\d.]+)deg\)/),g=p?parseFloat(p[1]):0,b=-g,u=x.useMemo(()=>{const h={...i};return Object.entries(o).forEach(([m,y])=>{m==="transform"?h[m]=`${h[m]||""} ${y||""}`.trim():m in h&&typeof h[m]=="number"&&typeof y=="number"?h[m]=h[m]*y:h[m]=y}),h},[i,o]);if((T=u.transform)!=null&&T.includes("rotate")){const h=u.transform;u.transform=h.replace(/rotate\(([^)]+)deg\)/,(m,y)=>`rotate(${parseFloat(y)-b}deg)`)}const $=x.useMemo(()=>{const h=u.transform||"",{translateX:m,translateY:y,scale:M,rotation:j,rotateY:_}=I(h);return`${m} ${y} ${M} ${j||`rotate(${g}deg)`} ${_}`.trim()},[u,g]);let w=r;return g>0&&w.transform&&w.transform.includes("translateX")&&(w={...w,transform:w.transform.replace(/translateX\(([^)]+)\)/g,(h,m)=>`translateX(${parseFloat(m)}px)`)}),S.jsx("div",{style:{overflow:u.overflow||"visible",pointerEvents:"none",...w,transform:(w.transform||"")+` -rotate(${b}deg) scale(1)`,background:Object.keys(u).length===0?"transparent":u.backgroundColor,display:"flex",justifyContent:"center"},children:S.jsx("div",{style:{...l,...u,rotate:`${b}deg`,overflow:"visible",transform:$,pointerEvents:"none",background:Object.keys(u).length===0?"transparent":u.backgroundColor},children:a})})},I=t=>{let s="",e="",a="scale(1)",l="",n="";const c=t.match(/translateX\([^)]+\)/);c&&(s=c[0]);const r=t.match(/translateY\([^)]+\)/);r&&(e=r[0]);const d=t.match(/scale\([^)]+\)/);d&&(a=d[0]);const i=t.match(/rotate\([^)]+\)/);i&&(l=i[0]);const o=t.match(/rotateY\([^)]+\)/);return o&&(n=o[0]),{translateX:s,translateY:e,scale:a,rotation:l,rotateY:n}},R=({animationTimed:t,durationInFrames:s,children:e,style:a={},frame:l})=>{var p;const n=A(F(t),s,l,!1,!0),r=((a==null?void 0:a.transform)||"").match(/rotate\((-?[\d.]+)deg\)/),d=r?parseFloat(r[1]):0,i=-d,o=x.useMemo(()=>({...n}),[n]);if((p=o.transform)!=null&&p.includes("rotate")){const g=o.transform;o.transform=g.replace(/rotate\(([^)]+)deg\)/,(b,u)=>`rotate(${parseFloat(u)-i}deg)`)}let f=o;return d>0&&f.transform&&f.transform.includes("translateX")&&(f={...f,transform:f.transform.replace(/translateX\(([^)]+)\)/g,(g,b)=>`translateX(${parseFloat(b)}px)`)}),S.jsx("div",{style:{overflow:o.overflow||"visible",pointerEvents:"none",height:a.height,width:a.width,...f},children:S.jsx("div",{style:{...o,overflow:"visible",pointerEvents:"none",height:"100%",width:"100%",display:"flex",alignItems:"center",justifyContent:"center"},children:e})})},D=({children:t,frame:s,item:e,keyframeAnimations:a})=>{var p,g;const l=a==null?void 0:a.find(b=>b.property.includes("maskReveal")),n=((p=e.details.crop)==null?void 0:p.width)||e.details.width,c=((g=e.details.crop)==null?void 0:g.height)||e.details.height;let r=1,d=c,i=0,o=0,f=n;if((s||0)-e.display.from>=0&&(l==null?void 0:l.property)==="maskRevealIn")r=Math.min((s||0)/l.durationInFrames,1),d=c-c*(1-r);else if((s||0)-e.display.from>=0&&(l==null?void 0:l.property)==="maskRevealCenterIn"){r=Math.min((s||0)/l.durationInFrames,1);const b=n/2,u=c/2;f=n,d=c*r,i=b-f/2,o=u-d/2}else(s||0)-e.display.from>=0&&(l==null?void 0:l.property)==="maskRevealCornerIn"&&(r=Math.min((s||0)/l.durationInFrames,1),f=n*r,d=c*r,i=n-f,o=0);return S.jsx("div",{style:{width:n,height:c,position:"relative",overflow:"hidden"},children:S.jsx("div",{style:{position:"absolute",left:i,top:o,width:f,height:d,overflow:"hidden"},children:t})})};v.BoxAnim=N,v.ContentAnim=R,v.MaskAnim=D,v.combine=H,v.combineAnimations=F,v.extractTransformations=I,v.useAnimation=A,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cliquify.me/animations",
-  "version": "6.0.9",
+  "version": "6.0.11",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -26,7 +26,7 @@
     "typescript": "^5.3.3",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.9.1",
-    "@cliquify.me/types": "5.0.7",
+    "@cliquify.me/types": "5.0.8",
     "@cliquify.me/typescript-config": "0.0.2"
   },
   "dependencies": {
@@ -39,7 +39,7 @@
     "@designcombo/events": "^1.0.2",
     "react": "^18.2.0",
     "remotion": "4.0.221",
-    "@cliquify.me/types": "5.0.7"
+    "@cliquify.me/types": "5.0.8"
   },
   "scripts": {
     "dev": "vite",