@cliquify.me/animations 6.0.3 → 6.0.5

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import { jsx as w } from "react/jsx-runtime";
-import x, { useMemo as V } from "react";
+import S, { useMemo as V } from "react";
 import { interpolate as Y } from "remotion";
-const j = () => ({
+const E = () => ({
   scale: (t) => ({ transform: `scale(${t})` }),
   opacity: (t) => ({ opacity: t }),
   translateX: (t) => ({ transform: `translateX(${t}px)` }),
@@ -64,7 +64,7 @@ const j = () => ({
     extrapolateRight: "clamp",
     easing: i
   });
-}, E = (t, n, e, s) => {
+}, 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(
@@ -72,9 +72,9 @@ const j = () => ({
     t,
     e,
     s
-  ), f = j();
+  ), f = E();
   return (f[r] || f.default)(o);
-}, M = (t, n, e, s = !1, l = !1) => x.useMemo(() => {
+}, M = (t, n, e, s = !1, l = !1) => S.useMemo(() => {
   if (t.length === 0) return {};
   const r = t.filter(
     (i) => i.from !== void 0 && i.to !== void 0
@@ -82,9 +82,9 @@ const j = () => ({
   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 = E(a, e, n, !1);
+      const d = j(a, e, n, !1);
       if (a.persist === !0 && e - (a.delay || 0) >= a.durationInFrames) {
-        const $ = a.to, u = j(), b = (u[a.property] || u.default)($);
+        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]}`
@@ -104,7 +104,7 @@ const j = () => ({
       a === "transform" && d.transform ? c.transform = c.transform ? `${c.transform} ${d.transform}` : d.transform : d[a] !== void 0 && (c[a] = d[a]);
     }), c;
   } else
-    return r.map((o) => E(o, e, n, s)).reduce(
+    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),
@@ -149,22 +149,22 @@ const j = () => ({
     e,
     r,
     !0
-  ), f = x.useMemo(() => {
+  ), f = S.useMemo(() => {
     const m = Object.keys(i).length > 0, v = t == null ? void 0 : t.reduce(
-      (y, S) => Math.min(y, S.delay || 0),
+      (y, x) => Math.min(y, x.delay || 0),
       1 / 0
     ), g = r - (v || 0);
     return m && g < 0 ? { visibility: "hidden" } : i;
-  }, [i, r, t]), c = x.useMemo(() => {
+  }, [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 S = y.delay || 0;
-        return Math.max(g, S);
+        const x = y.delay || 0;
+        return Math.max(g, x);
       },
       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 = x.useMemo(() => {
+  }, [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
       // , ...timedStyle
@@ -181,8 +181,8 @@ const j = () => ({
     );
   }
   const b = V(() => {
-    const m = u.transform || "", { translateX: v, translateY: g, scale: y, rotation: S, rotateY: A } = H(m);
-    return `${v} ${g} ${y} ${S || `rotate(${p}deg)`} ${A}`.trim();
+    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 = {
@@ -220,7 +220,7 @@ const j = () => ({
       )
     }
   );
-}, H = (t) => {
+}, C = (t) => {
   let n = "", e = "", s = "scale(1)", l = "", r = "";
   const i = t.match(/translateX\([^)]+\)/);
   i && (n = i[0]);
@@ -246,7 +246,7 @@ const j = () => ({
     l,
     !1,
     !0
-  ), o = ((s == null ? void 0 : s.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), f = o ? parseFloat(o[1]) : 0, c = -f, a = x.useMemo(() => ({
+  ), 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")) {
@@ -281,7 +281,10 @@ const j = () => ({
             overflow: "visible",
             pointerEvents: "none",
             height: "100%",
-            width: "100%"
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
           },
           children: e
         }
@@ -338,6 +341,6 @@ export {
   L as MaskAnim,
   D as combine,
   F as combineAnimations,
-  H as extractTransformations,
+  C as extractTransformations,
   M 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},I=(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=I(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 $=s.to,p=X(),y=(p[s.property]||p.default)($);Object.keys(y).forEach(h=>{h==="transform"?n[h]=n[h]?{[h]:`${n[h][h]} ${y[h]}`}:y:n[h]=y})}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 T;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,$=-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((T=p.transform)!=null&&T.includes("rotate")){const m=p.transform;p.transform=m.replace(/rotate\(([^)]+)deg\)/,(v,b)=>`rotate(${parseFloat(b)-$}deg)`)}const y=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(${$}deg) scale(1)`,background:Object.keys(p).length===0?"transparent":p.backgroundColor,display:"flex",justifyContent:"center"},children:S.jsx("div",{style:{...l,...p,rotate:`${$}deg`,overflow:"visible",transform:y,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 $=s.transform;s.transform=$.replace(/rotate\(([^)]+)deg\)/,(p,y)=>`rotate(${parseFloat(y)-c}deg)`)}let d=s;return f>0&&d.transform&&d.transform.includes("translateX")&&(d={...d,transform:d.transform.replace(/translateX\(([^)]+)\)/g,($,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%"},children:e})})},R=({children:t,frame:o,item:e,keyframeAnimations:a})=>{var u,$;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=(($=e.details.crop)==null?void 0:$.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,y=i/2;d=r,f=i*n,c=p-d/2,s=y-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(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"})});

package/dist/utils.d.ts

@@ -0,0 +1,18 @@
+export declare const calculateBoundingBoxWidth: (elementWidth: number, elementHeight: number, rotateAngle: number, scaleValue: number) => number;
+export interface BoundingBoxPoint {
+    x: number;
+    y: number;
+}
+export interface BoundingBoxCorners {
+    topLeft: BoundingBoxPoint;
+    topRight: BoundingBoxPoint;
+    bottomLeft: BoundingBoxPoint;
+    bottomRight: BoundingBoxPoint;
+    center: BoundingBoxPoint;
+    width: number;
+    height: number;
+}
+export declare const getBoundingBoxCorners: (elementX: number, elementY: number, elementWidth: number, elementHeight: number, rotationAngle: number, scaleValue?: number) => BoundingBoxCorners;
+export declare const getRotatedElementCorners: (elementX: number, elementY: number, elementWidth: number, elementHeight: number, rotationAngle: number, scaleValue?: number) => BoundingBoxPoint[];
+export declare const replaceTranslateX: (transformString: string, newTranslateXValue: number) => string;
+export declare const replaceTranslateXFlexible: (transformString: string, newTranslateXValue: number, unit?: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cliquify.me/animations",
-  "version": "6.0.3",
+  "version": "6.0.5",
   "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.1",
+    "@cliquify.me/types": "5.0.3",
     "@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.1"
+    "@cliquify.me/types": "5.0.3"
   },
   "scripts": {
     "dev": "vite",