motion/dist/size-timeline-dom.js

The Motion library for the web

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