motion/dist/motion.min.js

The Motion library for the web

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Motion={})}(this,(function(t){"use strict";const e=new WeakMap;function n(t){return e.has(t)||e.set(t,{activeTransforms:[],activeAnimations:{}}),e.get(t)}function i(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}const a=()=>{},s=t=>t,r=["","X","Y","Z"],o={x:"translateX",y:"translateY",z:"translateZ"},c={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},l={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:c,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:s},skew:c},u=new Map,f=t=>`--motion-${t}`,h=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{r.forEach((e=>{h.push(t+e),u.set(f(t+e),l[t])}))}));const p=(t,e)=>h.indexOf(t)-h.indexOf(e),y=new Set(h),m=t=>t.sort(p).reduce(d,"").trim(),d=(t,e)=>`${t} ${e}(var(${f(e)}))`,g=t=>t.startsWith("--"),v=new Set;const b=t=>1e3*t;function x(t){try{t.commitStyles(),t.cancel()}catch(t){}}const O=t=>Array.isArray(t)&&"number"!=typeof t[0],T=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?w(t):t,w=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,S=t=>document.createElement("div").animate(t,{duration:.001}),M={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{S({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(S({opacity:[0,1]}).finished)},A={},j=Object.keys(M).reduce(((t,e)=>(t[e]=()=>(void 0===A[e]&&(A[e]=M[e]()),A[e]),t)),{}),P={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},k=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function D(t,e,n,i){if(t===e&&n===i)return s;const a=e=>function(t,e,n,i,a){let s,r,o=0;do{r=e+(n-e)/2,s=k(r,i,a)-t,s>0?n=r:e=r}while(Math.abs(s)>1e-7&&++o<12);return r}(e,0,1,t,n);return t=>0===t||1===t?t:k(a(t),e,i)}var E=function(t,e,n){var i=e-t;return 0===i?1:(n-t)/i},V=function(t,e,n){return-n*t+n*e+t},$=function(t,e){return void 0===e&&(e="end"),function(n){var i,a,s,r=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,o="end"===e?Math.floor(r):Math.ceil(r);return i=0,a=1,s=o/t,Math.min(Math.max(s,i),a)}};const R={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 W(t){if("function"==typeof t)return t;if(Array.isArray(t))return D(...t);if(R[t])return R[t];if(t.startsWith("steps")){const e=U.exec(t);if(e){const t=e[1].split(",");return $(parseFloat(t[0]),t[1].trim())}}return s}function F(t,e){return O(t)?t[(n=0,i=t.length,a=e,s=i-n,((a-n)%s+s)%s+n)]:t;var n,i,a,s}function q(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=E(0,e,i);t.push(V(n,1,a))}}function C(t){const e=[0];return q(e,t-1),e}function z(t,e=C(t.length),n=s){const i=t.length,a=i-e.length;return a>0&&q(e,a),a=>{let s=0;for(;s<i-2&&!(a<e[s+1]);s++);let r=(o=E(e[s],e[s+1],a),Math.min(1,Math.max(o,0)));var o;return r=F(n,s)(r),V(t[s],t[s+1],r)}}class K{constructor(t,e,{easing:n=P.easing,duration:i=P.duration,delay:a=P.delay,endDelay:s=P.endDelay,offset:r,repeat:o=P.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=i*(o+1),u=z(e,r,O(n)?n.map(W):W(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}this.pauseTime&&(e=this.pauseTime);let n=(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-a,0);const r=n/i;let o=Math.floor(r),f=r%1;!f&&r>=1&&(f=1),1===f&&o--;const h=o%2;("reverse"===c||"alternate"===c&&h||"alternate-reverse"===c&&!h)&&(f=1-f);const p=n>=l?1:Math.min(f,1),y=u(p);t(y);n>=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 X=(t,e)=>{let n=g(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=u.get(e);t&&(n=t.initialValue)}return n};const Y=t=>Array.isArray(t)?t:[t];function Z(t,e,i,s={}){let{duration:r=P.duration,delay:c=P.delay,endDelay:l=P.endDelay,repeat:h=P.repeat,easing:p=P.easing,direction:d,offset:w,allowWebkitAcceleration:S=!1}=s;const M=n(t);let A=j.waapi(),k=a;const D=(t=>y.has(t))(e);D&&(o[e]&&(e=o[e]),((t,e)=>{const{activeTransforms:i}=n(t);var a,s;s=e,-1===(a=i).indexOf(s)&&a.push(s),t.style.transform=m(i)})(t,e),e=f(e));const E=u.get(e);let V,$=function(t,e,n){for(let i=0;i<t.length;i++)null===t[i]&&(t[i]=i?t[i-1]:X(e,n));return t}(Y(i),t,e);if(function(t,e){t.activeAnimations[e]&&(x(t.activeAnimations[e]),t.activeAnimations[e]=void 0)}(M,e),g(e)?(k=((t,e)=>n=>t.style.setProperty(e,n))(t,e),j.cssRegisterProperty()?function(t){if(!v.has(t)){v.add(t);try{const{syntax:e,initialValue:n}=u.has(t)?u.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(e):A=!1):k=((t,e)=>n=>t.style[e]=n)(t,e),A){E&&($=$.map((t=>"number"==typeof t?E.toDefaultUnit(t):t))),j.partialKeyframes()||1!==$.length||$.unshift(X(t,e));const n={delay:b(c),duration:b(r),endDelay:b(l),easing:O(p)?void 0:T(p),direction:d,iterations:h+1};V=t.animate({[e]:$,offset:w,easing:O(p)?p.map(T):void 0},n),V.finished||(V.finished=new Promise(((t,e)=>{V.onfinish=t,V.oncancel=e})));const i=$[$.length-1];V.finished.then((()=>k(i))).catch(a),S||(V.playbackRate=1.000001)}else if(D&&$.every(_)){if(1===$.length&&$.unshift(X(t,e)||(null==E?void 0:E.initialValue)||0),$=$.map((t=>"string"==typeof t?parseFloat(t):t)),E){const t=k;k=e=>t(E.toDefaultUnit(e))}V=function(t,e=[0,1],n={}){return new K(t,e,n)}(k,$,s)}else{const t=$[$.length-1];k(E&&"number"==typeof t?E.toDefaultUnit(t):t)}return M.activeAnimations[e]=V,V}const _=t=>"number"==typeof t,B=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function I(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t)}function G(t){const e={animations:t,finished:Promise.all(t.map((t=>t.finished)))};return new Proxy(e,H)}const H={get:(t,e)=>{var n,i;switch(e){case"finished":return t.finished;case"currentTime":const a=(null===(n=t.animations[0])||void 0===n?void 0:n[e])||0;return a?a/1e3:0;case"playbackRate":return null===(i=t.animations[0])||void 0===i?void 0:i[e];case"stop":return()=>t.animations.forEach(x);default:return()=>t.animations.forEach((t=>t[e]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n=b(n);case"currentTime":case"playbackRate":for(let i=0;i<t.animations.length;i++)t.animations[i][e]=n;return!0}return!1}};function J(t,e,n){return"function"==typeof t?t(e,n):t}function L(t,e,n,i){var a;return"number"==typeof e?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:null!==(a=i.get(e))&&void 0!==a?a:t}function N(t,e,n,a,s,r){!function(t,e,n){for(let a=0;a<t.length;a++){const s=t[a];s.at>e&&s.at<n&&(i(t,s),a--)}}(t,s,r);for(let i=0;i<e.length;i++)t.push({value:e[i],at:V(s,r,a[i]),easing:F(n,i)})}function Q(t,e){return t.at===e.at?null===t.value?1:-1:t.at-e.at}function tt(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function et(t,e){return e[t]||(e[t]=[]),e[t]}t.animate=function(t,e,n={}){const i=[],a=(t=I(t)).length;for(let s=0;s<a;s++){const r=t[s];for(const t in e){const o=B(n,t);o.delay=J(o.delay,s,a);const c=Z(r,t,e[t],o);c&&i.push(c)}}return G(i)},t.animateStyle=Z,t.stagger=function(t=.1,{start:e=0,from:n=0,easing:i}={}){return(a,s)=>{const r="number"==typeof n?n:function(t,e){if("first"===t)return 0;{const n=e-1;return"last"===t?n:n/2}}(n,s),o=Math.abs(r-a);let c=t*o;if(i){const t=s*a;c=W(i)(c/t)*t}return e+c}},t.timeline=function(t,e={}){const n=[],i=function(t,e={}){var{defaultOptions:n={}}=e,i=function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(i=Object.getOwnPropertySymbols(t);a<i.length;a++)e.indexOf(i[a])<0&&Object.prototype.propertyIsEnumerable.call(t,i[a])&&(n[i[a]]=t[i[a]])}return n}(e,["defaultOptions"]);const a=[],s=new Map,r={},o=new Map;let c=0,l=0,u=0;for(let e=0;e<t.length;e++){const[i,a,f={}]=t[e];void 0!==f.at&&(l=L(l,f.at,c,o));let h=0;const p=I(i,r),y=p.length;for(let t=0;t<y;t++){const e=tt(p[t],s);for(const i in a){const s=et(i,e),r=Y(a[i]),o=B(f,i),{duration:c=n.duration||P.duration,easing:p=n.easing||P.easing,offset:m=C(r.length)}=o,d=J(f.delay,t,y)||0,g=l+d,v=g+c;1===m.length&&0===m[0]&&(m[1]=1);const b=length-r.length;b>0&&q(m,b),1===r.length&&r.unshift(null),N(s,r,p,m,g,v),h=Math.max(d+c,h),u=Math.max(v,u)}}c=l,l+=h}return s.forEach(((t,e)=>{for(const s in t){const r=t[s];r.sort(Q);const o=[],c=[],l=[];for(let t=0;t<r.length;t++){const{at:e,value:n,easing:i}=r[t];o.push(n),c.push(E(0,u,e)),l.push(i||P.easing)}1!==c[c.length-1]&&(c.push(1),o.push(null)),a.push([e,s,o,Object.assign(Object.assign(Object.assign({},n),{duration:u,easing:l,offset:c}),i)])}})),a}(t,e);for(let t=0;t<i.length;t++){const e=Z(...i[t]);e&&n.push(e)}return G(n)},Object.defineProperty(t,"__esModule",{value:!0})}));