framer-motion
Version:
A simple and powerful JavaScript animation library
2 lines (1 loc) • 11.5 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)}let n=()=>{};function i(t){let e;return()=>(void 0===e&&(e=t()),e)}"undefined"!=typeof process&&"production"!==process.env?.NODE_ENV&&(n=(t,e,n)=>{if(!t)throw new Error(function(t,e){return e?`${t}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${e}`:t}(e,n))});const s=t=>t,o=(t,e,n)=>{const i=e-t;return 0===i?1:(n-t)/i},a=t=>1e3*t,r=t=>t/1e3;function l(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 u=(t,e,n)=>t+(e-t)*n,h=2e4;function c(t,e=100,n){const i=n({...t,keyframes:[0,e]}),s=Math.min(function(t){let e=0,n=t.next(e);for(;!n.done&&e<h;)e+=50,n=t.next(e);return e>=h?1/0:e}(i),h);return{type:"keyframes",ease:t=>i.next(s*t).value/e,duration:r(s)}}function d(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const s=o(0,e,i);t.push(u(n,1,s))}}function f(t){const e=[0];return d(e,t.length-1),e}const m=t=>null!==t;class p{constructor(){this.updateFinished()}get finished(){return this._finished}updateFinished(){this._finished=new Promise(t=>{this.resolve=t})}notifyFinished(){this.resolve()}then(t,e){return this.finished.then(t,e)}}function g(t){for(let e=1;e<t.length;e++)t[e]??(t[e]=t[e-1])}const y=t=>t.startsWith("--");const A=i(()=>void 0!==window.ScrollTimeline),T={};function b(t,e){const n=i(t);return()=>T[e]??n()}const v=b(()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0},"linearEasing"),k=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,S={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",circIn:k([0,.65,.55,1]),circOut:k([.55,0,1,.45]),backIn:k([.31,.01,.66,-.59]),backOut:k([.33,1.53,.69,.99])};function E(t,e){return t?"function"==typeof t?v()?((t,e,n=10)=>{let i="";const s=Math.max(Math.round(e/n),2);for(let e=0;e<s;e++)i+=Math.round(1e4*t(e/(s-1)))/1e4+", ";return`linear(${i.substring(0,i.length-2)})`})(t,e):"ease-out":(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?k(t):Array.isArray(t)?t.map(t=>E(t,e)||S.easeOut):S[t]:void 0}function w(t){return"function"==typeof t&&"applyToOptions"in t}class M extends p{constructor(t){if(super(),this.finishedTime=null,this.isStopped=!1,this.manualStartTime=null,!t)return;const{element:e,name:i,keyframes:s,pseudoElement:o,allowFlatten:a=!1,finalKeyframe:r,onComplete:l}=t;this.isPseudoElement=Boolean(o),this.allowFlatten=a,this.options=t,n("string"!=typeof t.type,'Mini animate() doesn\'t support "type" as a string.',"mini-spring");const u=function({type:t,...e}){return w(t)&&v()?t.applyToOptions(e):(e.duration??(e.duration=300),e.ease??(e.ease="easeOut"),e)}(t);this.animation=function(t,e,n,{delay:i=0,duration:s=300,repeat:o=0,repeatType:a="loop",ease:r="easeOut",times:l}={},u){const h={[e]:n};l&&(h.offset=l);const c=E(r,s);Array.isArray(c)&&(h.easing=c);const d={delay:i,duration:s,easing:Array.isArray(c)?"linear":c,fill:"both",iterations:o+1,direction:"reverse"===a?"alternate":"normal"};return u&&(d.pseudoElement=u),t.animate(h,d)}(e,i,s,u,o),!1===u.autoplay&&this.animation.pause(),this.animation.onfinish=()=>{if(this.finishedTime=this.time,!o){const t=function(t,{repeat:e,repeatType:n="loop"},i,s=1){const o=t.filter(m),a=s<0||e&&"loop"!==n&&e%2==1?0:o.length-1;return a&&void 0!==i?i:o[a]}(s,this.options,r,this.speed);this.updateMotionValue?this.updateMotionValue(t):function(t,e,n){y(e)?t.style.setProperty(e,n):t.style[e]=n}(e,i,t),this.animation.cancel()}l?.(),this.notifyFinished()}}play(){this.isStopped||(this.manualStartTime=null,this.animation.play(),"finished"===this.state&&this.updateFinished())}pause(){this.animation.pause()}complete(){this.animation.finish?.()}cancel(){try{this.animation.cancel()}catch(t){}}stop(){if(this.isStopped)return;this.isStopped=!0;const{state:t}=this;"idle"!==t&&"finished"!==t&&(this.updateMotionValue?this.updateMotionValue():this.commitStyles(),this.isPseudoElement||this.cancel())}commitStyles(){this.isPseudoElement||this.animation.commitStyles?.()}get duration(){const t=this.animation.effect?.getComputedTiming?.().duration||0;return r(Number(t))}get iterationDuration(){const{delay:t=0}=this.options||{};return this.duration+r(t)}get time(){return r(Number(this.animation.currentTime)||0)}set time(t){this.manualStartTime=null,this.finishedTime=null,this.animation.currentTime=a(t)}get speed(){return this.animation.playbackRate}set speed(t){t<0&&(this.finishedTime=null),this.animation.playbackRate=t}get state(){return null!==this.finishedTime?"finished":this.animation.playState}get startTime(){return this.manualStartTime??Number(this.animation.startTime)}set startTime(t){this.manualStartTime=this.animation.startTime=t}attachTimeline({timeline:t,observe:e}){return this.allowFlatten&&this.animation.effect?.updateTiming({easing:"linear"}),this.animation.onfinish=null,t&&A()?(this.animation.timeline=t,s):e(this)}}class B{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){const e=this.animations.map(e=>e.attachTimeline(t));return()=>{e.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 state(){return this.getAll("state")}get startTime(){return this.getAll("startTime")}get duration(){return x(this.animations,"duration")}get iterationDuration(){return x(this.animations,"iterationDuration")}runAll(t){this.animations.forEach(e=>e[t]())}play(){this.runAll("play")}pause(){this.runAll("pause")}cancel(){this.runAll("cancel")}complete(){this.runAll("complete")}}function x(t,e){let n=0;for(let i=0;i<t.length;i++){const s=t[i][e];null!==s&&s>n&&(n=s)}return n}class I extends B{then(t,e){return this.finished.finally(t).then(()=>{})}}const O=new WeakMap,R=(t,e="")=>`${t}:${e}`;function F(t){const e=O.get(t)||new Map;return O.set(t,e),e}function W(t,e){return t?.[e]??t?.default??t}const P=t=>Boolean(t&&t.getVelocity),$=new Set(["borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderRadius","radius","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","width","maxWidth","height","maxHeight","top","right","bottom","left","inset","insetBlock","insetBlockStart","insetBlockEnd","insetInline","insetInlineStart","insetInlineEnd","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingBlock","paddingBlockStart","paddingBlockEnd","paddingInline","paddingInlineStart","paddingInlineEnd","margin","marginTop","marginRight","marginBottom","marginLeft","marginBlock","marginBlockStart","marginBlockEnd","marginInline","marginInlineStart","marginInlineEnd","backgroundPositionX","backgroundPositionY"]);function N(t,e){for(let n=0;n<t.length;n++)"number"==typeof t[n]&&$.has(e)&&(t[n]=t[n]+"px")}function V(t,e,n){if(t instanceof EventTarget)return[t];if("string"==typeof t){let e=document;const i=n?.[t]??e.querySelectorAll(t);return i?Array.from(i):[]}return Array.from(t)}function L(t,e){const n=window.getComputedStyle(t);return y(e)?n.getPropertyValue(e):n[e]}function D(t,e,n,i){return"string"==typeof t&&function(t){return"object"==typeof t&&!Array.isArray(t)}(e)?V(t,0,i):t instanceof NodeList?Array.from(t):Array.isArray(t)?t:[t]}function C(t,e,n){return t*(e+1)}function K(t,e,n,i){return"number"==typeof e?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:e.startsWith("<")?Math.max(0,n+parseFloat(e.slice(1))):i.get(e)??t}function _(t,n,i,s,o,a){!function(t,n,i){for(let s=0;s<t.length;s++){const o=t[s];o.at>n&&o.at<i&&(e(t,o),s--)}}(t,o,a);for(let e=0;e<n.length;e++)t.push({value:n[e],at:u(o,a,s[e]),easing:l(i,e)})}function j(t,e){for(let n=0;n<t.length;n++)t[n]=t[n]/(e+1)}function q(t,e){return t.at===e.at?null===t.value?1:null===e.value?-1:0:t.at-e.at}function z(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function H(t,e){return e[t]||(e[t]=[]),e[t]}function X(t){return Array.isArray(t)?t:[t]}function Y(t,e){return t&&t[e]?{...t,...t[e]}:{...t}}const G=t=>"number"==typeof t,J=t=>t.every(G);function Q(t,e,i,s){const o=V(t),r=o.length;n(Boolean(r),"No valid elements provided.","no-valid-elements");const l=[];for(let t=0;t<r;t++){const n=o[t],s={...i};"function"==typeof s.delay&&(s.delay=s.delay(t,r));for(const t in e){let i=e[t];Array.isArray(i)||(i=[i]);const o={...W(s,t)};o.duration&&(o.duration=a(o.duration)),o.delay&&(o.delay=a(o.delay));const r=F(n),u=R(t,o.pseudoElement||""),h=r.get(u);h&&h.stop(),l.push({map:r,key:u,unresolvedKeyframes:i,options:{...o,element:n,name:t,allowFlatten:!s.type&&!s.ease}})}}for(let t=0;t<l.length;t++){const{unresolvedKeyframes:e,options:n}=l[t],{element:i,name:s,pseudoElement:o}=n;o||null!==e[0]||(e[0]=L(i,s)),g(e),N(e,s),!o&&e.length<2&&e.unshift(L(i,s)),n.keyframes=e}const u=[];for(let t=0;t<l.length;t++){const{map:e,key:n,options:i}=l[t],s=new M(i);e.set(n,s),s.finished.finally(()=>e.delete(n)),u.push(s)}return u}const U=(()=>function(t,e,n){return new I(Q(t,e,n))})();t.animate=U,t.animateSequence=function(t,e){const i=[];return function(t,{defaultTransition:e={},...i}={},s,r){const u=e.duration||.3,h=new Map,m=new Map,p={},g=new Map;let y=0,A=0,T=0;for(let i=0;i<t.length;i++){const s=t[i];if("string"==typeof s){g.set(s,A);continue}if(!Array.isArray(s)){g.set(s.name,K(A,s.at,y,g));continue}let[o,h,b={}]=s;void 0!==b.at&&(A=K(A,b.at,y,g));let v=0;const k=(t,i,s,o=0,h=0)=>{const m=X(t),{delay:p=0,times:g=f(m),type:y="keyframes",repeat:b,repeatType:k,repeatDelay:S=0,...E}=i;let{ease:M=e.ease||"easeOut",duration:B}=i;const x="function"==typeof p?p(o,h):p,I=m.length,O=w(y)?y:r?.[y||"keyframes"];if(I<=2&&O){let t=100;if(2===I&&J(m)){const e=m[1]-m[0];t=Math.abs(e)}const e={...E};void 0!==B&&(e.duration=a(B));const n=c(e,t,O);M=n.ease,B=n.duration}B??(B=u);const R=A+x;1===g.length&&0===g[0]&&(g[1]=1);const F=g.length-m.length;if(F>0&&d(g,F),1===m.length&&m.unshift(null),b){n(b<20,"Repeat count too high, must be less than 20","repeat-count-high"),B=C(B,b);const t=[...m],e=[...g];M=Array.isArray(M)?[...M]:[M];const i=[...M];for(let n=0;n<b;n++){m.push(...t);for(let s=0;s<t.length;s++)g.push(e[s]+(n+1)),M.push(0===s?"linear":l(i,s-1))}j(g,b)}const W=R+B;_(s,m,M,g,R,W),v=Math.max(x+B,v),T=Math.max(W,T)};if(P(o))k(h,b,H("default",z(o,m)));else{const t=D(o,h,0,p),e=t.length;for(let n=0;n<e;n++){const i=z(t[n],m);for(const t in h)k(h[t],Y(b,t),H(t,i),n,e)}}y=A,A+=v}return m.forEach((t,n)=>{for(const s in t){const a=t[s];a.sort(q);const r=[],l=[],u=[];for(let t=0;t<a.length;t++){const{at:e,value:n,easing:i}=a[t];r.push(n),l.push(o(0,T,e)),u.push(i||"easeOut")}0!==l[0]&&(l.unshift(0),r.unshift(r[0]),u.unshift("easeInOut")),1!==l[l.length-1]&&(l.push(1),r.push(null)),h.has(n)||h.set(n,{keyframes:{},transition:{}});const c=h.get(n);c.keyframes[s]=r,c.transition[s]={...e,duration:T,ease:u,times:l,...i}}}),h}(t,e).forEach(({keyframes:t,transition:e},n)=>{i.push(...Q(n,t,e))}),new I(i)}});