UNPKG

framer-motion

Version:

A simple and powerful JavaScript animation library

3 lines (2 loc) • 10 kB
let t=()=>{};"undefined"!=typeof process&&"production"!==process.env?.NODE_ENV&&(t=(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 e={};const n=t=>t,i=t=>1e3*t,s=t=>t/1e3,o=["setup","read","resolveKeyframes","preUpdate","update","preRender","render","postRender"];function a(t,n){let i=!1,s=!0;const a={delta:0,timestamp:0,isProcessing:!1},r=()=>i=!0,l=o.reduce((t,e)=>(t[e]=function(t){let e=new Set,n=new Set,i=!1,s=!1;const o=new Set;let a={delta:0,timestamp:0,isProcessing:!1};function r(e){o.has(e)&&(n.add(e),t()),e(a)}const l={schedule:(t,s=!1,a=!1)=>{const r=a&&i?e:n;return s&&o.add(t),r.add(t),t},cancel:t=>{n.delete(t),o.delete(t)},process:t=>{if(a=t,i)return void(s=!0);i=!0;const o=e;e=n,n=o,e.forEach(r),e.clear(),i=!1,s&&(s=!1,l.process(t))}};return l}(r),t),{}),{setup:u,read:d,resolveKeyframes:c,preUpdate:m,update:h,preRender:p,render:f,postRender:g}=l,y=()=>{const o=e.useManualTiming,r=o?a.timestamp:performance.now();i=!1,o||(a.delta=s?1e3/60:Math.max(Math.min(r-a.timestamp,40),1)),a.timestamp=r,a.isProcessing=!0,u.process(a),d.process(a),c.process(a),m.process(a),h.process(a),p.process(a),f.process(a),g.process(a),a.isProcessing=!1,i&&n&&(s=!1,t(y))};return{schedule:o.reduce((e,n)=>{const o=l[n];return e[n]=(e,n=!1,r=!1)=>(i||(i=!0,s=!0,a.isProcessing||t(y)),o.schedule(e,n,r)),e},{}),cancel:t=>{for(let e=0;e<o.length;e++)l[o[e]].cancel(t)},state:a,steps:l}}const{state:r}=a("undefined"!=typeof requestAnimationFrame?requestAnimationFrame:n,!0);let l;function u(){l=void 0}const d={now:()=>(void 0===l&&d.set(r.isProcessing||e.useManualTiming?r.timestamp:performance.now()),l),set:t=>{l=t,queueMicrotask(u)}},c=t=>null!==t;function m(t,e){return{kind:t,animation:e,timestamp:d.now(),frameTimestamp:r.timestamp,frameIsProcessing:r.isProcessing}}class h{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 p(t){for(let e=1;e<t.length;e++)t[e]??(t[e]=t[e-1])}const f=t=>t.startsWith("--");const g={};function y(t,e){const n=function(t){let e;return()=>(void 0===e&&(e=t()),e)}(t);return()=>g[e]??n()}const T=y(()=>void 0!==window.ScrollTimeline,"scrollTimeline"),v=y(()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0},"linearEasing"),S=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,b={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 A(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)?S(t):Array.isArray(t)?t.map(t=>A(t,e)||b.easeOut):b[t]:void 0}class E extends h{constructor(e){if(super(),this.finishedTime=null,this.isStopped=!1,this.manualStartTime=null,!e)return;const{element:n,name:i,keyframes:s,pseudoElement:o,allowFlatten:a=!1,finalKeyframe:r,onComplete:l}=e;this.isPseudoElement=Boolean(o),this.allowFlatten=a,this.options=e,t("string"!=typeof e.type,'Mini animate() doesn\'t support "type" as a string.',"mini-spring");const u=function({type:t,...e}){return function(t){return"function"==typeof t&&"applyToOptions"in t}(t)&&v()?t.applyToOptions(e):(e.duration??(e.duration=300),e.ease??(e.ease="easeOut"),e)}(e);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 d={[e]:n};l&&(d.offset=l);const c=A(r,s);Array.isArray(c)&&(d.easing=c);const m={delay:i,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(d,m)}(n,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(c),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){f(e)?t.style.setProperty(e,n):t.style[e]=n}(n,i,t),this.animation.cancel()}l?.(),this.notifyFinished()},function(t,e,n){const i=globalThis.__MOTION_INSPECT__;if(i)try{i({...m("animation-start",t),options:n?{...e,...n}:e})}catch{}}(this,e,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 s(Number(t))}get iterationDuration(){const{delay:t=0}=this.options||{};return this.duration+s(t)}get time(){return s(Number(this.animation.currentTime)||0)}set time(t){const e=null!==this.finishedTime;this.manualStartTime=null,this.finishedTime=null,this.animation.currentTime=i(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:i,observe:s}){return this.allowFlatten&&this.animation.effect?.updateTiming({easing:"linear"}),this.animation.onfinish=null,t&&T()?(this.animation.timeline=t,e&&(this.animation.rangeStart=e),i&&(this.animation.rangeEnd=i),n):s(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 k(this.animations,"duration")}get iterationDuration(){return k(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 k(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 R extends w{then(t,e){return this.finished.finally(t).then(()=>{})}}const P=new WeakMap,B=(t,e="")=>`${t}:${e}`;function I(t){let e=P.get(t);return e||(e=new Map,P.set(t,e)),e}function M(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 _=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 O(t,e){for(let n=0;n<t.length;n++)"number"==typeof t[n]&&_.has(e)&&(t[n]=t[n]+"px")}function F(t,e){const n=window.getComputedStyle(t);return f(e)?n.getPropertyValue(e):n[e]}function $(e,n,s,o){if(null==e)return[];const a=function(t,e){if(null==t)return[];if(t instanceof EventTarget)return[t];if("string"==typeof t){let n=document;e&&(n=e.current);const i=n.querySelectorAll(t);return i?Array.from(i):[]}return Array.from(t).filter(t=>null!=t)}(e,o),r=a.length;t(Boolean(r),"No valid elements provided.","no-valid-elements");const l=[];for(let t=0;t<r;t++){const e=a[t],o={...s};"function"==typeof o.delay&&(o.delay=o.delay(t,r));for(const t in n){let s=n[t];Array.isArray(s)||(s=[s]);const a={...M(o,t)};a.duration&&(a.duration=i(a.duration)),a.delay&&(a.delay=i(a.delay));const r=I(e),u=B(t,a.pseudoElement||""),d=r.get(u);d&&d.stop(),l.push({map:r,key:u,unresolvedKeyframes:s,options:{...a,element:e,name:t,allowFlatten:!o.type&&!o.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]=F(i,s)),p(e),O(e,s),!o&&e.length<2&&e.unshift(F(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 E(i);e.set(n,s),s.finished.finally(()=>e.delete(n)),u.push(s)}return u}const x=t=>function(e,n,i){return new R($(e,n,i,t))},N=x();export{N as animateMini,x as createScopedWaapiAnimate}; //# sourceMappingURL=size-rollup-waapi-animate.js.map