framer-motion
Version:
A simple and powerful JavaScript animation library
2 lines (1 loc) • 9.46 kB
JavaScript
!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";function e(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}function n(t){let e;return()=>(void 0===e&&(e=t()),e)}const i=t=>t,a=(t,e,n)=>{const i=e-t;return 0===i?1:(n-t)/i},r=t=>1e3*t,o=t=>t/1e3,s=n((()=>void 0!==window.ScrollTimeline));class l{constructor(t){this.stop=()=>this.runAll("stop"),this.animations=t.filter(Boolean)}get finished(){return Promise.all(this.animations.map((t=>t.finished)))}getAll(t){return this.animations[0][t]}setAll(t,e){for(let n=0;n<this.animations.length;n++)this.animations[n][t]=e}attachTimeline(t,e){const n=this.animations.map((n=>s()&&n.attachTimeline?n.attachTimeline(t):"function"==typeof e?e(n):void 0));return()=>{n.forEach(((t,e)=>{t&&t(),this.animations[e].stop()}))}}get time(){return this.getAll("time")}set time(t){this.setAll("time",t)}get speed(){return this.getAll("speed")}set speed(t){this.setAll("speed",t)}get startTime(){return this.getAll("startTime")}get duration(){let t=0;for(let e=0;e<this.animations.length;e++)t=Math.max(t,this.animations[e].duration);return t}runAll(t){this.animations.forEach((e=>e[t]()))}flatten(){this.runAll("flatten")}play(){this.runAll("play")}pause(){this.runAll("pause")}cancel(){this.runAll("cancel")}complete(){this.runAll("complete")}}class u extends l{then(t,e){return this.finished.finally(t).then((()=>{}))}}const c=t=>t.startsWith("--"),h=(t,e,n)=>{c(e)?t.style.setProperty(e,n):t.style[e]=n},f=(t,e)=>c(e)?t.style.getPropertyValue(e):t.style[e],m=t=>null!==t;const d=n((()=>{try{document.createElement("div").animate({opacity:[1]})}catch(t){return!1}return!0})),p=new Set(["borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderRadius","radius","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","width","maxWidth","height","maxHeight","top","right","bottom","left","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","backgroundPositionX","backgroundPositionY"]);const y={};function g(t,e){const i=n(t);return()=>y[e]??i()}const A=g((()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0}),"linearEasing"),b=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,T={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",circIn:b([0,.65,.55,1]),circOut:b([.55,0,1,.45]),backIn:b([.31,.01,.66,-.59]),backOut:b([.33,1.53,.69,.99])};function v(t,e){return t?"function"==typeof t&&A()?((t,e,n=10)=>{let i="";const a=Math.max(Math.round(e/n),2);for(let e=0;e<a;e++)i+=t(e/(a-1))+", ";return`linear(${i.substring(0,i.length-2)})`})(t,e):(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?b(t):Array.isArray(t)?t.map((t=>v(t,e)||T.easeOut)):T[t]:void 0}function w(t){return"function"==typeof t&&"applyToOptions"in t}const x=new WeakMap;class k{constructor(t){if("animation"in t)return void(this.animation=t.animation);const{element:e,name:n,keyframes:i,pseudoElement:a,allowFlatten:r=!1}=t;let{transition:o}=t;this.isPseudoElement=Boolean(a),this.allowFlatten=r;const s=function(t){const e=x.get(t)||new Map;return x.set(t,e),e}(e),l=((t,e)=>`${t}:${e}`)(n,a||""),u=s.get(l);u&&u.stop();const c=function(t,e,n,i){Array.isArray(n)||(n=[n]);for(let a=0;a<n.length;a++)null===n[a]&&(n[a]=0!==a||i?n[a-1]:f(t,e)),"number"==typeof n[a]&&p.has(e)&&(n[a]=n[a]+"px");return!i&&!d()&&n.length<2&&n.unshift(f(t,e)),n}(e,n,i,a);o.type,o=function({type:t,...e}){return w(t)?t.applyToOptions(e):(e.duration??(e.duration=300),e.ease??(e.ease="easeOut"),e)}(o),this.animation=function(t,e,n,{delay:i=0,duration:a=300,repeat:r=0,repeatType:o="loop",ease:s="easeInOut",times:l}={},u){const c={[e]:n};l&&(c.offset=l);const h=v(s,a);return Array.isArray(h)&&(c.easing=h),t.animate(c,{delay:i,duration:a,easing:Array.isArray(h)?"linear":h,fill:"both",iterations:r+1,direction:"reverse"===o?"alternate":"normal",pseudoElement:u})}(e,n,c,o,a),!1===o.autoplay&&this.animation.pause(),this.removeAnimation=()=>s.delete(l),this.animation.onfinish=()=>{a||(h(e,n,function(t,{repeat:e,repeatType:n="loop"},i){const a=t.filter(m),r=e&&"loop"!==n&&e%2==1?0:a.length-1;return r&&void 0!==i?i:a[r]}(c,o)),this.cancel())},s.set(l,this)}play(){this.animation.play()}pause(){this.animation.pause()}complete(){this.animation.finish()}cancel(){try{this.animation.cancel()}catch(t){}this.removeAnimation()}stop(){const{state:t}=this;"idle"!==t&&"finished"!==t&&(this.commitStyles(),this.cancel())}commitStyles(){this.isPseudoElement||this.animation.commitStyles?.()}get duration(){const t=this.animation.effect?.getComputedTiming().duration||0;return o(Number(t))}get time(){return o(Number(this.animation.currentTime)||0)}set time(t){this.animation.currentTime=r(t)}get speed(){return this.animation.playbackRate}set speed(t){this.animation.playbackRate=t}get state(){return this.animation.playState}get startTime(){return Number(this.animation.startTime)}get finished(){return this.animation.finished}flatten(){this.allowFlatten&&this.animation.effect?.updateTiming({easing:"linear"})}attachTimeline(t){return this.animation.timeline=t,this.animation.onfinish=null,i}then(t,e){return this.finished.then(t).catch(e)}}const M=2e4;function O(t,e=100,n){const i=n({...t,keyframes:[0,e]}),a=Math.min(function(t){let e=0,n=t.next(e);for(;!n.done&&e<M;)e+=50,n=t.next(e);return e>=M?1/0:e}(i),M);return{type:"keyframes",ease:t=>i.next(a*t).value/e,duration:o(a)}}function E(t,e,n){if(t instanceof EventTarget)return[t];if("string"==typeof t){let i=document;e&&(i=e.current);const a=n?.[t]??i.querySelectorAll(t);return a?Array.from(a):[]}return Array.from(t)}function R(t,e){return n=t,Array.isArray(n)&&"number"!=typeof n[0]?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t;var n}const W=(t,e,n)=>t+(e-t)*n;function B(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const r=a(0,e,i);t.push(W(n,1,r))}}function S(t){const e=[0];return B(e,t.length-1),e}function P(t,e,n,i){return"string"==typeof t&&function(t){return"object"==typeof t&&!Array.isArray(t)}(e)?E(t,n,i):t instanceof NodeList?Array.from(t):Array.isArray(t)?t:[t]}function $(t,e,n){return t*(e+1)}function I(t,e,n,i){return"number"==typeof e?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:i.get(e)??t}function L(t,n,i,a,r,o){!function(t,n,i){for(let a=0;a<t.length;a++){const r=t[a];r.at>n&&r.at<i&&(e(t,r),a--)}}(t,r,o);for(let e=0;e<n.length;e++)t.push({value:n[e],at:W(r,o,a[e]),easing:R(i,e)})}function F(t,e){for(let n=0;n<t.length;n++)t[n]=t[n]/(e+1)}function N(t,e){return t.at===e.at?null===t.value?1:null===e.value?-1:0:t.at-e.at}function j(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function q(t,e){return e[t]||(e[t]=[]),e[t]}function V(t){return Array.isArray(t)?t:[t]}function z(t,e){return t&&t[e]?{...t,...t[e]}:{...t}}const C=t=>"number"==typeof t,D=t=>t.every(C);function H(t,e,n,i){const a=E(t,i),o=a.length,s=[];for(let t=0;t<o;t++){const i=a[t],c={...n};"function"==typeof c.delay&&(c.delay=c.delay(t,o));for(const t in e){const n=e[t],a={...(l=c,u=t,l?.[u]??l?.default??l)};a.duration&&(a.duration=r(a.duration)),a.delay&&(a.delay=r(a.delay)),s.push(new k({element:i,name:t,keyframes:n,transition:a,allowFlatten:!c.type&&!c.ease}))}}var l,u;return s}const X=(t=>function(e,n,i){return new u(H(e,n,i,t))})();t.animate=X,t.animateSequence=function(t,e){const n=[];return function(t,{defaultTransition:e={},...n}={},i,o){const s=e.duration||.3,l=new Map,u=new Map,c={},h=new Map;let f=0,m=0,d=0;for(let n=0;n<t.length;n++){const a=t[n];if("string"==typeof a){h.set(a,m);continue}if(!Array.isArray(a)){h.set(a.name,I(m,a.at,f,h));continue}let[l,y,g={}]=a;void 0!==g.at&&(m=I(m,g.at,f,h));let A=0;const b=(t,n,i,a=0,l=0)=>{const u=V(t),{delay:c=0,times:h=S(u),type:f="keyframes",repeat:p,repeatType:y,repeatDelay:g=0,...b}=n;let{ease:T=e.ease||"easeOut",duration:v}=n;const x="function"==typeof c?c(a,l):c,k=u.length,M=w(f)?f:o?.[f];if(k<=2&&M){let t=100;if(2===k&&D(u)){const e=u[1]-u[0];t=Math.abs(e)}const e={...b};void 0!==v&&(e.duration=r(v));const n=O(e,t,M);T=n.ease,v=n.duration}v??(v=s);const E=m+x;1===h.length&&0===h[0]&&(h[1]=1);const W=h.length-u.length;if(W>0&&B(h,W),1===u.length&&u.unshift(null),p){v=$(v,p);const t=[...u],e=[...h];T=Array.isArray(T)?[...T]:[T];const n=[...T];for(let i=0;i<p;i++){u.push(...t);for(let a=0;a<t.length;a++)h.push(e[a]+(i+1)),T.push(0===a?"linear":R(n,a-1))}F(h,p)}const P=E+v;L(i,u,T,h,E,P),A=Math.max(x+v,A),d=Math.max(P,d)};if(p=l,Boolean(p&&p.getVelocity))b(y,g,q("default",j(l,u)));else{const t=P(l,y,i,c),e=t.length;for(let n=0;n<e;n++){const i=j(t[n],u);for(const t in y)b(y[t],z(g,t),q(t,i),n,e)}}f=m,m+=A}var p;return u.forEach(((t,i)=>{for(const r in t){const o=t[r];o.sort(N);const s=[],u=[],c=[];for(let t=0;t<o.length;t++){const{at:e,value:n,easing:i}=o[t];s.push(n),u.push(a(0,d,e)),c.push(i||"easeOut")}0!==u[0]&&(u.unshift(0),s.unshift(s[0]),c.unshift("easeInOut")),1!==u[u.length-1]&&(u.push(1),s.push(null)),l.has(i)||l.set(i,{keyframes:{},transition:{}});const h=l.get(i);h.keyframes[r]=s,h.transition[r]={...e,duration:d,ease:c,times:u,...n}}})),l}(t,e).forEach((({keyframes:t,transition:e},i)=>{n.push(...H(i,t,e))})),new u(n)}}));