framer-motion/dist/dom-mini.js

A simple and powerful JavaScript animation library

!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,e){return e?`${t}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${e}`:t}let i=()=>{},s=()=>{};"undefined"!=typeof process&&"production"!==process.env?.NODE_ENV&&(i=(t,e,i)=>{t||"undefined"==typeof console||console.warn(n(e,i))},s=(t,e,i)=>{if(!t)throw new Error(n(e,i))});const o={};const r=t=>t,a=(t,e,n)=>{const i=e-t;return i?(n-t)/i:1},l=t=>1e3*t,u=t=>t/1e3;function c(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 h=["setup","read","resolveKeyframes","preUpdate","update","preRender","render","postRender"];function d(t,e){let n=!1,i=!0;const s={delta:0,timestamp:0,isProcessing:!1},r=()=>n=!0,a=h.reduce((t,e)=>(t[e]=function(t){let e=new Set,n=new Set,i=!1,s=!1;const o=new Set;let r={delta:0,timestamp:0,isProcessing:!1};function a(e){o.has(e)&&(n.add(e),t()),e(r)}const l={schedule:(t,s=!1,r=!1)=>{const a=r&&i?e:n;return s&&o.add(t),a.add(t),t},cancel:t=>{n.delete(t),o.delete(t)},process:t=>{if(r=t,i)return void(s=!0);i=!0;const o=e;e=n,n=o,e.forEach(a),e.clear(),i=!1,s&&(s=!1,l.process(t))}};return l}(r),t),{}),{setup:l,read:u,resolveKeyframes:c,preUpdate:d,update:m,preRender:p,render:f,postRender:g}=a,y=()=>{const r=o.useManualTiming,a=r?s.timestamp:performance.now();n=!1,r||(s.delta=i?1e3/60:Math.max(Math.min(a-s.timestamp,40),1)),s.timestamp=a,s.isProcessing=!0,l.process(s),u.process(s),c.process(s),d.process(s),m.process(s),p.process(s),f.process(s),g.process(s),s.isProcessing=!1,n&&e&&(i=!1,t(y))};return{schedule:h.reduce((e,o)=>{const r=a[o];return e[o]=(e,o=!1,a=!1)=>(n||(n=!0,i=!0,s.isProcessing||t(y)),r.schedule(e,o,a)),e},{}),cancel:t=>{for(let e=0;e<h.length;e++)a[h[e]].cancel(t)},state:s,steps:a}}const{state:m}=d("undefined"!=typeof requestAnimationFrame?requestAnimationFrame:r,!0);let p;function f(){p=void 0}const g={now:()=>(void 0===p&&g.set(m.isProcessing||o.useManualTiming?m.timestamp:performance.now()),p),set:t=>{p=t,queueMicrotask(f)}},y=(t,e,n)=>t+(e-t)*n;function v(t,e=100,n){const i=n({...t,keyframes:[0,e]}),s=Math.min(function(t,e=50,n=2e4){let i=0,s=t.next(i);for(;!s.done&&i<n;)i+=e,s=t.next(i);return i>=n?1/0:i}(i),2e4);return{type:"keyframes",ease:t=>i.next(s*t).value/e,duration:u(s)}}function T(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const s=a(0,e,i);t.push(y(n,1,s))}}function A(t){const e=[0];return T(e,t.length-1),e}const b=t=>null!==t;function S(t,e){return{kind:t,animation:e,timestamp:g.now(),frameTimestamp:m.timestamp,frameIsProcessing:m.isProcessing}}class w{constructor(){this.isResolved=!1}get finished(){return this._finished||(this._finished=this.isResolved?Promise.resolve():new Promise(t=>{this._resolve=t})),this._finished}updateFinished(){this._finished=this._resolve=void 0,this.isResolved=!1}notifyFinished(){this.isResolved=!0,this._resolve?.()}then(t,e){return this.finished.then(t,e)}}function k(t){for(let e=1;e<t.length;e++)t[e]??(t[e]=t[e-1])}const E=t=>t.startsWith("--");const M={};function R(t,e){const n=function(t){let e;return()=>(void 0===e&&(e=t()),e)}(t);return()=>M[e]??n()}const P=R(()=>void 0!==window.ScrollTimeline,"scrollTimeline"),x=R(()=>{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})`,I={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 O(t,e){return t?"function"==typeof t?x()?((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)?B(t):Array.isArray(t)?t.map(t=>O(t,e)||I.easeOut):I[t]:void 0}function F(t){return"function"==typeof t&&"applyToOptions"in t}class _ extends w{constructor(t){if(super(),this.finishedTime=null,this.isStopped=!1,this.manualStartTime=null,!t)return;const{element:e,name:n,keyframes:i,pseudoElement:o,allowFlatten:r=!1,finalKeyframe:a,onComplete:l}=t;this.isPseudoElement=Boolean(o),this.allowFlatten=r,this.options=t,s("string"!=typeof t.type,'Mini animate() doesn\'t support "type" as a string.',"mini-spring");const u=function({type:t,...e}){return F(t)&&x()?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:r="loop",ease:a="easeOut",times:l}={},u){const c={[e]:n};l&&(c.offset=l);const h=O(a,s);Array.isArray(h)&&(c.easing=h);const d={delay:i,duration:s,easing:Array.isArray(h)?"linear":h,fill:"both",iterations:o+1,direction:"reverse"===r?"alternate":"normal"};return u&&(d.pseudoElement=u),t.animate(c,d)}(e,n,i,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(b),r=s<0||e&&"loop"!==n&&e%2==1?0:o.length-1;return r&&void 0!==i?i:o[r]}(i,this.options,a,this.speed);this.updateMotionValue&&this.updateMotionValue(t),function(t,e,n){E(e)?t.style.setProperty(e,n):t.style[e]=n}(e,n,t),this.animation.cancel()}l?.(),this.notifyFinished()},function(t,e,n){const i=globalThis.__MOTION_INSPECT__;if(i)try{i({...S("animation-start",t),options:n?{...e,...n}:e})}catch{}}(this,t,u)}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(){const t=this.options?.element;!this.isPseudoElement&&t?.isConnected&&this.animation.commitStyles?.()}get duration(){const t=this.animation.effect?.getComputedTiming?.().duration||0;return u(Number(t))}get iterationDuration(){const{delay:t=0}=this.options||{};return this.duration+u(t)}get time(){return u(Number(this.animation.currentTime)||0)}set time(t){const e=null!==this.finishedTime;this.manualStartTime=null,this.finishedTime=null,this.animation.currentTime=l(t),e&&this.animation.pause()}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,rangeStart:e,rangeEnd:n,observe:i}){return this.allowFlatten&&this.animation.effect?.updateTiming({easing:"linear"}),this.animation.onfinish=null,t&&P()?(this.animation.timeline=t,e&&(this.animation.rangeStart=e),n&&(this.animation.rangeEnd=n),r):i(this)}}class W{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 $(this.animations,"duration")}get iterationDuration(){return $(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 $(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 N extends W{then(t,e){return this.finished.finally(t).then(()=>{})}}const q=new WeakMap,V=(t,e="")=>`${t}:${e}`;function L(t){let e=q.get(t);return e||(e=new Map,q.set(t,e)),e}function C(t,e){const n=t?.[e]??t?.default??t;return n!==t?function(t,e){if(t?.inherit&&e){const{inherit:n,...i}=t;return{...e,...i}}return t}(n,t):n}const D=t=>Boolean(t&&t.getVelocity),K=new Set(["borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderRadius","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","fontSize","backgroundPositionX","backgroundPositionY"]);function U(t,e){for(let n=0;n<t.length;n++)"number"==typeof t[n]&&K.has(e)&&(t[n]=t[n]+"px")}function j(t,e,n){if(null==t)return[];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).filter(t=>null!=t)}function z(t,e){const n=window.getComputedStyle(t);return E(e)?n.getPropertyValue(e):n[e]}function H(t,e,n,i){return null==t?[]:"string"==typeof t&&function(t){return"object"==typeof t&&!Array.isArray(t)}(e)?j(t,0,i):t instanceof NodeList?Array.from(t):Array.isArray(t)?t.filter(t=>null!=t):[t]}function X(t,e,n){return t*(e+1)+n*e}function Y(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 G(t,n,i,s,o,r){!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,r);for(let e=0;e<n.length;e++)t.push({value:n[e],at:y(o,r,s[e]),easing:c(i,e)})}function J(t,e,n=0){const i=e+1+e*n;for(let e=0;e<t.length;e++)t[e]=t[e]/i}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 tt(t,e){return e[t]||(e[t]=[]),e[t]}function et(t){return Array.isArray(t)?t:[t]}function nt(t,e){return t&&t[e]?{...t,...t[e]}:{...t}}const it=t=>"number"==typeof t,st=t=>t.every(it);function ot(t,e,n,i){if(null==t)return[];const o=j(t),r=o.length;s(Boolean(r),"No valid elements provided.","no-valid-elements");const a=[];for(let t=0;t<r;t++){const i=o[t],s={...n};"function"==typeof s.delay&&(s.delay=s.delay(t,r));for(const t in e){let n=e[t];Array.isArray(n)||(n=[n]);const o={...C(s,t)};o.duration&&(o.duration=l(o.duration)),o.delay&&(o.delay=l(o.delay));const r=L(i),u=V(t,o.pseudoElement||""),c=r.get(u);c&&c.stop(),a.push({map:r,key:u,unresolvedKeyframes:n,options:{...o,element:i,name:t,allowFlatten:!s.type&&!s.ease}})}}for(let t=0;t<a.length;t++){const{unresolvedKeyframes:e,options:n}=a[t],{element:i,name:s,pseudoElement:o}=n;o||null!==e[0]||(e[0]=z(i,s)),k(e),U(e,s),!o&&e.length<2&&e.unshift(z(i,s)),n.keyframes=e}const u=[];for(let t=0;t<a.length;t++){const{map:e,key:n,options:i}=a[t],s=new _(i);e.set(n,s),s.finished.finally(()=>e.delete(n)),u.push(s)}return u}const rt=(()=>function(t,e,n){return new N(ot(t,e,n))})();t.animate=rt,t.animateSequence=function(t,e){const n=[];return function(t,{defaultTransition:e={},...n}={},s,o){const r=e.duration||.3,u=new Map,h=new Map,d={},m=new Map;let p=0,f=0,g=0;for(let n=0;n<t.length;n++){const s=t[n];if("string"==typeof s){m.set(s,f);continue}if(!Array.isArray(s)){m.set(s.name,Y(f,s.at,p,m));continue}let[a,u,y={}]=s;void 0!==y.at&&(f=Y(f,y.at,p,m));let b=0;const S=(t,n,s,a=0,u=0)=>{const h=et(t),{delay:d=0,times:m=A(h),type:p=e.type||"keyframes",repeat:y,repeatType:S,repeatDelay:w=0,...k}=n;let{ease:E=e.ease||"easeOut",duration:M}=n;const R="function"==typeof d?d(a,u):d,P=h.length,x=F(p)?p:o?.[p||"keyframes"];if(P<=2&&x){let t=100;if(2===P&&st(h)){const e=h[1]-h[0];t=Math.abs(e)}const n={...e,...k};void 0!==M&&(n.duration=l(M));const i=v(n,t,x);E=i.ease,M=i.duration}M??(M=r);const B=f+R;1===m.length&&0===m[0]&&(m[1]=1);const I=m.length-h.length;if(I>0&&T(m,I),1===h.length&&h.unshift(null),y&&i(y<20,`Sequence segments can't repeat ${y} times — ignoring repeat option. Use a value below 20 or apply repeat at the sequence level instead.`),y&&y<20){const t=M>0?w/M:0;M=X(M,y,w);const e=[...h],n=[...m];E=Array.isArray(E)?[...E]:[E];const i=[...E],s="reverse"===S||"mirror"===S;let o=e,r=i;s&&(o=[...e].reverse(),"reverse"===S&&(r=[...i].reverse().map(t=>{return"function"==typeof t?(e=t,t=>1-e(1-t)):t;var e})));for(let a=0;a<y;a++){const l=s&&a%2==0,u=l?o:e,d=l?r:i,p=(a+1)*(1+t);t>0&&(h.push(h[h.length-1]),m.push(p),E.push("linear")),h.push(...u);for(let t=0;t<u.length;t++)m.push(n[t]+p),E.push(0===t?"linear":c(d,t-1))}J(m,y,t)}const O=B+M;G(s,h,E,m,B,O),b=Math.max(R+M,b),g=Math.max(O,g)};if(D(a))S(u,y,tt("default",Z(a,h)));else{const t=H(a,u,0,d),e=t.length;for(let n=0;n<e;n++){const i=Z(t[n],h);for(const t in u)S(u[t],nt(y,t),tt(t,i),n,e)}}p=f,f+=b}return h.forEach((t,i)=>{for(const s in t){const o=t[s];o.sort(Q);const r=[],l=[],c=[];for(let t=0;t<o.length;t++){const{at:e,value:n,easing:i}=o[t];r.push(n),l.push(a(0,g,e)),c.push(i||"easeOut")}0!==l[0]&&(l.unshift(0),r.unshift(r[0]),c.unshift("easeInOut")),1!==l[l.length-1]&&(l.push(1),r.push(null)),u.has(i)||u.set(i,{keyframes:{},transition:{}});const h=u.get(i);h.keyframes[s]=r;const{type:d,...m}=e;h.transition[s]={...m,duration:g,ease:c,times:l,...n}}}),u}(t,e).forEach(({keyframes:t,transition:e},i)=>{n.push(...ot(i,t,e))}),new N(n)}});