motion 10.6.0 → 10.7.0

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 Motion One adheres to [Semantic Versioning](http://semver.org/).
 
+## [10.7.0] [2022-03-20]
+
+### Added
+
+- Added support for Motion Developer Tools.
+
+## [10.6.2] [2022-02-08]
+
+### Fixed
+
+- Fixed velocity calculations of critically and overdamped animations.
+
+## [10.6.1] [2022-02-06]
+
+### Fixed
+
+- Fixed velocity transfer of interrupted generated animations. [Issue (sponsors only)](https://github.com/motiondivision/motionone/issues/43)
+
 ## [10.6.0] [2022-01-22]
 
 ### Added

package/README.md

@@ -0,0 +1,22 @@
+# Motion One
+
+A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance.
+
+## 📚 Documentation
+
+Full docs are available at [motion.dev](https://motion.dev).
+
+## 🙌 Sponsors
+
+A huge thank you to all sponsors of this project, with a special shoutout to:
+
+- [Victor Pontis](https://github.com/vpontis)
+- [‹div›RIOTS](https://github.com/divriots)
+- [Alex Frazer](https://github.com/AlexFrazer)
+- [Derek Reynolds](https://github.com/derekr)
+- [Martin Pitt](https://github.com/Martin-Pitt)
+- [Mihael Konjević](https://github.com/retro)
+- [impactvelocity](https://github.com/impactvelocity)
+- [Namit Chadha](https://github.com/nc)
+
+[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/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,{transforms:[],animations:{},generators:{},prevGeneratorState:{}}),e.get(t)}function a(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}const i={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},r=t=>"number"==typeof t,s=t=>"object"==typeof t&&Boolean(t.createAnimation),o=t=>Array.isArray(t)&&!r(t[0]),c=(t,e,n)=>-n*t+n*e+t,l=()=>{},u=t=>t,h=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function f(t,e){const n=t[t.length-1];for(let a=1;a<=e;a++){const i=h(0,e,a);t.push(c(n,1,i))}}function d(t){const e=[0];return f(e,t-1),e}const p=t=>1e3*t,m=t=>t/1e3;const y=["","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:u},skew:v},M=new Map,S=t=>`--motion-${t}`,x=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{y.forEach((e=>{x.push(t+e),M.set(S(t+e),b[t])}))}));const T=(t,e)=>x.indexOf(t)-x.indexOf(e),w=new Set(x),O=t=>w.has(t),j=t=>t.sort(T).reduce(k,"").trim(),k=(t,e)=>`${t} ${e}(var(${S(e)}))`,A=t=>t.startsWith("--"),D=new Set;const P=(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 u;const i=e=>function(t,e,n,a,i){let r,s,o=0;do{s=e+(n-e)/2,r=P(s,a,i)-t,r>0?n=s:e=s}while(Math.abs(r)>1e-7&&++o<12);return s}(e,0,1,t,n);return t=>0===t||1===t?t:P(i(t),e,a)}const $=(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 r=0,s=1,o=i/t,Math.min(Math.max(o,r),s);var r,s,o},q={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)},E=/\((.*?)\)/;function V(t){if("function"==typeof t)return t;if(Array.isArray(t))return R(...t);if(q[t])return q[t];if(t.startsWith("steps")){const e=E.exec(t);if(e){const t=e[1].split(",");return $(parseFloat(t[0]),t[1].trim())}}return u}function F(t,e){return o(t)?t[((t,e,n)=>{const a=e-t;return((n-t)%a+a)%a+t})(0,t.length,e)]:t}function W(t,e=d(t.length),n=u){const a=t.length,i=a-e.length;return i>0&&f(e,i),i=>{let r=0;for(;r<a-2&&!(i<e[r+1]);r++);let s=(o=h(e[r],e[r+1],i),Math.min(1,Math.max(o,0)));var o;return s=F(n,r)(s),c(t[r],t[r+1],s)}}class U{constructor(t,e=[0,1],{easing:n=i.easing,duration:a=i.duration,delay:r=i.delay,endDelay:c=i.endDelay,repeat:l=i.repeat,offset:u,direction:h="normal"}={}){if(this.startTime=0,this.rate=1,this.t=0,this.cancelTimestamp=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e})),s(n)){const t=n.createAnimation(e,(()=>"0"),!0);n=t.easing,void 0!==t.keyframes&&(e=t.keyframes),void 0!==t.duration&&(a=t.duration)}const f=a*(l+1),d=W(e,u,o(n)?n.map(V):V(n));this.tick=e=>{var n;this.pauseTime&&(e=this.pauseTime);let i=(e-this.startTime)*this.rate;this.t=i,i/=1e3,i=Math.max(i-r,0),"finished"===this.playState&&(i=f);const s=i/a;let o=Math.floor(s),l=s%1;!l&&s>=1&&(l=1),1===l&&o--;const u=o%2;("reverse"===h||"alternate"===h&&u||"alternate-reverse"===h&&!u)&&(l=1-l);const p=d(i>=f?1:Math.min(l,1));t(p);"finished"===this.playState||i>=f+c?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,p)):"idle"!==this.playState&&(this.frameRequestId=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(){var t;this.playState="idle",this.tick(this.cancelTimestamp),null===(t=this.reject)||void 0===t||t.call(this,!1),void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId)}reverse(){this.rate*=-1}commitStyles(){this.cancelTimestamp=performance.now()}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 B=t=>(t=>Array.isArray(t)&&r(t[0]))(t)?C(t):t,C=([t,e,n,a])=>`cubic-bezier(${t}, ${e}, ${n}, ${a})`,I=t=>document.createElement("div").animate(t,{duration:.001}),z={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{I({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(I({opacity:[0,1]}).finished)},G={},K={};for(const t in z)K[t]=()=>(void 0===G[t]&&(G[t]=z[t]()),G[t]);const X=t=>Array.isArray(t)?t:[t];function Y(t){return g[t]&&(t=g[t]),O(t)?S(t):t}const Z={get:(t,e)=>{e=Y(e);let n=A(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=M.get(e);t&&(n=t.initialValue)}return n},set:(t,e,n)=>{e=Y(e),A(e)?t.style.setProperty(e,n):t.style[e]=n}};function _(t){if(t&&"finished"!==t.playState)try{t.commitStyles(),t.cancel()}catch(t){}}function H(t,e,a,c={}){let u,{duration:h=i.duration,delay:f=i.delay,endDelay:d=i.endDelay,repeat:m=i.repeat,easing:y=i.easing,direction:v,offset:b,allowWebkitAcceleration:S=!1}=c;const x=n(t);let T=K.waapi();const w=O(e);w&&((t,e)=>{g[e]&&(e=g[e]);const{transforms:a}=n(t);var i,r;r=e,-1===(i=a).indexOf(r)&&i.push(r),t.style.transform=j(a)})(t,e);const k=Y(e),P=M.get(k);return _(x.animations[k]),()=>{const e=()=>{var e,n;return null!==(n=null!==(e=Z.get(t,k))&&void 0!==e?e:null==P?void 0:P.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(s(y)){const t=y.createAnimation(n,e,w,k,x);y=t.easing,void 0!==t.keyframes&&(n=t.keyframes),void 0!==t.duration&&(h=t.duration)}if(A(k)&&(K.cssRegisterProperty()?function(t){if(!D.has(t)){D.add(t);try{const{syntax:e,initialValue:n}=M.has(t)?M.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(k):T=!1),T){P&&(n=n.map((t=>r(t)?P.toDefaultUnit(t):t))),K.partialKeyframes()||1!==n.length||n.unshift(e());const a={delay:p(f),duration:p(h),endDelay:p(d),easing:o(y)?void 0:B(y),direction:v,iterations:m+1,fill:"both"};u=t.animate({[k]:n,offset:b,easing:o(y)?y.map(B):void 0},a),u.finished||(u.finished=new Promise(((t,e)=>{u.onfinish=t,u.oncancel=e})));const i=n[n.length-1];u.finished.then((()=>{Z.set(t,k,i),u.cancel()})).catch(l),S||(u.playbackRate=1.000001)}else if(w&&n.every(r)){1===n.length&&n.unshift(parseFloat(e()));u=new U((e=>{P&&(e=P.toDefaultUnit(e)),Z.set(t,k,e)}),n,Object.assign(Object.assign({},c),{duration:h,easing:y}))}else{const e=n[n.length-1];Z.set(t,k,P&&r(e)?P.toDefaultUnit(e):e)}return x.animations[k]=u,null==u||u.finished.then((()=>{x.animations[k]=void 0,x.generators[k]=void 0,x.prevGeneratorState[k]=void 0})).catch(l),u}}const J=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function L(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 N=t=>t(),Q=(t,e=i.duration)=>new Proxy({animations:t.map(N).filter(Boolean),duration:e},et),tt=t=>t.animations[0],et={get:(t,e)=>{var n,a;switch(e){case"duration":return t.duration;case"currentTime":let i=(null===(n=tt(t))||void 0===n?void 0:n[e])||0;return i?i/1e3:0;case"playbackRate":return null===(a=tt(t))||void 0===a?void 0:a[e];case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(nt)).catch(l)),t.finished;case"stop":return()=>t.animations.forEach(_);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}},nt=t=>t.finished;function at(t,e,n){return"function"==typeof t?t(e,n):t}function it(t,e,n={}){const a=(t=L(t)).length,i=[];for(let r=0;r<a;r++){const s=t[r];for(const t in e){const o=J(n,t);o.delay=at(o.delay,r,a);const c=H(s,t,e[t],o);i.push(c)}}return Q(i,n.duration)}function rt(t,e,n,a){var i;return r(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 st(t,e,n,i,r,s){!function(t,e,n){for(let i=0;i<t.length;i++){const r=t[i];r.at>e&&r.at<n&&(a(t,r),i--)}}(t,r,s);for(let a=0;a<e.length;a++)t.push({value:e[a],at:c(r,s,i[a]),easing:F(n,a)})}function ot(t,e){return t.at===e.at?null===t.value?1:-1:t.at-e.at}function ct(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function lt(t,e){return e[t]||(e[t]=[]),e[t]}function ut(t,e,n){const a=Math.max(e-5,0);return i=n-t(a),(r=5)?i*(1e3/r):0;var i,r}const ht=100,ft=10,dt=1;const pt=({stiffness:t=ht,damping:e=ft,mass:n=dt,from:a=0,to:i=1,velocity:r=0,restSpeed:s=2,restDistance:o=.5}={})=>{r=r?m(r):0;const c={done:!1,hasReachedTarget:!1,current:a,target:i,velocity:r},l=((t=ht,e=ft,n=dt)=>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,l);let d;return d=l<1?t=>i-Math.exp(-l*h*t)*((l*h*u-r)/f*Math.sin(f*t)+u*Math.cos(f*t)):t=>i-Math.exp(-h*t)*(u+(r+h*u)*t),t=>{c.current=d(t),c.velocity=0===t?r:ut(d,t,c.current);const e=Math.abs(c.velocity)<=s,n=Math.abs(i-c.current)<=o;var l,u,h;return c.done=e&&n,c.hasReachedTarget=(l=a,u=i,h=c.current,l<u&&h>=u||l>u&&h<=u),c}};function mt(t){const e=new WeakMap;return(n={})=>{const a=new Map,i=(e=0,i=100,r=0,s=!1)=>{const o=`${e}-${i}-${r}-${s}`;return a.has(o)||a.set(o,t(Object.assign({from:e,to:i,velocity:r,restSpeed:s?.05:2,restDistance:s?.01:.5},n))),a.get(o)},r=t=>(e.has(t)||e.set(t,function(t){let e,n=10,a=t(0);const i=[a.current];for(;!a.done&&n<1e4;)a=t(n),i.push(a.done?a.target:a.current),void 0===e&&a.hasReachedTarget&&(e=n),n+=10;const r=n-10;return 1===i.length&&i.push(a.current),{keyframes:i,duration:r/1e3,overshootDuration:(null!=e?e:r)/1e3}}(t)),e.get(t));return{createAnimation:(t,e,n,a,s)=>{let o,c;const l=t.length;if(n&&l<=2&&t.every(yt)){const n=a&&s&&s.prevGeneratorState[a],u=n&&(1===l||2===l&&null===t[0])?n.velocity:0,h=t[l-1],f=1===l?null:t[0],d=null===f?n?n.current:parseFloat(e()):f;c=i(d,h,u,null==a?void 0:a.includes("scale"));const p=r(c);o=Object.assign(Object.assign({},p),{easing:"linear"})}else{c=i(0,100);o={easing:"ease",duration:r(c).overshootDuration}}return s&&a&&(s.generators[a]=c),o}}}}const yt=t=>"string"!=typeof t,gt=mt(pt),vt=mt((({from:t=0,velocity:e=0,power:n=.8,decay:a=.325,bounceDamping:i,bounceStiffness:r,changeTarget:s,min:o,max:c,restDistance:l=.5,restSpeed:u})=>{a=p(a);const h={hasReachedTarget:!1,done:!1,current:t,target:t,velocity:e},f=t=>void 0===o?c:void 0===c||Math.abs(o-t)<Math.abs(c-t)?o:c;let d=n*e;const m=t+d,y=void 0===s?m:s(m);h.target=y,y!==m&&(d=y-t);const g=t=>-d*Math.exp(-t/a),v=t=>y+g(t),b=t=>{const n=g(t),a=v(t);h.done=Math.abs(n)<=l,h.current=h.done?y:a,h.velocity=0===t?e:ut(v,t,h.current)};let M,S;const x=t=>{var e;(e=h.current,void 0!==o&&e<o||void 0!==c&&e>c)&&(M=t,S=pt({from:h.current,to:f(h.current),velocity:h.velocity,damping:i,stiffness:r,restDistance:l,restSpeed:u}))};return x(0),t=>{let e=!1;return S||void 0!==M||(e=!0,b(t),x(t)),void 0!==M&&t>M?(h.hasReachedTarget=!0,S(t-M)):(h.hasReachedTarget=!1,!e&&b(t),h)}}));function bt(t,e){return Q([()=>{const n=new U(t,[0,1],e);return n.finished.catch((()=>{})),n}],null==e?void 0:e.duration)}t.animate=function(t,e,n){return("function"==typeof t?bt:it)(t,e,n)},t.glide=vt,t.spring=gt,t.stagger=function(t=.1,{start:e=0,from:n=0,easing:a}={}){return(i,s)=>{const o=r(n)?n:function(t,e){if("first"===t)return 0;{const n=e-1;return"last"===t?n:n/2}}(n,s),c=Math.abs(o-i);let l=t*c;if(a){const t=s*i;l=V(a)(l/t)*t}return e+l}},t.style=Z,t.timeline=function(t,e={}){var n;const a=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 r=[],o=new Map,c={},l=new Map;let u=0,p=0,m=0;for(let e=0;e<t.length;e++){const[a,r,h={}]=t[e];void 0!==h.at&&(p=rt(p,h.at,u,l));let y=0;const g=L(a,c),v=g.length;for(let t=0;t<v;t++){const e=ct(g[t],o);for(const a in r){const o=lt(a,e);let c=X(r[a]);const l=J(h,a);let{duration:u=n.duration||i.duration,easing:g=n.easing||i.easing}=l;if(s(g)){const t=O(a);c.length;const e=g.createAnimation(c,(()=>"0"),t);g=e.easing,void 0!==e.keyframes&&(c=e.keyframes),void 0!==e.duration&&(u=e.duration)}const b=at(h.delay,t,v)||0,M=p+b,S=M+u;let{offset:x=d(c.length)}=l;1===x.length&&0===x[0]&&(x[1]=1);const T=length-c.length;T>0&&f(x,T),1===c.length&&c.unshift(null),st(o,c,g,x,M,S),y=Math.max(b+u,y),m=Math.max(S,m)}}u=p,p+=y}return o.forEach(((t,e)=>{for(const s in t){const o=t[s];o.sort(ot);const c=[],l=[],u=[];for(let t=0;t<o.length;t++){const{at:e,value:n,easing:a}=o[t];c.push(n),l.push(h(0,m,e)),u.push(a||i.easing)}0!==l[0]&&(l.unshift(0),c.unshift(c[0]),u.unshift("linear")),1!==l[l.length-1]&&(l.push(1),c.push(null)),r.push([e,s,c,Object.assign(Object.assign(Object.assign({},n),{duration:m,easing:u,offset:l}),a)])}})),r}(t,e),r=a.map((t=>H(...t))).filter(Boolean);return Q(r,null===(n=a[0])||void 0===n?void 0:n[3].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";class e{setAnimation(t){this.animation=t,null==t||t.finished.then((()=>this.clearAnimation())).catch((()=>{}))}clearAnimation(){this.animation=this.generator=void 0}}const n=new WeakMap;function a(t){return n.has(t)||n.set(t,{transforms:[],values:new Map}),n.get(t)}function i(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}const r={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},s=t=>"number"==typeof t,o=t=>"object"==typeof t&&Boolean(t.createAnimation),c=t=>Array.isArray(t)&&!s(t[0]),l=(t,e,n)=>-n*t+n*e+t,u=()=>{},h=t=>t,f=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function d(t,e){const n=t[t.length-1];for(let a=1;a<=e;a++){const i=f(0,e,a);t.push(l(n,1,i))}}function m(t){const e=[0];return d(e,t-1),e}const p=t=>1e3*t,g=t=>t/1e3;const y=["","X","Y","Z"],v={x:"translateX",y:"translateY",z:"translateZ"},b={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},M={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:b,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:h},skew:b},T=new Map,w=t=>`--motion-${t}`,O=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{y.forEach((e=>{O.push(t+e),T.set(w(t+e),M[t])}))}));const S=(t,e)=>O.indexOf(t)-O.indexOf(e),x=new Set(O),A=t=>x.has(t),j=t=>t.sort(S).reduce(k,"").trim(),k=(t,e)=>`${t} ${e}(var(${w(e)}))`,D=t=>t.startsWith("--"),R=new Set;const 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 h;const i=e=>function(t,e,n,a,i){let r,s,o=0;do{s=e+(n-e)/2,r=P(s,a,i)-t,r>0?n=s:e=s}while(Math.abs(r)>1e-7&&++o<12);return s}(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 r=0,s=1,o=i/t,Math.min(Math.max(o,r),s);var r,s,o},q={ease:$(.25,.1,.25,1),"ease-in":$(.42,0,1,1),"ease-in-out":$(.42,0,.58,1),"ease-out":$(0,0,.58,1)},V=/\((.*?)\)/;function F(t){if("function"==typeof t)return t;if(Array.isArray(t))return $(...t);if(q[t])return q[t];if(t.startsWith("steps")){const e=V.exec(t);if(e){const t=e[1].split(",");return E(parseFloat(t[0]),t[1].trim())}}return h}function W(t,e){return c(t)?t[((t,e,n)=>{const a=e-t;return((n-t)%a+a)%a+t})(0,t.length,e)]:t}function _(t,e=m(t.length),n=h){const a=t.length,i=a-e.length;return i>0&&d(e,i),i=>{let r=0;for(;r<a-2&&!(i<e[r+1]);r++);let s=(o=f(e[r],e[r+1],i),Math.min(1,Math.max(o,0)));var o;return s=W(n,r)(s),l(t[r],t[r+1],s)}}class U{constructor(t,e=[0,1],{easing:n=r.easing,duration:a=r.duration,delay:i=r.delay,endDelay:s=r.endDelay,repeat:l=r.repeat,offset:u,direction:h="normal"}={}){if(this.startTime=null,this.rate=1,this.t=0,this.cancelTimestamp=null,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e})),o(n)){const t=n.createAnimation(e,(()=>"0"),!0);n=t.easing,void 0!==t.keyframes&&(e=t.keyframes),void 0!==t.duration&&(a=t.duration)}const f=a*(l+1),d=_(e,u,c(n)?n.map(F):F(n));this.tick=e=>{var n;this.pauseTime&&(e=this.pauseTime);let r=(e-this.startTime)*this.rate;this.t=r,r/=1e3,r=Math.max(r-i,0),"finished"===this.playState&&(r=f);const o=r/a;let c=Math.floor(o),l=o%1;!l&&o>=1&&(l=1),1===l&&c--;const u=c%2;("reverse"===h||"alternate"===h&&u||"alternate-reverse"===h&&!u)&&(l=1-l);const m=d(r>=f?1:Math.min(l,1));t(m);"finished"===this.playState||r>=f+s?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,m)):"idle"!==this.playState&&(this.frameRequestId=requestAnimationFrame(this.tick))},this.play()}play(){var t;const e=performance.now();this.playState="running",this.pauseTime?this.startTime=e-(this.pauseTime-(null!==(t=this.startTime)&&void 0!==t?t:0)):this.startTime||(this.startTime=e),this.cancelTimestamp=this.startTime,this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}stop(){var t;this.playState="idle",void 0!==this.frameRequestId&&cancelAnimationFrame(this.frameRequestId),null===(t=this.reject)||void 0===t||t.call(this,!1)}cancel(){this.stop(),this.tick(this.cancelTimestamp)}reverse(){this.rate*=-1}commitStyles(){}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 C=t=>(t=>Array.isArray(t)&&s(t[0]))(t)?I(t):t,I=([t,e,n,a])=>`cubic-bezier(${t}, ${e}, ${n}, ${a})`,B=t=>document.createElement("div").animate(t,{duration:.001}),z={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{B({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(B({opacity:[0,1]}).finished)},K={},X={};for(const t in z)X[t]=()=>(void 0===K[t]&&(K[t]=z[t]()),K[t]);const Y=t=>Array.isArray(t)?t:[t];function Z(t){return v[t]&&(t=v[t]),A(t)?w(t):t}const L={get:(t,e)=>{e=Z(e);let n=D(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=T.get(e);t&&(n=t.initialValue)}return n},set:(t,e,n)=>{e=Z(e),D(e)?t.style.setProperty(e,n):t.style[e]=n}};function N(t,e=!0){if(t&&"finished"!==t.playState)try{t.stop?t.stop():(e&&t.commitStyles(),t.cancel())}catch(t){}}function G(t,n,i,l={}){const h=window.__MOTION_DEV_TOOLS_RECORD,f=!1!==l.record&&h;let d,{duration:m=r.duration,delay:g=r.delay,endDelay:y=r.endDelay,repeat:b=r.repeat,easing:M=r.easing,direction:w,offset:O,allowWebkitAcceleration:S=!1}=l;const x=a(t);let k=X.waapi();const P=A(n);P&&((t,e)=>{v[e]&&(e=v[e]);const{transforms:n}=a(t);var i,r;r=e,-1===(i=n).indexOf(r)&&i.push(r),t.style.transform=j(n)})(t,n);const $=Z(n),E=function(t,n){return t.has(n)||t.set(n,new e),t.get(n)}(x.values,$),q=T.get($);return N(E.animation,!(o(M)&&E.generator)&&!1!==l.record),()=>{const e=()=>{var e,n;return null!==(n=null!==(e=L.get(t,$))&&void 0!==e?e:null==q?void 0:q.initialValue)&&void 0!==n?n:0};let a=function(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}(Y(i),e);if(o(M)){const t=M.createAnimation(a,e,P,$,E);M=t.easing,void 0!==t.keyframes&&(a=t.keyframes),void 0!==t.duration&&(m=t.duration)}if(D($)&&(X.cssRegisterProperty()?function(t){if(!R.has(t)){R.add(t);try{const{syntax:e,initialValue:n}=T.has(t)?T.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}($):k=!1),k){q&&(a=a.map((t=>s(t)?q.toDefaultUnit(t):t)));const n=!X.partialKeyframes()&&1===a.length;(f||n)&&a.unshift(e());const i={delay:p(g),duration:p(m),endDelay:p(y),easing:c(M)?void 0:C(M),direction:w,iterations:b+1,fill:"both"};d=t.animate({[$]:a,offset:O,easing:c(M)?M.map(C):void 0},i),d.finished||(d.finished=new Promise(((t,e)=>{d.onfinish=t,d.oncancel=e})));const r=a[a.length-1];d.finished.then((()=>{L.set(t,$,r),d.cancel()})).catch(u),S||(d.playbackRate=1.000001)}else if(P&&a.every(s)){1===a.length&&a.unshift(parseFloat(e()));d=new U((e=>{q&&(e=q.toDefaultUnit(e)),L.set(t,$,e)}),a,Object.assign(Object.assign({},l),{duration:m,easing:M}))}else{const e=a[a.length-1];L.set(t,$,q&&s(e)?q.toDefaultUnit(e):e)}return f&&h(t,n,a,{duration:m,delay:g,easing:M,repeat:b,offset:O},"motion-one"),E.setAnimation(d),d}}const H=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function J(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 Q=t=>t(),tt=(t,e=r.duration)=>new Proxy({animations:t.map(Q).filter(Boolean),duration:e},nt),et=t=>t.animations[0],nt={get:(t,e)=>{var n,a;switch(e){case"duration":return t.duration;case"currentTime":let i=(null===(n=et(t))||void 0===n?void 0:n[e])||0;return i?i/1e3:0;case"playbackRate":return null===(a=et(t))||void 0===a?void 0:a[e];case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(at)).catch(u)),t.finished;case"stop":return()=>t.animations.forEach((t=>N(t)));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}},at=t=>t.finished;function it(t,e,n){return"function"==typeof t?t(e,n):t}function rt(t,e,n={}){const a=(t=J(t)).length,i=[];for(let r=0;r<a;r++){const s=t[r];for(const t in e){const o=H(n,t);o.delay=it(o.delay,r,a);const c=G(s,t,e[t],o);i.push(c)}}return tt(i,n.duration)}function st(t,e,n,a){var i;return s(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 ot(t,e,n,a,r,s){!function(t,e,n){for(let a=0;a<t.length;a++){const r=t[a];r.at>e&&r.at<n&&(i(t,r),a--)}}(t,r,s);for(let i=0;i<e.length;i++)t.push({value:e[i],at:l(r,s,a[i]),easing:W(n,i)})}function ct(t,e){return t.at===e.at?null===t.value?1:-1:t.at-e.at}function lt(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function ut(t,e){return e[t]||(e[t]=[]),e[t]}function ht(t,e,n){const a=Math.max(e-5,0);return i=n-t(a),(r=e-a)?i*(1e3/r):0;var i,r}const ft=100,dt=10,mt=1;const pt=({stiffness:t=ft,damping:e=dt,mass:n=mt,from:a=0,to:i=1,velocity:r=0,restSpeed:s=2,restDistance:o=.5}={})=>{r=r?g(r):0;const c={done:!1,hasReachedTarget:!1,current:a,target:i},l=i-a,u=Math.sqrt(t/n)/1e3,h=((t=ft,e=dt,n=mt)=>e/(2*Math.sqrt(t*n)))(t,e,n);let f;if(h<1){const t=u*Math.sqrt(1-h*h);f=e=>i-Math.exp(-h*u*e)*((h*u*l-r)/t*Math.sin(t*e)+l*Math.cos(t*e))}else f=t=>i-Math.exp(-u*t)*(l+(u*l-r)*t);return t=>{c.current=f(t);const e=0===t?r:ht(f,t,c.current),n=Math.abs(e)<=s,l=Math.abs(i-c.current)<=o;var u,h,d;return c.done=n&&l,c.hasReachedTarget=(u=a,h=i,d=c.current,u<h&&d>=h||u>h&&d<=h),c}};function gt(t){const e=new WeakMap;return(n={})=>{const a=new Map,i=(e=0,i=100,r=0,s=!1)=>{const o=`${e}-${i}-${r}-${s}`;return a.has(o)||a.set(o,t(Object.assign({from:e,to:i,velocity:r,restSpeed:s?.05:2,restDistance:s?.01:.5},n))),a.get(o)},r=t=>(e.has(t)||e.set(t,function(t){let e,n=10,a=t(0);const i=[a.current];for(;!a.done&&n<1e4;)a=t(n),i.push(a.done?a.target:a.current),void 0===e&&a.hasReachedTarget&&(e=n),n+=10;const r=n-10;return 1===i.length&&i.push(a.current),{keyframes:i,duration:r/1e3,overshootDuration:(null!=e?e:r)/1e3}}(t)),e.get(t));return{createAnimation:(t,e,n,a,s)=>{var o,c;let l;const u=t.length;if(n&&u<=2&&t.every(yt)){const n=t[u-1],h=1===u?null:t[0];let f=0,d=0;const m=null==s?void 0:s.generator;if(m){const{animation:e,generatorStartTime:n}=s,a=(null==e?void 0:e.startTime)||n||0,i=(null==e?void 0:e.currentTime)||performance.now()-a,r=m(i).current;d=null!==(o=h)&&void 0!==o?o:r,(1===u||2===u&&null===t[0])&&(f=ht((t=>m(t).current),i,r))}else d=null!==(c=h)&&void 0!==c?c:parseFloat(e());const p=i(d,n,f,null==a?void 0:a.includes("scale")),g=r(p);l=Object.assign(Object.assign({},g),{easing:"linear"}),s&&(s.generator=p,s.generatorStartTime=performance.now())}else{l={easing:"ease",duration:r(i(0,100)).overshootDuration}}return l}}}}const yt=t=>"string"!=typeof t,vt=gt(pt),bt=gt((({from:t=0,velocity:e=0,power:n=.8,decay:a=.325,bounceDamping:i,bounceStiffness:r,changeTarget:s,min:o,max:c,restDistance:l=.5,restSpeed:u})=>{a=p(a);const h={hasReachedTarget:!1,done:!1,current:t,target:t},f=t=>void 0===o?c:void 0===c||Math.abs(o-t)<Math.abs(c-t)?o:c;let d=n*e;const m=t+d,g=void 0===s?m:s(m);h.target=g,g!==m&&(d=g-t);const y=t=>-d*Math.exp(-t/a),v=t=>g+y(t),b=t=>{const e=y(t),n=v(t);h.done=Math.abs(e)<=l,h.current=h.done?g:n};let M,T;const w=t=>{var e;(e=h.current,void 0!==o&&e<o||void 0!==c&&e>c)&&(M=t,T=pt({from:h.current,to:f(h.current),velocity:ht(v,t,h.current),damping:i,stiffness:r,restDistance:l,restSpeed:u}))};return w(0),t=>{let e=!1;return T||void 0!==M||(e=!0,b(t),w(t)),void 0!==M&&t>M?(h.hasReachedTarget=!0,T(t-M)):(h.hasReachedTarget=!1,!e&&b(t),h)}}));function Mt(t,e){return tt([()=>{const n=new U(t,[0,1],e);return n.finished.catch((()=>{})),n}],null==e?void 0:e.duration)}t.animate=function(t,e,n){return("function"==typeof t?Mt:rt)(t,e,n)},t.glide=bt,t.spring=vt,t.stagger=function(t=.1,{start:e=0,from:n=0,easing:a}={}){return(i,r)=>{const o=s(n)?n:function(t,e){if("first"===t)return 0;{const n=e-1;return"last"===t?n:n/2}}(n,r),c=Math.abs(o-i);let l=t*c;if(a){const t=r*i;l=F(a)(l/t)*t}return e+l}},t.style=L,t.timeline=function(t,e={}){var n;const a=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,c={},l=new Map;let u=0,h=0,p=0;for(let e=0;e<t.length;e++){const[a,i,f={}]=t[e];void 0!==f.at&&(h=st(h,f.at,u,l));let g=0;const y=J(a,c),v=y.length;for(let t=0;t<v;t++){const e=lt(y[t],s);for(const a in i){const s=ut(a,e);let c=Y(i[a]);const l=H(f,a);let{duration:u=n.duration||r.duration,easing:y=n.easing||r.easing}=l;if(o(y)){const t=A(a);c.length;const e=y.createAnimation(c,(()=>"0"),t);y=e.easing,void 0!==e.keyframes&&(c=e.keyframes),void 0!==e.duration&&(u=e.duration)}const b=it(f.delay,t,v)||0,M=h+b,T=M+u;let{offset:w=m(c.length)}=l;1===w.length&&0===w[0]&&(w[1]=1);const O=length-c.length;O>0&&d(w,O),1===c.length&&c.unshift(null),ot(s,c,y,w,M,T),g=Math.max(b+u,g),p=Math.max(T,p)}}u=h,h+=g}return s.forEach(((t,e)=>{for(const s in t){const o=t[s];o.sort(ct);const c=[],l=[],u=[];for(let t=0;t<o.length;t++){const{at:e,value:n,easing:a}=o[t];c.push(n),l.push(f(0,p,e)),u.push(a||r.easing)}0!==l[0]&&(l.unshift(0),c.unshift(c[0]),u.unshift("linear")),1!==l[l.length-1]&&(l.push(1),c.push(null)),i.push([e,s,c,Object.assign(Object.assign(Object.assign({},n),{duration:p,easing:u,offset:l}),a)])}})),i}(t,e),i=a.map((t=>G(...t))).filter(Boolean);return tt(i,null===(n=a[0])||void 0===n?void 0:n[3].duration)},Object.defineProperty(t,"__esModule",{value:!0})}));

package/dist/motion.umd.js

@@ -4,18 +4,38 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Motion = {}));
 })(this, (function (exports) { 'use strict';
 
+    /**
+     * The MotionValue tracks the state of a single animatable
+     * value. Currently, updatedAt and current are unused. The
+     * long term idea is to use this to minimise the number
+     * of DOM reads, and to abstract the DOM interactions here.
+     */
+    class MotionValue {
+        setAnimation(animation) {
+            this.animation = animation;
+            animation === null || animation === void 0 ? void 0 : animation.finished.then(() => this.clearAnimation()).catch(() => { });
+        }
+        clearAnimation() {
+            this.animation = this.generator = undefined;
+        }
+    }
+
     const data = new WeakMap();
     function getAnimationData(element) {
         if (!data.has(element)) {
             data.set(element, {
                 transforms: [],
-                animations: {},
-                generators: {},
-                prevGeneratorState: {},
+                values: new Map(),
             });
         }
         return data.get(element);
     }
+    function getMotionValue(motionValues, name) {
+        if (!motionValues.has(name)) {
+            motionValues.set(name, new MotionValue());
+        }
+        return motionValues.get(name);
+    }
 
     function addUniqueItem(array, item) {
         array.indexOf(item) === -1 && array.push(item);
@@ -142,6 +162,10 @@
             name = transformAlias[name];
         const { transforms } = getAnimationData(element);
         addUniqueItem(transforms, name);
+        /**
+         * TODO: An optimisation here could be to cache the transform in element data
+         * and only update if this has changed.
+         */
         element.style.transform = buildTransformTemplate(transforms);
     };
     const buildTransformTemplate = (transforms) => transforms
@@ -289,10 +313,10 @@
 
     class Animation {
         constructor(output, keyframes = [0, 1], { easing = defaults$1.easing, duration = defaults$1.duration, delay = defaults$1.delay, endDelay = defaults$1.endDelay, repeat = defaults$1.repeat, offset, direction = "normal", } = {}) {
-            this.startTime = 0;
+            this.startTime = null;
             this.rate = 1;
             this.t = 0;
-            this.cancelTimestamp = 0;
+            this.cancelTimestamp = null;
             this.playState = "idle";
             this.finished = new Promise((resolve, reject) => {
                 this.resolve = resolve;
@@ -374,14 +398,16 @@
             this.play();
         }
         play() {
+            var _a;
             const now = performance.now();
             this.playState = "running";
             if (this.pauseTime) {
-                this.startTime = now - (this.pauseTime - this.startTime);
+                this.startTime = now - (this.pauseTime - ((_a = this.startTime) !== null && _a !== void 0 ? _a : 0));
             }
             else if (!this.startTime) {
                 this.startTime = now;
             }
+            this.cancelTimestamp = this.startTime;
             this.pauseTime = undefined;
             requestAnimationFrame(this.tick);
         }
@@ -393,23 +419,22 @@
             this.playState = "finished";
             this.tick(0);
         }
-        cancel() {
+        stop() {
             var _a;
             this.playState = "idle";
-            this.tick(this.cancelTimestamp);
-            (_a = this.reject) === null || _a === void 0 ? void 0 : _a.call(this, false);
             if (this.frameRequestId !== undefined) {
                 cancelAnimationFrame(this.frameRequestId);
             }
+            (_a = this.reject) === null || _a === void 0 ? void 0 : _a.call(this, false);
+        }
+        cancel() {
+            this.stop();
+            this.tick(this.cancelTimestamp);
         }
         reverse() {
             this.rate *= -1;
         }
-        commitStyles() {
-            // TODO: The bug now is that this is not called if the animation is finished
-            // this should be called regardless
-            this.cancelTimestamp = performance.now();
-        }
+        commitStyles() { }
         get currentTime() {
             return this.t;
         }
@@ -498,21 +523,28 @@
         },
     };
 
-    function stopAnimation(animation) {
+    function stopAnimation(animation, needsCommit = true) {
         if (!animation || animation.playState === "finished")
             return;
         // Suppress error thrown by WAAPI
         try {
-            /**
-             * commitStyles has overhead so we only want to commit and cancel
-             */
-            animation.commitStyles();
-            animation.cancel();
+            if (animation.stop) {
+                animation.stop();
+            }
+            else {
+                needsCommit && animation.commitStyles();
+                animation.cancel();
+            }
         }
         catch (e) { }
     }
 
+    function getDevToolsRecord() {
+        return window.__MOTION_DEV_TOOLS_RECORD;
+    }
     function animateStyle(element, key, keyframesDefinition, options = {}) {
+        const record = getDevToolsRecord();
+        const isRecording = options.record !== false && record;
         let animation;
         let { duration = defaults$1.duration, delay = defaults$1.delay, endDelay = defaults$1.endDelay, repeat = defaults$1.repeat, easing = defaults$1.easing, direction, offset, allowWebkitAcceleration = false, } = options;
         const data = getAnimationData(element);
@@ -524,6 +556,7 @@
          */
         valueIsTransform && addTransformToElement(element, key);
         const name = getStyleName(key);
+        const motionValue = getMotionValue(data.values, name);
         /**
          * Get definition of value, this will be used to convert numerical
          * keyframes into the default value type.
@@ -535,7 +568,8 @@
          * this is fired now and we return a factory function to create
          * the actual animation that can get called in batch,
          */
-        stopAnimation(data.animations[name]);
+        stopAnimation(motionValue.animation, !(isEasingGenerator(easing) && motionValue.generator) &&
+            options.record !== false);
         /**
          * Batchable factory function containing all DOM reads.
          */
@@ -547,7 +581,7 @@
              */
             let keyframes = hydrateKeyframes(keyframesList(keyframesDefinition), readInitialValue);
             if (isEasingGenerator(easing)) {
-                const custom = easing.createAnimation(keyframes, readInitialValue, valueIsTransform, name, data);
+                const custom = easing.createAnimation(keyframes, readInitialValue, valueIsTransform, name, motionValue);
                 easing = custom.easing;
                 if (custom.keyframes !== undefined)
                     keyframes = custom.keyframes;
@@ -583,7 +617,8 @@
                  * If this browser doesn't support partial/implicit keyframes we need to
                  * explicitly provide one.
                  */
-                if (!supports.partialKeyframes() && keyframes.length === 1) {
+                const needsToReadInitialKeyframe = !supports.partialKeyframes() && keyframes.length === 1;
+                if (isRecording || needsToReadInitialKeyframe) {
                     keyframes.unshift(readInitialValue());
                 }
                 const animationOptions = {
@@ -656,15 +691,16 @@
                     ? definition.toDefaultUnit(target)
                     : target);
             }
-            data.animations[name] = animation;
-            /**
-             * When an animation finishes, delete the reference to the previous animation.
-             */
-            animation === null || animation === void 0 ? void 0 : animation.finished.then(() => {
-                data.animations[name] = undefined;
-                data.generators[name] = undefined;
-                data.prevGeneratorState[name] = undefined;
-            }).catch(noop);
+            if (isRecording) {
+                record(element, key, keyframes, {
+                    duration,
+                    delay,
+                    easing,
+                    repeat,
+                    offset,
+                }, "motion-one");
+            }
+            motionValue.setAnimation(animation);
             return animation;
         };
     }
@@ -722,7 +758,7 @@
                     }
                     return target.finished;
                 case "stop":
-                    return () => target.animations.forEach(stopAnimation);
+                    return () => target.animations.forEach((animation) => stopAnimation(animation));
                 default:
                     return () => target.animations.forEach((animation) => animation[key]());
             }
@@ -1057,7 +1093,7 @@
     const sampleT = 5; // ms
     function calcGeneratorVelocity(resolveValue, t, current) {
         const prevT = Math.max(t - sampleT, 0);
-        return velocityPerSecond(current - resolveValue(prevT), 5);
+        return velocityPerSecond(current - resolveValue(prevT), t - prevT);
     }
 
     const defaults = {
@@ -1067,7 +1103,6 @@
     };
 
     const calcDampingRatio = (stiffness = defaults.stiffness, damping = defaults.damping, mass = defaults.mass) => damping / (2 * Math.sqrt(stiffness * mass));
-    const calcAngularFreq = (undampedFreq, dampingRatio) => undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
 
     function hasReachedTarget(origin, target, current) {
         return ((origin < target && current >= target) ||
@@ -1081,14 +1116,13 @@
             hasReachedTarget: false,
             current: from,
             target: to,
-            velocity,
         };
-        const dampingRatio = calcDampingRatio(stiffness, damping, mass);
         const initialDelta = to - from;
         const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
-        const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
+        const dampingRatio = calcDampingRatio(stiffness, damping, mass);
         let resolveSpring;
         if (dampingRatio < 1) {
+            const angularFreq = undampedAngularFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
             // Underdamped spring (bouncy)
             resolveSpring = (t) => to -
                 Math.exp(-dampingRatio * undampedAngularFreq * t) *
@@ -1099,17 +1133,18 @@
         }
         else {
             // Critically damped spring
-            resolveSpring = (t) => to -
-                Math.exp(-undampedAngularFreq * t) *
-                    (initialDelta + (velocity + undampedAngularFreq * initialDelta) * t);
+            resolveSpring = (t) => {
+                return (to -
+                    Math.exp(-undampedAngularFreq * t) *
+                        (initialDelta + (-velocity + undampedAngularFreq * initialDelta) * t));
+            };
         }
         return (t) => {
             state.current = resolveSpring(t);
-            state.velocity =
-                t === 0
-                    ? velocity
-                    : calcGeneratorVelocity(resolveSpring, t, state.current);
-            const isBelowVelocityThreshold = Math.abs(state.velocity) <= restSpeed;
+            const currentVelocity = t === 0
+                ? velocity
+                : calcGeneratorVelocity(resolveSpring, t, state.current);
+            const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
             const isBelowDisplacementThreshold = Math.abs(to - state.current) <= restDistance;
             state.done = isBelowVelocityThreshold && isBelowDisplacementThreshold;
             state.hasReachedTarget = hasReachedTarget(from, to, state.current);
@@ -1124,7 +1159,6 @@
             done: false,
             current: from,
             target: from,
-            velocity,
         };
         const isOutOfBounds = (v) => (min !== undefined && v < min) || (max !== undefined && v > max);
         const nearestBoundary = (v) => {
@@ -1151,8 +1185,6 @@
             const latest = calcLatest(t);
             state.done = Math.abs(delta) <= restDistance;
             state.current = state.done ? target : latest;
-            state.velocity =
-                t === 0 ? velocity : calcGeneratorVelocity(calcLatest, t, state.current);
         };
         /**
          * Ideally this would resolve for t in a stateless way, we could
@@ -1169,7 +1201,7 @@
             spring$1$1 = spring$1({
                 from: state.current,
                 to: nearestBoundary(state.current),
-                velocity: state.velocity,
+                velocity: calcGeneratorVelocity(calcLatest, t, state.current),
                 damping: bounceDamping,
                 stiffness: bounceStiffness,
                 restDistance,
@@ -1255,43 +1287,53 @@
                 return keyframesCache.get(generator);
             };
             return {
-                createAnimation: (keyframes, getOrigin, canUseGenerator, name, data) => {
+                createAnimation: (keyframes, getOrigin, canUseGenerator, name, motionValue) => {
+                    var _a, _b;
                     let settings;
-                    let generator;
                     const numKeyframes = keyframes.length;
                     let shouldUseGenerator = canUseGenerator &&
                         numKeyframes <= 2 &&
                         keyframes.every(isNumberOrNull);
                     if (shouldUseGenerator) {
-                        const prevMotionState = name && data && data.prevGeneratorState[name];
-                        const velocity = prevMotionState &&
-                            (numKeyframes === 1 ||
-                                (numKeyframes === 2 && keyframes[0] === null))
-                            ? prevMotionState.velocity
-                            : 0;
                         const target = keyframes[numKeyframes - 1];
                         const unresolvedOrigin = numKeyframes === 1 ? null : keyframes[0];
-                        const origin = unresolvedOrigin === null
-                            ? prevMotionState
-                                ? prevMotionState.current
-                                : parseFloat(getOrigin())
-                            : unresolvedOrigin;
-                        generator = getGenerator(origin, target, velocity, name === null || name === void 0 ? void 0 : name.includes("scale"));
+                        let velocity = 0;
+                        let origin = 0;
+                        const prevGenerator = motionValue === null || motionValue === void 0 ? void 0 : motionValue.generator;
+                        if (prevGenerator) {
+                            /**
+                             * If we have a generator for this value we can use it to resolve
+                             * the animations's current value and velocity.
+                             */
+                            const { animation, generatorStartTime } = motionValue;
+                            const startTime = (animation === null || animation === void 0 ? void 0 : animation.startTime) || generatorStartTime || 0;
+                            const currentTime = (animation === null || animation === void 0 ? void 0 : animation.currentTime) || performance.now() - startTime;
+                            const prevGeneratorCurrent = prevGenerator(currentTime).current;
+                            origin = (_a = unresolvedOrigin) !== null && _a !== void 0 ? _a : prevGeneratorCurrent;
+                            if (numKeyframes === 1 ||
+                                (numKeyframes === 2 && keyframes[0] === null)) {
+                                velocity = calcGeneratorVelocity((t) => prevGenerator(t).current, currentTime, prevGeneratorCurrent);
+                            }
+                        }
+                        else {
+                            origin = (_b = unresolvedOrigin) !== null && _b !== void 0 ? _b : parseFloat(getOrigin());
+                        }
+                        const generator = getGenerator(origin, target, velocity, name === null || name === void 0 ? void 0 : name.includes("scale"));
                         const keyframesMetadata = getKeyframes(generator);
                         settings = Object.assign(Object.assign({}, keyframesMetadata), { easing: "linear" });
+                        // TODO Add test for this
+                        if (motionValue) {
+                            motionValue.generator = generator;
+                            motionValue.generatorStartTime = performance.now();
+                        }
                     }
                     else {
-                        generator = getGenerator(0, 100);
-                        const keyframesMetadata = getKeyframes(generator);
+                        const keyframesMetadata = getKeyframes(getGenerator(0, 100));
                         settings = {
                             easing: "ease",
                             duration: keyframesMetadata.overshootDuration,
                         };
                     }
-                    // TODO Add test for this
-                    if (data && name) {
-                        data.generators[name] = generator;
-                    }
                     return settings;
                 },
             };

package/dist/size-index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "motion",
   "description": "A tiny, performant animation library for the web",
-  "version": "10.6.0",
+  "version": "10.7.0",
   "license": "MIT",
   "author": "Matt Perry",
   "main": "dist/main.cjs.js",
@@ -19,14 +19,15 @@
   "sideEffects": false,
   "scripts": {
     "build": "rm -rf lib dist types && tsc -p . && rollup -c",
-    "test": "jest --coverage --config jest.config.js"
+    "test": "jest --coverage --config jest.config.js",
+    "dev": "concurrently -c blue,red -n tsc,rollup --kill-others \"tsc --watch -p . --preserveWatchOutput\" \"rollup --c --watch --no-watch.clearScreen\""
   },
   "dependencies": {
-    "@motionone/animation": "^10.6.0",
-    "@motionone/dom": "^10.6.0",
-    "@motionone/react": "^10.6.0",
-    "@motionone/svelte": "^10.6.0",
-    "@motionone/vue": "^10.6.0"
+    "@motionone/animation": "^10.7.0",
+    "@motionone/dom": "^10.7.0",
+    "@motionone/react": "^10.7.0",
+    "@motionone/svelte": "^10.7.0",
+    "@motionone/vue": "^10.7.0"
   },
-  "gitHead": "e55a5ac6a04376cb412549a20cc652ee9efd6984"
+  "gitHead": "d1842ead7b1320c511a4558527a6dec65b4f5d6e"
 }