motion 10.2.1 → 10.3.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 Motion One adheres to [Semantic Versioning](http://semver.org/).
 
+## [10.3.0] [2021-12-05]
+
+### New
+
+- **Glide:** Animate transforms with realistic [glide](https://motion.dev/dom/glide) that can be used to mimic momentum scroll.
+
+### Fixed
+
+- Fixing a bug where sometimes velocity wasn't being correctly passed to the next animation.
+
 ## [10.2.1] [2021-10-06]
 
 ### Fixed

package/README.md

@@ -14,5 +14,6 @@ A huge thank you to all sponsors of this project, with a special shoutout to:
 - [Derek Reynolds](https://github.com/derekr)
 - [Martin Pitt](https://github.com/Martin-Pitt)
 - [Ryan Yogan](https://github.com/ryanyogan)
+- [Mihael Konjević](https://github.com/retro)
 
 [Become a sponsor](https://github.com/sponsors/mattgperry) and get access to the private Motion One repo. File issues, read the changelog and source code, and join discussions that help shape the future of the API.

package/dist/main.cjs.js

@@ -7,6 +7,7 @@ var animateStyle = require('./targets/dom/animate-style.cjs.js');
 var index = require('./targets/dom/timeline/index.cjs.js');
 var stagger = require('./utils/stagger.cjs.js');
 var index$1 = require('./targets/js/easing/spring/index.cjs.js');
+var index$2 = require('./targets/js/easing/glide/index.cjs.js');
 
 
 
@@ -15,3 +16,4 @@ exports.animateStyle = animateStyle.animateStyle;
 exports.timeline = index.timeline;
 exports.stagger = stagger.stagger;
 exports.spring = index$1.spring;
+exports.glide = index$2.glide;

package/dist/main.es.js

@@ -3,3 +3,4 @@ export { animateStyle } from './targets/dom/animate-style.es.js';
 export { timeline } from './targets/dom/timeline/index.es.js';
 export { stagger } from './utils/stagger.es.js';
 export { spring } from './targets/js/easing/spring/index.es.js';
+export { glide } from './targets/js/easing/glide/index.es.js';

package/dist/motion.min.js

@@ -1 +1 @@
-!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:{},activeGenerators:{}}),e.get(t)}function a(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}const i=()=>{},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 d=(t,e)=>h.indexOf(t)-h.indexOf(e),p=new Set(h),y=t=>t.sort(d).reduce(m,"").trim(),m=(t,e)=>`${t} ${e}(var(${f(e)}))`,g=t=>t.startsWith("--"),v=new Set;const b=t=>1e3*t;function x(t){try{"finished"!==t.playState&&t.commitStyles(),t.cancel()}catch(t){}}const M=t=>Array.isArray(t)&&"number"!=typeof t[0],O=t=>"object"==typeof t&&Boolean(t.createAnimation),w=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?T(t):t,T=([t,e,n,a])=>`cubic-bezier(${t}, ${e}, ${n}, ${a})`,S=t=>document.createElement("div").animate(t,{duration:.001}),j={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={},k=Object.keys(j).reduce(((t,e)=>(t[e]=()=>(void 0===A[e]&&(A[e]=j[e]()),A[e]),t)),{}),D={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},P=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function $(t,e,n,a){if(t===e&&n===a)return s;const i=e=>function(t,e,n,a,i){let s,r,o=0;do{r=e+(n-e)/2,s=P(r,a,i)-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:P(i(t),e,a)}const E=(t,e="end")=>n=>{const a=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,i="end"===e?Math.floor(a):Math.ceil(a);return s=0,r=1,o=i/t,Math.min(Math.max(o,s),r);var s,r,o},V={ease:$(.25,.1,.25,1),"ease-in":$(.42,0,1,1),"ease-in-out":$(.42,0,.58,1),"ease-out":$(0,0,.58,1)},q=/\((.*?)\)/;function R(t){if("function"==typeof t)return t;if(Array.isArray(t))return $(...t);if(V[t])return V[t];if(t.startsWith("steps")){const e=q.exec(t);if(e){const t=e[1].split(",");return E(parseFloat(t[0]),t[1].trim())}}return s}const W=(t,e,n)=>-n*t+n*e+t,F=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function U(t,e){return M(t)?t[((t,e,n)=>{const a=e-t;return((n-t)%a+a)%a+t})(0,t.length,e)]:t}function C(t,e){const n=t[t.length-1];for(let a=1;a<=e;a++){const i=F(0,e,a);t.push(W(n,1,i))}}function z(t){const e=[0];return C(e,t-1),e}function G(t,e=z(t.length),n=s){const a=t.length,i=a-e.length;return i>0&&C(e,i),i=>{let s=0;for(;s<a-2&&!(i<e[s+1]);s++);let r=(o=F(e[s],e[s+1],i),Math.min(1,Math.max(o,0)));var o;return r=U(n,s)(r),W(t[s],t[s+1],r)}}class B{constructor(t,e,{easing:n=D.easing,duration:a=D.duration,delay:i=D.delay,endDelay:s=D.endDelay,repeat:r=D.repeat,offset:o,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=a*(r+1);O(n)&&(n="ease");const u=G(e,o,M(n)?n.map(R):R(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-i,0);const r=n/a;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 d=n>=l?1:Math.min(f,1),p=u(d);t(p);n>=l+s?(this.playState="finished",this.resolve(p)):"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 K=(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 X=t=>Array.isArray(t)?t:[t];function Y(t,e,a,s={}){let r,{duration:c=D.duration,delay:l=D.delay,endDelay:h=D.endDelay,repeat:d=D.repeat,easing:m=D.easing,direction:T,offset:S,allowWebkitAcceleration:j=!1}=s;const A=n(t);let P=k.waapi(),$=i;const E=(t=>p.has(t))(e);E&&(o[e]&&(e=o[e]),((t,e)=>{const{activeTransforms:a}=n(t);var i,s;s=e,-1===(i=a).indexOf(s)&&i.push(s),t.style.transform=y(a)})(t,e),e=f(e));const V=u.get(e);let q=function(t,e,n){for(let a=0;a<t.length;a++)null===t[a]&&(t[a]=a?t[a-1]:K(e,n));return t}(X(a),t,e);if(O(m)){const n=m.createAnimation(q,(()=>K(t,e)),E,e,A);m=n.easing,n.keyframes&&(q=n.keyframes),n.duration&&(c=n.duration)}if(g(e)?($=((t,e)=>n=>t.style.setProperty(e,n))(t,e),k.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):P=!1):$=((t,e)=>n=>t.style[e]=n)(t,e),function(t,e){t.activeAnimations[e]&&(x(t.activeAnimations[e]),Z(t,e))}(A,e),P){V&&(q=q.map((t=>"number"==typeof t?V.toDefaultUnit(t):t))),k.partialKeyframes()||1!==q.length||q.unshift(K(t,e));const n={delay:b(l),duration:b(c),endDelay:b(h),easing:M(m)?void 0:w(m),direction:T,iterations:d+1,fill:"both"};r=t.animate({[e]:q,offset:S,easing:M(m)?m.map(w):void 0},n),r.finished||(r.finished=new Promise(((t,e)=>{r.onfinish=t,r.oncancel=e})));const a=q[q.length-1];r.finished.then((()=>{$(a),r.cancel()})).catch(i),j||(r.playbackRate=1.000001)}else if(E&&q.every(_)){if(1===q.length&&q.unshift(K(t,e)||(null==V?void 0:V.initialValue)||0),q=q.map((t=>"string"==typeof t?parseFloat(t):t)),V){const t=$;$=e=>t(V.toDefaultUnit(e))}r=function(t,e=[0,1],n={}){return new B(t,e,n)}($,q,Object.assign(Object.assign({},s),{duration:c,easing:m}))}else{const t=q[q.length-1];$(V&&"number"==typeof t?V.toDefaultUnit(t):t)}return A.activeAnimations[e]=r,null==r||r.finished.then((()=>Z(A,e))).catch(i),r}function Z(t,e){t.activeGenerators[e]=t.activeAnimations[e]=void 0}const _=t=>"number"==typeof t,I=(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)}const J=(t,e)=>new Proxy({animations:t,duration:e},N),L=t=>t.animations[0],N={get:(t,e)=>{var n,a;switch(e){case"duration":return t.duration;case"currentTime":let s=(null===(n=L(t))||void 0===n?void 0:n[e])||0;return s?s/1e3:0;case"playbackRate":return null===(a=L(t))||void 0===a?void 0:a[e];case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(Q)).catch(i)),t.finished;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 a=0;a<t.animations.length;a++)t.animations[a][e]=n;return!0}return!1}},Q=t=>t.finished;function tt(t,e,n){return"function"==typeof t?t(e,n):t}function et(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 nt(t,e,n,i,s,r){!function(t,e,n){for(let i=0;i<t.length;i++){const s=t[i];s.at>e&&s.at<n&&(a(t,s),i--)}}(t,s,r);for(let a=0;a<e.length;a++)t.push({value:e[a],at:W(s,r,i[a]),easing:U(n,a)})}function at(t,e){return t.at===e.at?null===t.value?1:-1:t.at-e.at}function it(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function st(t,e){return e[t]||(e[t]=[]),e[t]}const rt=({stiffness:t=100,damping:e=10,mass:n=1,from:a=0,to:i=1,velocity:s=0,restSpeed:r=2,restDistance:o=.5}={})=>{s=s?s/1e3:0;const c=((t=100,e=10,n=1)=>e/(2*Math.sqrt(t*n)))(t,e,n),l=i-a,u=Math.sqrt(t/n)/1e3,f=((t,e)=>t*Math.sqrt(1-e*e))(u,c),h={done:!1,value:a,velocity:s};let d;return d=c<1?t=>i-Math.exp(-c*u*t)*((c*u*l-s)/f*Math.sin(f*t)+l*Math.cos(f*t)):t=>i-Math.exp(-u*t)*(l+(s+u*l)*t),{next:t=>{h.value=d(t),h.velocity=0===t?s:function(t,e,n){const a=Math.max(e-5,0);return function(t,e){return e?t*(1e3/e):0}(n-t(a),5)}(d,t,h.value);const e=Math.abs(h.velocity)<=r,n=Math.abs(i-h.value)<=o;return h.done=e&&n,h}}};const ot=t=>"string"!=typeof t;t.animate=function(t,e,n={}){var a;const i=[],s=(t=H(t)).length;for(let a=0;a<s;a++){const r=t[a];for(const t in e){const o=I(n,t);o.delay=tt(o.delay,a,s);const c=Y(r,t,e[t],o);c&&i.push(c)}}return J(i,null!==(a=n.duration)&&void 0!==a?a:D.duration)},t.animateStyle=Y,t.spring=function(t={}){const e=new Map,n=new WeakMap,a=(n=0,a=100,i=0,s=!1)=>{const r=`${n}-${a}-${i}-${s}`;return e.has(r)||e.set(r,rt(Object.assign({from:n,to:a,velocity:i,restSpeed:s?.05:2,restDistance:s?.01:.5},t))),e.get(r)},i=(t,e,a)=>(n.has(t)||n.set(t,function(t,e,n){const a=[];let i,s=0,r=t.next(0);for(;!r.done&&s<3e3;)r=t.next(s),a.push(r.done?n:r.value),void 0===i&&(e<n&&r.value>=n||e>n&&r.value<=n)&&(i=s),s+=10;const o=s-10;return{keyframes:a,duration:o/1e3,overshootDuration:(null!=i?i:o)/1e3}}(t,e,a)),n.get(t));return{createAnimation:(t,e,n,s,r)=>{let o,c;const l=t.length;if(n&&l<=2&&t.every(ot)){const n=s&&r&&function(t,e){const n=e.activeAnimations[t],a=e.activeGenerators[t];if(n&&a)return a.next(n.currentTime)}(s,r),u=n&&(1===l||2===l&&null===t[0])?n.velocity:0,f=t[l-1],h=1===l?null:t[0],d=null===h?n?n.value:parseFloat(e()):h;c=a(d,f,u,null==s?void 0:s.includes("scale"));const p=i(c,d,f);o=Object.assign(Object.assign({},p),{easing:"linear"})}else{c=a(0,100);o={easing:"ease",duration:i(c,0,100).overshootDuration}}return o}}},t.stagger=function(t=.1,{start:e=0,from:n=0,easing:a}={}){return(i,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-i);let c=t*o;if(a){const t=s*i;c=R(a)(c/t)*t}return e+c}},t.timeline=function(t,e={}){var n,a;const i=[],s=function(t,e={}){var{defaultOptions:n={}}=e,a=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}(e,["defaultOptions"]);const i=[],s=new Map,r={},o=new Map;let c=0,l=0,u=0;for(let e=0;e<t.length;e++){const[a,i,f={}]=t[e];void 0!==f.at&&(l=et(l,f.at,c,o));let h=0;const d=H(a,r),p=d.length;for(let t=0;t<p;t++){const e=it(d[t],s);for(const a in i){const s=st(a,e),r=X(i[a]),o=I(f,a);let{duration:c=n.duration||D.duration,easing:d=n.easing||D.easing}=o;const y=tt(f.delay,t,p)||0,m=l+y,g=m+c;let{offset:v=z(r.length)}=o;1===v.length&&0===v[0]&&(v[1]=1);const b=length-r.length;b>0&&C(v,b),1===r.length&&r.unshift(null),nt(s,r,d,v,m,g),h=Math.max(y+c,h),u=Math.max(g,u)}}c=l,l+=h}return s.forEach(((t,e)=>{for(const s in t){const r=t[s];r.sort(at);const o=[],c=[],l=[];for(let t=0;t<r.length;t++){const{at:e,value:n,easing:a}=r[t];o.push(n),c.push(F(0,u,e)),l.push(a||D.easing)}0!==c[0]&&(c.unshift(0),o.unshift(o[0]),l.unshift("linear")),1!==c[c.length-1]&&(c.push(1),o.push(null)),i.push([e,s,o,Object.assign(Object.assign(Object.assign({},n),{duration:u,easing:l,offset:c}),a)])}})),i}(t,e);for(let t=0;t<s.length;t++){const e=Y(...s[t]);e&&i.push(e)}return J(i,null!==(a=null===(n=s[0])||void 0===n?void 0:n[3].duration)&&void 0!==a?a:D.duration)},Object.defineProperty(t,"__esModule",{value:!0})}));
+!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,{transforms:[],animations:{},generators:{},prevGeneratorState:{}}),e.get(t)}function a(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}const i=()=>{},s=t=>t,r=["","X","Y","Z"],o={x:"translateX",y:"translateY",z:"translateZ"},l={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},c={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:l,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:s},skew:l},u=new Map,h=t=>`--motion-${t}`,f=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{r.forEach((e=>{f.push(t+e),u.set(h(t+e),c[t])}))}));const d=(t,e)=>f.indexOf(t)-f.indexOf(e),p=new Set(f),y=t=>p.has(t),m=t=>t.sort(d).reduce(g,"").trim(),g=(t,e)=>`${t} ${e}(var(${h(e)}))`,v=t=>t.startsWith("--"),b=new Set;const M=t=>1e3*t,x=t=>"number"==typeof t,S=t=>Array.isArray(t)&&!x(t[0]),T=t=>"object"==typeof t&&Boolean(t.createAnimation),O=t=>(t=>Array.isArray(t)&&x(t[0]))(t)?w(t):t,w=([t,e,n,a])=>`cubic-bezier(${t}, ${e}, ${n}, ${a})`,j=t=>document.createElement("div").animate(t,{duration:.001}),D={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{j({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(j({opacity:[0,1]}).finished)},k={},A={};for(const t in D)A[t]=()=>(void 0===k[t]&&(k[t]=D[t]()),k[t]);const P={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},R=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function $(t,e,n,a){if(t===e&&n===a)return s;const i=e=>function(t,e,n,a,i){let s,r,o=0;do{r=e+(n-e)/2,s=R(r,a,i)-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:R(i(t),e,a)}const E=(t,e="end")=>n=>{const a=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,i="end"===e?Math.floor(a):Math.ceil(a);return s=0,r=1,o=i/t,Math.min(Math.max(o,s),r);var s,r,o},V={ease:$(.25,.1,.25,1),"ease-in":$(.42,0,1,1),"ease-in-out":$(.42,0,.58,1),"ease-out":$(0,0,.58,1)},q=/\((.*?)\)/;function W(t){if("function"==typeof t)return t;if(Array.isArray(t))return $(...t);if(V[t])return V[t];if(t.startsWith("steps")){const e=q.exec(t);if(e){const t=e[1].split(",");return E(parseFloat(t[0]),t[1].trim())}}return s}const F=(t,e,n)=>-n*t+n*e+t,U=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function B(t,e){return S(t)?t[((t,e,n)=>{const a=e-t;return((n-t)%a+a)%a+t})(0,t.length,e)]:t}function C(t,e){const n=t[t.length-1];for(let a=1;a<=e;a++){const i=U(0,e,a);t.push(F(n,1,i))}}function z(t){const e=[0];return C(e,t-1),e}function G(t,e=z(t.length),n=s){const a=t.length,i=a-e.length;return i>0&&C(e,i),i=>{let s=0;for(;s<a-2&&!(i<e[s+1]);s++);let r=(o=U(e[s],e[s+1],i),Math.min(1,Math.max(o,0)));var o;return r=B(n,s)(r),F(t[s],t[s+1],r)}}class K{constructor(t,e=[0,1],{easing:n=P.easing,duration:a=P.duration,delay:i=P.delay,endDelay:s=P.endDelay,repeat:r=P.repeat,offset:o,direction:l="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 c=a*(r+1);T(n)&&(n="ease");const u=G(e,o,S(n)?n.map(W):W(n));this.tick=e=>{this.pauseTime&&(e=this.pauseTime);let n=(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-i,0),"finished"===this.playState&&(n=c);const r=n/a;let o=Math.floor(r),h=r%1;!h&&r>=1&&(h=1),1===h&&o--;const f=o%2;("reverse"===l||"alternate"===l&&f||"alternate-reverse"===l&&!f)&&(h=1-h);const d=u(n>=c?1:Math.min(h,1));t(d);"finished"===this.playState||n>=c+s?(this.playState="finished",this.resolve(d)):"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=>Array.isArray(t)?t:[t],Y=(t,e)=>{let n=v(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=u.get(e);t&&(n=t.initialValue)}return n};function Z(t){if(t)try{"finished"!==t.playState&&t.commitStyles(),t.cancel()}catch(t){}}function _(t,e,a,s={}){let r,{duration:l=P.duration,delay:c=P.delay,endDelay:f=P.endDelay,repeat:d=P.repeat,easing:p=P.easing,direction:g,offset:w,allowWebkitAcceleration:j=!1}=s;const D=n(t);let k=A.waapi(),R=i;const $=y(e);$&&((t,e)=>{o[e]&&(e=o[e]);const{transforms:a}=n(t);var i,s;s=e,-1===(i=a).indexOf(s)&&i.push(s),t.style.transform=m(a)})(t,e);const E=function(t){return o[t]&&(t=o[t]),y(t)?h(t):t}(e),V=u.get(E);return Z(D.animations[E]),()=>{const e=()=>{var e,n;return null!==(n=null!==(e=Y(t,E))&&void 0!==e?e:null==V?void 0:V.initialValue)&&void 0!==n?n:0};let n=function(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}(X(a),e);if(T(p)){const t=p.createAnimation(n,e,$,E,D);p=t.easing,void 0!==t.keyframes&&(n=t.keyframes),void 0!==t.duration&&(l=t.duration)}if(v(E)?(R=((t,e)=>n=>t.style.setProperty(e,n))(t,E),A.cssRegisterProperty()?function(t){if(!b.has(t)){b.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):k=!1):R=((t,e)=>n=>t.style[e]=n)(t,E),k){V&&(n=n.map((t=>x(t)?V.toDefaultUnit(t):t))),A.partialKeyframes()||1!==n.length||n.unshift(e());const a={delay:M(c),duration:M(l),endDelay:M(f),easing:S(p)?void 0:O(p),direction:g,iterations:d+1,fill:"both"};r=t.animate({[E]:n,offset:w,easing:S(p)?p.map(O):void 0},a),r.finished||(r.finished=new Promise(((t,e)=>{r.onfinish=t,r.oncancel=e})));const s=n[n.length-1];r.finished.then((()=>{R(s),r.cancel()})).catch(i),j||(r.playbackRate=1.000001)}else if($&&n.every(x)){if(1===n.length&&n.unshift(parseFloat(e())),V){const t=R;R=e=>t(V.toDefaultUnit(e))}r=new K(R,n,Object.assign(Object.assign({},s),{duration:l,easing:p}))}else{const t=n[n.length-1];R(V&&x(t)?V.toDefaultUnit(t):t)}return D.animations[E]=r,null==r||r.finished.then((()=>{D.animations[E]=void 0,D.generators[E]=void 0,D.prevGeneratorState[E]=void 0})).catch(i),r}}const I=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):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)}const J=t=>t(),L=(t,e)=>new Proxy({animations:t.map(J).filter(Boolean),duration:e},Q),N=t=>t.animations[0],Q={get:(t,e)=>{var n,a;switch(e){case"duration":return t.duration;case"currentTime":let s=(null===(n=N(t))||void 0===n?void 0:n[e])||0;return s?s/1e3:0;case"playbackRate":return null===(a=N(t))||void 0===a?void 0:a[e];case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(tt)).catch(i)),t.finished;case"stop":return()=>t.animations.forEach(Z);default:return()=>t.animations.forEach((t=>t[e]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n=M(n);case"currentTime":case"playbackRate":for(let a=0;a<t.animations.length;a++)t.animations[a][e]=n;return!0}return!1}},tt=t=>t.finished;function et(t,e,n){return"function"==typeof t?t(e,n):t}function nt(t,e,n,a){var i;return x(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 at(t,e,n,i,s,r){!function(t,e,n){for(let i=0;i<t.length;i++){const s=t[i];s.at>e&&s.at<n&&(a(t,s),i--)}}(t,s,r);for(let a=0;a<e.length;a++)t.push({value:e[a],at:F(s,r,i[a]),easing:B(n,a)})}function it(t,e){return t.at===e.at?null===t.value?1:-1:t.at-e.at}function st(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function rt(t,e){return e[t]||(e[t]=[]),e[t]}const ot=({stiffness:t=100,damping:e=10,mass:n=1,from:a=0,to:i=1,velocity:s=0,restSpeed:r=2,restDistance:o=.5}={})=>{const l={done:!1,value:a,target:i,velocity:s=s?s/1e3:0,hasReachedTarget:!1},c=((t=100,e=10,n=1)=>e/(2*Math.sqrt(t*n)))(t,e,n),u=i-a,h=Math.sqrt(t/n)/1e3,f=((t,e)=>t*Math.sqrt(1-e*e))(h,c);let d;return d=c<1?t=>i-Math.exp(-c*h*t)*((c*h*u-s)/f*Math.sin(f*t)+u*Math.cos(f*t)):t=>i-Math.exp(-h*t)*(u+(s+h*u)*t),{next:t=>{l.value=d(t),l.velocity=0===t?s:lt(d,t,l.value);const e=Math.abs(l.velocity)<=r,n=Math.abs(i-l.value)<=o;var c,u,h;return l.done=e&&n,l.hasReachedTarget=(c=a,u=i,h=l.value,c<u&&h>=u||c>u&&h<=u),l}}};function lt(t,e,n){const a=Math.max(e-5,0);return i=n-t(a),(s=5)?i*(1e3/s):0;var i,s}function ct(t){const e=new WeakMap;return(n={})=>{const a=new Map,i=(e=0,i=100,s=0,r=!1)=>{const o=`${e}-${i}-${s}-${r}`;return a.has(o)||a.set(o,t(Object.assign({from:e,to:i,velocity:s,restSpeed:r?.05:2,restDistance:r?.01:.5},n))),a.get(o)},s=t=>(e.has(t)||e.set(t,function(t){let e,n=10,a=t.next(0);const i=[a.value];for(;!a.done&&n<1e4;)a=t.next(n),i.push(a.done?a.target:a.value),void 0===e&&a.hasReachedTarget&&(e=n),n+=10;const s=n-10;return 1===i.length&&i.push(a.value),{keyframes:i,duration:s/1e3,overshootDuration:(null!=e?e:s)/1e3}}(t)),e.get(t));return{createAnimation:(t,e,n,a,r)=>{let o,l;const c=t.length;if(n&&c<=2&&t.every(ut)){const n=a&&r&&r.prevGeneratorState[a],u=n&&(1===c||2===c&&null===t[0])?n.velocity:0,h=t[c-1],f=1===c?null:t[0],d=null===f?n?n.value:parseFloat(e()):f;l=i(d,h,u,null==a?void 0:a.includes("scale"));const p=s(l);o=Object.assign(Object.assign({},p),{easing:"linear"})}else{l=i(0,100);o={easing:"ease",duration:s(l).overshootDuration}}return l&&r&&a&&(r.generators[a]=l),o}}}}const ut=t=>"string"!=typeof t,ht=ct(ot),ft=ct((({from:t=0,velocity:e=0,power:n=.8,decay:a=.325,bounceDamping:i,bounceStiffness:s,changeTarget:r,min:o,max:l,restDistance:c=.5,restSpeed:u})=>{a=M(a);const h={value:t,target:t,velocity:e,hasReachedTarget:!1,done:!1},f=t=>void 0===o?l:void 0===l||Math.abs(o-t)<Math.abs(l-t)?o:l;let d=n*e;const p=t+d,y=void 0===r?p:r(p);h.target=y,y!==p&&(d=y-t);const m=t=>-d*Math.exp(-t/a),g=t=>y+m(t),v=t=>{const n=m(t),a=g(t);h.done=Math.abs(n)<=c,h.value=h.done?y:a,h.velocity=0===t?e:lt(g,t,h.value)};let b,x;const S=t=>{var e;(e=h.value,void 0!==o&&e<o||void 0!==l&&e>l)&&(b=t,x=ot({from:h.value,to:f(h.value),velocity:h.velocity,damping:i,stiffness:s,restDistance:c,restSpeed:u}))};return S(0),{next:t=>{let e=!1;return x||void 0!==b||(e=!0,v(t),S(t)),void 0!==b&&t>b?(h.hasReachedTarget=!0,x.next(t-b)):(h.hasReachedTarget=!1,!e&&v(t),h)}}}));t.animate=function(t,e,n={}){var a;const i=(t=H(t)).length,s=[];for(let a=0;a<i;a++){const r=t[a];for(const t in e){const o=I(n,t);o.delay=et(o.delay,a,i);const l=_(r,t,e[t],o);s.push(l)}}return L(s,null!==(a=n.duration)&&void 0!==a?a:P.duration)},t.animateStyle=_,t.glide=ft,t.spring=ht,t.stagger=function(t=.1,{start:e=0,from:n=0,easing:a}={}){return(i,s)=>{const r=x(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-i);let l=t*o;if(a){const t=s*i;l=W(a)(l/t)*t}return e+l}},t.timeline=function(t,e={}){var n,a;const i=function(t,e={}){var{defaultOptions:n={}}=e,a=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}(e,["defaultOptions"]);const i=[],s=new Map,r={},o=new Map;let l=0,c=0,u=0;for(let e=0;e<t.length;e++){const[a,i,h={}]=t[e];void 0!==h.at&&(c=nt(c,h.at,l,o));let f=0;const d=H(a,r),p=d.length;for(let t=0;t<p;t++){const e=st(d[t],s);for(const a in i){const s=rt(a,e),r=X(i[a]),o=I(h,a);let{duration:l=n.duration||P.duration,easing:d=n.easing||P.easing}=o;const y=et(h.delay,t,p)||0,m=c+y,g=m+l;let{offset:v=z(r.length)}=o;1===v.length&&0===v[0]&&(v[1]=1);const b=length-r.length;b>0&&C(v,b),1===r.length&&r.unshift(null),at(s,r,d,v,m,g),f=Math.max(y+l,f),u=Math.max(g,u)}}l=c,c+=f}return s.forEach(((t,e)=>{for(const s in t){const r=t[s];r.sort(it);const o=[],l=[],c=[];for(let t=0;t<r.length;t++){const{at:e,value:n,easing:a}=r[t];o.push(n),l.push(U(0,u,e)),c.push(a||P.easing)}0!==l[0]&&(l.unshift(0),o.unshift(o[0]),c.unshift("linear")),1!==l[l.length-1]&&(l.push(1),o.push(null)),i.push([e,s,o,Object.assign(Object.assign(Object.assign({},n),{duration:u,easing:c,offset:l}),a)])}})),i}(t,e),s=i.map((t=>_(...t))).filter(Boolean);return L(s,null!==(a=null===(n=i[0])||void 0===n?void 0:n[3].duration)&&void 0!==a?a:P.duration)},Object.defineProperty(t,"__esModule",{value:!0})}));