motion/dist/size-animate-style.js

The Motion library for the web

const t=new WeakMap;function e(e){return t.has(e)||t.set(e,{activeTransforms:[],activeAnimations:{}}),t.get(e)}const i=()=>{},n=t=>t,a=["","X","Y","Z"],s={x:"translateX",y:"translateY",z:"translateZ"},r={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},o={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:r,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:n},skew:r},c=new Map,l=t=>`--motion-${t}`,h=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{a.forEach((e=>{h.push(t+e),c.set(l(t+e),o[t])}))}));const u=(t,e)=>h.indexOf(t)-h.indexOf(e),f=new Set(h),p=t=>t.sort(u).reduce(y,"").trim(),y=(t,e)=>`${t} ${e}(var(${l(e)}))`,m=t=>t.startsWith("--"),d=new Set;const g=t=>1e3*t;const v=t=>Array.isArray(t)&&"number"!=typeof t[0],T=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?S(t):t,S=([t,e,i,n])=>`cubic-bezier(${t}, ${e}, ${i}, ${n})`,w=t=>document.createElement("div").animate(t,{duration:.001}),x={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{w({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(w({opacity:[0,1]}).finished)},b={},A=Object.keys(x).reduce(((t,e)=>(t[e]=()=>(void 0===b[e]&&(b[e]=x[e]()),b[e]),t)),{}),M={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},k=(t,e,i)=>(((1-3*i+3*e)*t+(3*i-6*e))*t+3*e)*t;function D(t,e,i,a){if(t===e&&i===a)return n;const s=e=>function(t,e,i,n,a){let s,r,o=0;do{r=e+(i-e)/2,s=k(r,n,a)-t,s>0?i=r:e=r}while(Math.abs(s)>1e-7&&++o<12);return r}(e,0,1,t,i);return t=>0===t||1===t?t:k(s(t),e,a)}var P=function(t,e,i){var n=e-t;return 0===n?1:(i-t)/n},O=function(t,e,i){return-i*t+i*e+t},V=function(t,e){return void 0===e&&(e="end"),function(i){var n,a,s,r=(i="end"===e?Math.min(i,.999):Math.max(i,.001))*t,o="end"===e?Math.floor(r):Math.ceil(r);return n=0,a=1,s=o/t,Math.min(Math.max(s,n),a)}};const $={ease:D(.25,.1,.25,1),"ease-in":D(.42,0,1,1),"ease-in-out":D(.42,0,.58,1),"ease-out":D(0,0,.58,1)},U=/\((.*?)\)/;function j(t){if("function"==typeof t)return t;if(Array.isArray(t))return D(...t);if($[t])return $[t];if(t.startsWith("steps")){const e=U.exec(t);if(e){const t=e[1].split(",");return V(parseFloat(t[0]),t[1].trim())}}return n}function R(t,e){const i=t[t.length-1];for(let n=1;n<=e;n++){const a=P(0,e,n);t.push(O(i,1,a))}}function C(t,e=function(t){const e=[0];return R(e,t-1),e}(t.length),i=n){const a=t.length,s=a-e.length;return s>0&&R(e,s),n=>{let s=0;for(;s<a-2&&!(n<e[s+1]);s++);let r=(o=P(e[s],e[s+1],n),Math.min(1,Math.max(o,0)));var o;return r=function(t,e){return v(t)?t[(i=0,n=t.length,a=e,s=n-i,((a-i)%s+s)%s+i)]:t;var i,n,a,s}(i,s)(r),O(t[s],t[s+1],r)}}class E{constructor(t,e,{easing:i=M.easing,duration:n=M.duration,delay:a=M.delay,endDelay:s=M.endDelay,offset:r,repeat:o=M.repeat,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=n*(o+1),h=C(e,r,v(i)?i.map(j):j(i));this.tick=e=>{if("finished"===this.playState){const e=h(1);return t(e),void this.resolve(e)}this.pauseTime&&(e=this.pauseTime);let i=(e-this.startTime)*this.rate;this.t=i,i/=1e3,i=Math.max(i-a,0);const r=i/n;let o=Math.floor(r),u=r%1;!u&&r>=1&&(u=1),1===u&&o--;const f=o%2;("reverse"===c||"alternate"===c&&f||"alternate-reverse"===c&&!f)&&(u=1-u);const p=i>=l?1:Math.min(u,1),y=h(p);t(y);i>=l+s?(this.playState="finished",this.resolve(y)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.t}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const F=(t,e)=>{let i=m(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!i&&0!==i){const t=c.get(e);t&&(i=t.initialValue)}return i};function W(t,n,a,r={}){let{duration:o=M.duration,delay:h=M.delay,endDelay:u=M.endDelay,repeat:y=M.repeat,easing:S=M.easing,direction:w,offset:x,allowWebkitAcceleration:b=!1}=r;const k=e(t);let D=A.waapi(),P=i;const O=(t=>f.has(t))(n);O&&(s[n]&&(n=s[n]),((t,i)=>{const{activeTransforms:n}=e(t);var a,s;s=i,-1===(a=n).indexOf(s)&&a.push(s),t.style.transform=p(n)})(t,n),n=l(n));const V=c.get(n);let $,U=function(t,e,i){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:F(e,i));return t}((t=>Array.isArray(t)?t:[t])(a),t,n);if(function(t,e){t.activeAnimations[e]&&(!function(t){try{t.commitStyles(),t.cancel()}catch(t){}}(t.activeAnimations[e]),t.activeAnimations[e]=void 0)}(k,n),m(n)?(P=((t,e)=>i=>t.style.setProperty(e,i))(t,n),A.cssRegisterProperty()?function(t){if(!d.has(t)){d.add(t);try{const{syntax:e,initialValue:i}=c.has(t)?c.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:i})}catch(t){}}}(n):D=!1):P=((t,e)=>i=>t.style[e]=i)(t,n),D){V&&(U=U.map((t=>"number"==typeof t?V.toDefaultUnit(t):t))),A.partialKeyframes()||1!==U.length||U.unshift(F(t,n));const e={delay:g(h),duration:g(o),endDelay:g(u),easing:v(S)?void 0:T(S),direction:w,iterations:y+1};$=t.animate({[n]:U,offset:x,easing:v(S)?S.map(T):void 0},e),$.finished||($.finished=new Promise(((t,e)=>{$.onfinish=t,$.oncancel=e})));const a=U[U.length-1];$.finished.then((()=>P(a))).catch(i),b||($.playbackRate=1.000001)}else if(O&&U.every(z)){if(1===U.length&&U.unshift(F(t,n)||(null==V?void 0:V.initialValue)||0),U=U.map((t=>"string"==typeof t?parseFloat(t):t)),V){const t=P;P=e=>t(V.toDefaultUnit(e))}$=function(t,e=[0,1],i={}){return new E(t,e,i)}(P,U,r)}else{const t=U[U.length-1];P(V&&"number"==typeof t?V.toDefaultUnit(t):t)}return k.activeAnimations[n]=$,$}const z=t=>"number"==typeof t;export{W as animateStyle};