motion - npm Package Compare versions

Comparing version 10.1.2 to 10.1.3

CHANGELOG.md

@@ -5,8 +5,14 @@ # Changelog
 
-## [10.1.2] [2021-10-02]
+## [10.1.3] [2021-10-01]
 
 ### Fixed
 
-- **Fill both:** Previously, if a timeline animation had a delay and an initially-defined first keyframe (`opacity: [0, 1]`) the animation would start from its rendered style to that first keyframe. Now, the initial keyframe gets stretched to the very start of the whole animation by setting `fill: "both"`. [Issue (sponsors only)](https://github.com/motiondivision/motion/issues/20)
+- **Fill both for timelines:** Extends `fill: "both"` effect from `10.1.2` to `timeline`.
 
+## [10.1.2] [2021-10-01]
+
+### Fixed
+
+- **Fill both:** Previously, if an animation had a delay and an initially-defined first keyframe (`opacity: [0, 1]`) the animation would start from its rendered style to that first keyframe. Now, the initial keyframe gets stretched to the very start of the whole animation by setting `fill: "both"`. [Issue (sponsors only)](https://github.com/motiondivision/motion/issues/20)
+
 ## [10.1.1] [2021-09-28]
@@ -13,0 +19,0 @@

dist/motion.min.js

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

dist/motion.umd.js

@@ -924,3 +924,13 @@ (function (global, factory) {
                 /**
-                 * If the generated animation doesn't end on the final keyframe,
+                 * If the first keyframe doesn't land on offset: 0
+                 * provide one by duplicating the initial keyframe. This ensures
+                 * it snaps to the first keyframe when the animation starts.
+                 */
+                if (valueOffset[0] !== 0) {
+                    valueOffset.unshift(0);
+                    keyframes.unshift(keyframes[0]);
+                    valueEasing.unshift("linear");
+                }
+                /**
+                 * If the last keyframe doesn't land on offset: 1
                  * provide one with a null wildcard value. This will ensure it
@@ -927,0 +937,0 @@ * stays static until the end of the animation.

dist/size-timeline-dom.js

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

dist/targets/dom/timeline/index.cjs.js

@@ -125,3 +125,13 @@ 'use strict';
             /**
-             * If the generated animation doesn't end on the final keyframe,
+             * If the first keyframe doesn't land on offset: 0
+             * provide one by duplicating the initial keyframe. This ensures
+             * it snaps to the first keyframe when the animation starts.
+             */
+            if (valueOffset[0] !== 0) {
+                valueOffset.unshift(0);
+                keyframes.unshift(keyframes[0]);
+                valueEasing.unshift("linear");
+            }
+            /**
+             * If the last keyframe doesn't land on offset: 1
              * provide one with a null wildcard value. This will ensure it
@@ -128,0 +138,0 @@ * stays static until the end of the animation.

dist/targets/dom/timeline/index.es.js

@@ -121,3 +121,13 @@ import { __rest } from 'tslib';
             /**
-             * If the generated animation doesn't end on the final keyframe,
+             * If the first keyframe doesn't land on offset: 0
+             * provide one by duplicating the initial keyframe. This ensures
+             * it snaps to the first keyframe when the animation starts.
+             */
+            if (valueOffset[0] !== 0) {
+                valueOffset.unshift(0);
+                keyframes.unshift(keyframes[0]);
+                valueEasing.unshift("linear");
+            }
+            /**
+             * If the last keyframe doesn't land on offset: 1
              * provide one with a null wildcard value. This will ensure it
@@ -124,0 +134,0 @@ * stays static until the end of the animation.

package.json

 {
   "name": "motion",
-  "version": "10.1.2",
+  "version": "10.1.3",
   "description": "The Motion library for the web",
@@ -5,0 +5,0 @@ "author": "Matt Perry",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

237160

increased by0.65%

Lines of code

4337

increased by0.74%

No dependency changes