@cliquify.me/animations 6.0.1 → 6.0.3

package/dist/index.es.js

@@ -65,7 +65,7 @@ const j = () => ({
     easing: i
   });
 }, E = (t, n, e, s) => {
-  const l = n - (t.delay || 0) * (s ? -1 : 1), { property: r, durationInFrames: i } = t;
+  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(
     l,

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),{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},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"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cliquify.me/animations",
-  "version": "6.0.1",
+  "version": "6.0.3",
   "private": false,
   "publishConfig": {
     "access": "public"