UNPKG

framer-motion

Version:

A simple and powerful JavaScript animation library

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