motion 10.5.0-alpha.1 → 10.5.0-alpha.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Matt Perry
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/motion.min.js

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