framer-motion/dist/mini.js

A simple and powerful JavaScript animation library

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Motion={},t.React)}(this,(function(t,e){"use strict";function n(t){const n=e.useRef(null);return null===n.current&&(n.current=t()),n.current}function i(t){let e;return()=>(void 0===e&&(e=t()),e)}const a=t=>t,r=t=>1e3*t,o=t=>t/1e3,s=i((()=>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("--"),m=(t,e,n)=>{c(e)?t.style.setProperty(e,n):t.style[e]=n},h=(t,e)=>c(e)?t.style.getPropertyValue(e):t.style[e],d=t=>null!==t;const f=i((()=>{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 n=i(t);return()=>y[e]??n()}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}const R=new WeakMap;class w{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=R.get(t)||new Map;return R.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]:h(t,e)),"number"==typeof n[a]&&p.has(e)&&(n[a]=n[a]+"px");return!i&&!f()&&n.length<2&&n.unshift(h(t,e)),n}(e,n,i,a);o.type,o=function({type:t,...e}){return function(t){return"function"==typeof t&&"applyToOptions"in t}(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 m=v(s,a);return Array.isArray(m)&&(c.easing=m),t.animate(c,{delay:i,duration:a,easing:Array.isArray(m)?"linear":m,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||(m(e,n,function(t,{repeat:e,repeatType:n="loop"},i){const a=t.filter(d),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,a}then(t,e){return this.finished.then(t).catch(e)}}function E(t,e,n,i){const a=function(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)}(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 w({element:i,name:t,keyframes:n,transition:a,allowFlatten:!c.type&&!c.ease}))}}var l,u;return s}t.useAnimate=function(){const t=n((()=>({current:null,animations:[]}))),i=n((()=>(t=>function(e,n,i){return new u(E(e,n,i,t))})(t)));var a;return a=()=>{t.animations.forEach((t=>t.stop()))},e.useEffect((()=>()=>a()),[]),[t,i]}}));