framer-motion/dist/mini.js

A simple and powerful JavaScript animation library

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((t="undefined"!=typeof globalThis?globalThis:t||self).Motion={},t.React)}(this,function(t,n){"use strict";function i(t){const i=n.useRef(null);return null===i.current&&(i.current=t()),i.current}const e={};const s=t=>t,o=t=>1e3*t,a=t=>t/1e3,r=0,l=!1;let u;function h(){u=void 0}const c={now:()=>(void 0===u&&c.set(e.useManualTiming?r:performance.now()),u),set:t=>{u=t,queueMicrotask(h)}};function m(t,n){return{kind:t,animation:n,timestamp:c.now(),frameTimestamp:r,frameIsProcessing:l}}class d{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,n){return this.finished.then(t,n)}}function f(t){for(let n=1;n<t.length;n++)t[n]??(t[n]=t[n-1])}const p=t=>t.startsWith("--");const g={};function y(t,n){const i=function(t){let n;return()=>(void 0===n&&(n=t()),n)}(t);return()=>g[n]??i()}const T=y(()=>void 0!==window.ScrollTimeline,"scrollTimeline"),b=y(()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0},"linearEasing"),S=([t,n,i,e])=>`cubic-bezier(${t}, ${n}, ${i}, ${e})`,k={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",circIn:S([0,.65,.55,1]),circOut:S([.55,0,1,.45]),backIn:S([.31,.01,.66,-.59]),backOut:S([.33,1.53,.69,.99])};function v(t,n){return t?"function"==typeof t?b()?((t,n,i=10)=>{let e="";const s=Math.max(Math.round(n/i),2);for(let n=0;n<s;n++)e+=Math.round(1e4*t(n/(s-1)))/1e4+", ";return`linear(${e.substring(0,e.length-2)})`})(t,n):"ease-out":(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?S(t):Array.isArray(t)?t.map(t=>v(t,n)||k.easeOut):k[t]:void 0}class A extends d{constructor(t){if(super(),this.finishedTime=null,this.isStopped=!1,this.manualStartTime=null,!t)return;const{element:n,name:i,keyframes:e,pseudoElement:s,allowFlatten:o=!1,finalKeyframe:a,onComplete:r}=t;this.isPseudoElement=Boolean(s),this.allowFlatten=o,this.options=t;const l=function({type:t,...n}){return function(t){return"function"==typeof t&&"applyToOptions"in t}(t)&&b()?t.applyToOptions(n):(n.duration??(n.duration=300),n.ease??(n.ease="easeOut"),n)}(t);this.animation=function(t,n,i,{delay:e=0,duration:s=300,repeat:o=0,repeatType:a="loop",ease:r="easeOut",times:l}={},u){const h={[n]:i};l&&(h.offset=l);const c=v(r,s);Array.isArray(c)&&(h.easing=c);const m={delay:e,duration:s,easing:Array.isArray(c)?"linear":c,fill:"both",iterations:o+1,direction:"reverse"===a?"alternate":"normal"};return u&&(m.pseudoElement=u),t.animate(h,m)}(n,i,e,l,s),!1===l.autoplay&&this.animation.pause(),this.animation.onfinish=this.onFinish=()=>{if(this.animation.onfinish=null,this.finishedTime=this.time,!s){const t=function(t,{repeat:n,repeatType:i="loop"},e,s=1){let o,a,r=0;for(let n=0;n<t.length;n++){const i=t[n];null!==i&&(r++||(o=i),a=i)}const l=s<0||n&&"loop"!==i&&n%2==1?0:r-1;return l&&void 0!==e?e:l?a:o}(e,this.options,a,this.speed);this.updateMotionValue?.(t),function(t,n,i){p(n)?t.style.setProperty(n,i):t.style[n]=i}(n,i,t),this.animation.cancel()}r?.(),this.notifyFinished()},function(t,n,i){const e=globalThis.__MOTION_INSPECT__;if(e)try{e({...m("animation-start",t),options:i?{...n,...i}:n})}catch{}}(this,t,l)}play(){this.isStopped||(this.manualStartTime=null,this.animation.onfinish=this.onFinish,this.animation.play(),"finished"===this.state&&this.updateFinished())}pause(){this.animation.pause()}complete(){this.isStopped||(this.animation.onfinish=this.onFinish),this.animation.finish?.()}cancel(){this.animation.onfinish=null;try{this.animation.cancel()}catch(t){}}stop(){this.isStopped||(this.isStopped=!0,"idle"!==this.state&&null===this.finishedTime&&(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 a(Number(t))}get iterationDuration(){const{delay:t=0}=this.options||{};return this.duration+a(t)}get time(){return a(Number(this.animation.currentTime)||0)}set time(t){const n=null!==this.finishedTime;this.manualStartTime=null,this.finishedTime=null,this.animation.currentTime=o(t),n&&(this.animation.pause(),this.updateFinished())}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,onAttach:n,observe:i}){return this.allowFlatten&&this.animation.effect?.updateTiming({easing:"linear"}),this.animation.onfinish=this.onFinish=null,t&&T()?(this.animation.timeline=t,n?.(this.animation),s):i(this)}}class E{constructor(t){this.stop=()=>{for(const t of this.animations)t.stop()},this.animations=t.filter(Boolean)}get finished(){return Promise.all(this.animations.map(t=>t.finished))}getAll(t){return this.animations[0][t]}attachTimeline(t){const n=this.animations.map(n=>n.attachTimeline(t));return()=>{n.forEach((t,n)=>{t&&t(),this.animations[n].stop()})}}get time(){return this.getAll("time")}set time(t){for(const n of this.animations)n.time=t}get speed(){return this.getAll("speed")}set speed(t){for(const n of this.animations)n.speed=t}get state(){return this.getAll("state")}get startTime(){return this.getAll("startTime")}get duration(){return w(this.animations,"duration")}get iterationDuration(){return w(this.animations,"iterationDuration")}play(){for(const t of this.animations)t.play()}pause(){for(const t of this.animations)t.pause()}cancel(){for(const t of this.animations)t.cancel()}complete(){for(const t of this.animations)t.complete()}}function w(t,n){let i=0;for(let e=0;e<t.length;e++){const s=t[e][n];null!==s&&s>i&&(i=s)}return i}class R extends E{then(t,n){return this.finished.finally(t).then(()=>{})}}const B=new WeakMap,I=(t,n="")=>`${t}:${n}`;function F(t){let n=B.get(t);return n||(n=new Map,B.set(t,n)),n}function M(t,n){const i=t?.[n]??t?.default??t;return i!==t?function(t,n){if(t?.inherit&&n){const{inherit:i,...e}=t;return{...n,...e}}return t}(i,t):i}const P=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 _(t,n){for(let i=0;i<t.length;i++)"number"==typeof t[i]&&P.has(n)&&(t[i]=t[i]+"px")}const O={};function x(t,n){const i=window.getComputedStyle(t);return p(n)?i.getPropertyValue(n):i[n]}function W(t,n,i,e){const s=[];return function(t,n,i,e,s){if(null==n)return;const a=function(t,n){if(null==t)return[];if(t instanceof EventTarget)return[t];if("string"==typeof t){const i=(n?n.current:O.current?.root||document).querySelectorAll(t);return i?Array.from(i):[]}return Array.from(t).filter(t=>null!=t)}(n,s),r=a.length;for(let n=0;n<r;n++){const s=a[n],l={...e};"function"==typeof l.delay&&(l.delay=l.delay(n,r));for(const n in i){let e=i[n];Array.isArray(e)||(e=[e]);const a={...M(l,n)};a.duration&&(a.duration=o(a.duration)),a.delay&&(a.delay=o(a.delay));const r=F(s),u=I(n,a.pseudoElement||""),h=r.get(u);h&&h.stop(),t.push({map:r,key:u,unresolvedKeyframes:e,options:{...a,element:s,name:n,allowFlatten:!l.type&&!l.ease}})}}}(s,t,n,i,e),function(t){for(let n=0;n<t.length;n++){const{unresolvedKeyframes:i,options:e}=t[n],{element:s,name:o,pseudoElement:a}=e;a||null!==i[0]||(i[0]=x(s,o)),f(i),_(i,o),!a&&i.length<2&&i.unshift(x(s,o)),e.keyframes=i}const n=[];for(let i=0;i<t.length;i++){const{map:e,key:s,options:o}=t[i],a=new A(o);e.set(s,a),a.finished.finally(()=>e.delete(s)),n.push(a)}return n}(s)}t.useAnimate=function(){const t=i(()=>({current:null,animations:[]})),e=i(()=>(t=>function(n,i,e){return new R(W(n,i,e,t))})(t));var s;return s=()=>{t.animations.forEach(t=>t.stop())},n.useEffect(()=>()=>s(),[]),[t,e]}});