animare/lib/esm/index.js

Advanced animation library for modern JavaScript.

var I=(m=>(m.Forward="forward",m.Reverse="reverse",m.Alternate="alternate",m.AlternateReverse="alternate-reverse",m))(I||{}),w=(r=>(r.AfterPrevious="after-previous",r.WithPrevious="with-previous",r.FromStart="from-start",r))(w||{}),k=(e=>(e.Play="play",e.Resume="resume",e.Pause="pause",e.Stop="stop",e.Complete="complete",e.Repeat="repeat",e))(k||{}),z=(i=>(i.Vertical="y",i.Horizontal="x",i))(z||{}),H=(m=>(m.Top="top",m.Bottom="bottom",m.Left="left",m.Right="right",m))(H||{});function Q(t){return t}var C=class{#t=Object.assign({});#n=null;#u=null;#e=null;#r=null;#o=null;#a=null;#s(n,i){return this.#t[n]?this.#t[n].delete(i):!1}on(n,i){return this.#t[n]||(this.#t[n]=new Set),this.#t[n].add(i),()=>this.#s(n,i)}once(n,i){let r=this.on(n,()=>{i(),r()});return()=>this.#s(n,i)}emit(n){if(this.#t[n]){if(this.#t[n].forEach(i=>i()),n==="play"){this.#n?.(),this.#n=null;return}if(n==="resume"){this.#u?.(),this.#u=null;return}if(n==="pause"){this.#e?.(),this.#e=null;return}if(n==="complete"){this.#o?.(),this.#o=null;return}if(n==="repeat"){this.#a?.(),this.#a=null;return}n==="stop"&&(this.#r?.(),this.#r=null)}}clear(){this.#t=Object.assign({})}onPlayAsync(){if(this.#n===null)return new Promise(n=>{this.#n=n})}onResumeAsync(){if(this.#u===null)return new Promise(n=>{this.#u=n})}onPauseAsync(){if(this.#e===null)return new Promise(n=>{this.#e=n})}onStopAsync(){if(this.#r===null)return new Promise(n=>{this.#r=n})}onCompleteAsync(){if(this.#o===null)return new Promise(n=>{this.#o=n})}onRepeatAsync(){if(this.#a===null)return new Promise(n=>{this.#a=n})}};function B(t){return typeof t=="number"&&!Number.isNaN(t)&&Number.isFinite(t)}function V(t){let n=parseFloat(t);return B(n)?n/100:0}function x(t){return t<0?0:t>1?1:t}function v(t,n,i){return t<n?n:t>i?i:t}var _=class{#t;#n;#u;#e;endPoint;#r;#o;#a;#s;#h=0;#p;#i=0;#d=0;#l=0;#y=!1;#f=!1;#m;#b;animationRef;#c;#g(n,i=.001){return Math.abs(this.#i-n)<i}#A(n,i=5){return Math.abs(this.#l-n)<i}#P=Object.create(null);get info(){return Object.assign(this.#P,{name:this.animationRef.name,index:this.#t,value:this.#o,progress:this.#i,overallProgress:this.#d,elapsedTime:this.#l,isFinished:this.#y,delayCount:this.#s,playCount:this.#p,isPlaying:this.#f,isProgressAt:this.#g.bind(this),isTimeAt:this.#A.bind(this)})}constructor(n,i,r){this.#t=r,this.animationRef=n,this.#c=i,this.Setup()}Setup(){this.#y=!1,this.#f=!1,this.#l=0,this.#i=0,this.#d=0,this.#h=0,this.#p=0,this.#s=0,this.#b=D(this.animationRef.direction),this.#m=G(this.animationRef.direction),this.#r=this.#m?this.animationRef.to:this.animationRef.from,this.#o=this.#m?this.animationRef.to:this.animationRef.from,this.#a=this.#m?this.animationRef.from:this.animationRef.to;let n=this.animationRef.offset,i=this.animationRef.delayCount===0?0:this.animationRef.delay,r=this.animationRef.duration*this.animationRef.playCount+i*this.animationRef.delayCount;switch(this.#t===0?"from-start":this.animationRef.timing){case"from-start":this.#e=n;break;case"after-previous":if(!this.#c)throw new Error("The previous animation is not defined.");this.#e=this.#c.endPoint+n;break;case"with-previous":if(!this.#c)throw new Error("The previous animation is not defined.");this.#e=this.#c.#e+n;break}this.endPoint=this.#e+r,this.#n=this.#e+i,this.#u=this.#n+this.animationRef.duration}Update(n){if(this.animationRef.playCount!==0){if(n>=this.endPoint){this.#f=!1,this.#y=!0,this.#p=this.animationRef.playCount,this.#s=this.animationRef.delayCount,this.#i=1,this.#d=1,this.#l=this.endPoint-this.#e;let i=this.animationRef.direction==="reverse"||this.animationRef.direction==="alternate";this.#o=i?this.animationRef.from:this.animationRef.to;return}if(n<this.#e){this.#f=!1,this.#y=!1,this.#p=0,this.#s=0,this.#i=0,this.#d=0,this.#l=0,this.#o=this.#m?this.animationRef.to:this.animationRef.from;return}this.#f=!0,this.#d=x((n-this.#e)/(this.endPoint-this.#e)),this.#O(n)}}Set(n){Object.assign(this.animationRef,n),E(this.animationRef)}#O(n){let i=this.animationRef.delayCount,r=this.animationRef.duration,m=r*(this.animationRef.playCount-i),o=this.animationRef.duration+this.animationRef.delay,e=o*i+this.animationRef.delay*i,a=(e+m)*this.#d;if(e&&a<=e){let c=v(Math.floor(a/o),0,i-1),y=i===0?0:this.animationRef.delay;this.#n=this.#e+o*c+y,this.#s=c+1,this.#p=c+1}else{let c=a-e,y=i+v(Math.floor(c/r),0,this.animationRef.playCount-1);this.#n=this.#e+e+r*(y-i),this.#s=i,this.#p=y+1}this.#u=this.#n+this.animationRef.duration,this.#l=n-this.#n,this.#i=x(this.#l/(this.#u-this.#n));let d=this.#T();this.#o=this.#r+(this.#a-this.#r)*this.animationRef.ease(d)}#T(){if(!this.#b)return this.#i;let n=(this.#i<=.5?this.#i:this.#i-.5)*2;return this.#h=this.#i<=.5?0:1,this.#h===0?(this.#r=this.#m?this.animationRef.to:this.animationRef.from,this.#a=this.#m?this.animationRef.from:this.animationRef.to,n):(this.#r=this.#m?this.animationRef.from:this.animationRef.to,this.#a=this.#m?this.animationRef.to:this.animationRef.from,n)}};var b={from:0,duration:350,delay:0,offset:0,delayCount:1,playCount:1,direction:"forward",timing:"after-previous",ease:t=>t};function D(t){return t==="alternate"||t==="alternate-reverse"}function G(t){return t==="reverse"||t==="alternate-reverse"}function E(t){if(!t.name)throw new Error("Animation `name` is required");if(typeof t.to!="number")throw new Error("The `to` value is required");if(typeof t.duration=="number"&&t.duration<0)throw new Error("The `duration` value cannot be a negative value.");if(typeof t.delay=="number"&&t.delay<0)throw new Error("The `delay` value cannot be a negative value.");if(typeof t.playCount=="number"&&t.playCount<0)throw new Error("The `playCount` value cannot be a negative value.");if(typeof t.delayCount=="number"&&t.delayCount<0)throw new Error("The `delayCount` value cannot be a negative value.");if(typeof t.playCount=="number"&&typeof t.delayCount=="number"&&t.delayCount>t.playCount)throw new Error("The `delayCount` value cannot be greater than the `playCount` value.")}function X(t,n,i){let r=A=>typeof A=="function"?A(i):A,m=r(t.from)??n.from??b.from,o=r(t.duration)??n.duration??b.duration,e=r(t.delay)??n.delay??b.delay,f=r(t.offset)??n.offset??b.offset,a=r(t.playCount)??n.playCount??b.playCount,d=typeof e=="number"?r(t.delayCount)??n.delayCount??a:0,c=r(t.direction)??n.direction??b.direction,y=r(t.timing)??n.timing??b.timing;return{name:t.name,to:t.to,from:m,duration:o,delay:e,offset:f,playCount:a,delayCount:d,direction:c,timing:y,ease:t.ease??n.ease??b.ease}}function U(t,n){let i=o=>typeof o<"u",r=o=>typeof o=="function"?o(n):o,m={};return i(t.from)&&(m.from=r(t.from)),i(t.duration)&&(m.duration=r(t.duration)),i(t.delay)&&(m.delay=r(t.delay)),i(t.offset)&&(m.offset=r(t.offset)),i(t.playCount)&&(m.playCount=r(t.playCount)),i(t.delayCount)&&(m.delayCount=r(t.delayCount)),i(t.direction)&&(m.direction=r(t.direction)),i(t.timing)&&(m.timing=r(t.timing)),i(t.to)&&(m.to=t.to),i(t.ease)&&(m.ease=t.ease),m}function K(t,n){let i=[];for(let r=0;r<t.length;r++){let m=t[r],o=X(m,n,r);r===0&&(o.timing="from-start"),E(o),i.push(o)}return i}function L(t){if(t.timelinePlayCount===0&&console.warn("The `timelinePlayCount` with the value `0` will make the timeline not play."),typeof t.timelineSpeed=="number"&&(t.timelineSpeed===0||t.timelineSpeed<0))throw new Error("The `timelineSpeed` value cannot be a negative value or a zero.");return{timelinePlayCount:t.timelinePlayCount??1,autoPlay:t.autoPlay??!0,timelineSpeed:t.timelineSpeed??1}}function M(t){let n=[];for(let i=0;i<t.length;i++){let r=t[i],m=n[i-1];if(i===0&&r.timing!=="from-start")throw new Error('The timing value in the first animation must be "from-start".');n.push(new _(r,m,i))}return n}function S(t){let n=Math.max(...t.map(i=>i.endPoint));return n===1/0?Number.MAX_SAFE_INTEGER:n}function g(t,n,i={}){let r=L(i),m=K(t,i),o=new C,e={__startTime:0,__pauseTime:0,__lastFrameTime:0,__animations:[],__requestAnimationId:null,__startProgress:0,progress:0,duration:0,elapsedTime:0,speed:r.timelineSpeed,isPlaying:!1,isPaused:!1,isFinished:!1,isFirstFrame:!0,playCount:1,fps:60,isProgressAt(s,l=.001){return Math.abs(this.progress-s)<l},isTimeAt(s,l=5){return Math.abs(this.elapsedTime-s)<l}};e.__animations=M(m),e.duration=S(e.__animations);let f={isRegistered:!1,hiddenTime:0,add(){this.isRegistered||(document.addEventListener("visibilitychange",this.handle),this.isRegistered=!0)},remove(){document.removeEventListener("visibilitychange",this.handle),this.isRegistered=!1},handle(){if(document.visibilityState==="hidden"){f.hiddenTime=performance.now();return}document.visibilityState==="visible"&&(e.__startTime+=performance.now()-f.hiddenTime,f.hiddenTime=0)}},a=Object.create(null);a.length=t.length;for(let s=0;s<e.__animations.length;s++){let l=e.__animations[s].info;a[l.name]=l,a[l.index]=l}let d=(s,l)=>{s*=e.speed,e.elapsedTime=s-e.__startTime+e.__startProgress*e.duration,e.progress=x(e.elapsedTime/e.duration),e.fps=Math.round(1e3/(s-e.__lastFrameTime)*e.speed),isFinite(e.fps)||(e.fps=60),e.__lastFrameTime=s;for(let p=0;p<e.__animations.length;p++){let P=e.__animations[p];P.Update(e.elapsedTime);let O=P.info;a[O.name]=O,a[O.index]=O}if(e.progress!==1){if(n(a,e),l)return;e.__requestAnimationId=requestAnimationFrame(d);return}if(e.playCount===r.timelinePlayCount){e.isFinished=!0,e.isPlaying=!1,f.remove(),n(a,e),o.emit("complete"),e.__requestAnimationId=null;return}l||(n(a,e),o.emit("repeat"),e.__requestAnimationId=requestAnimationFrame(p=>{e.__startTime=p*e.speed,e.__lastFrameTime=p*e.speed,e.playCount++,e.__startProgress=0,d(p)}))},c=(s,l=e.playCount)=>{if(r.timelinePlayCount===0||l===0){console.warn("[seek] Cannot seek the timeline because the `playCount` is set to 0.");return}if(r.timelinePlayCount>0&&typeof l=="number"&&l>r.timelinePlayCount){console.warn("[seek] Cannot seek the timeline because the param `playCount` is greater than the `timelinePlayCount`.");return}if(e.duration===0){console.warn("[seek] Cannot seek the timeline because the `duration` is 0.");return}if(typeof s=="number"&&(s<0&&(s=0,console.warn("[seek] The `startFrom` param cannot be a negative value.")),s>e.duration&&(s=e.duration,console.warn("[seek] The `startFrom` param cannot be greater than the duration of the timeline.")),s=v(s/e.duration,0,1)),typeof s=="string"&&(s=V(s),s<0&&(s=0,console.warn("[seek] The `startFrom` param cannot be a negative percentage.")),s>1&&(s=1,console.warn("[seek] The `startFrom` param percentage cannot be greater than 1."))),e.isPlaying){let p=performance.now()*e.speed;e.__startTime=p,e.__lastFrameTime=p}e.playCount=l,e.__startProgress=s},y=(s=0,l=1)=>{e.isPlaying&&e.__requestAnimationId!==null&&(cancelAnimationFrame(e.__requestAnimationId),e.__requestAnimationId=null);for(let p=0;p<a.length;p++)e.__animations[p].Setup();c(s,l),e.__requestAnimationId=requestAnimationFrame(p=>{e.__startTime=p*e.speed,e.__lastFrameTime=p*e.speed,e.progress=e.__startProgress,e.isPlaying=e.progress!==1,e.isFinished=e.progress===1,e.isPaused=!1,e.isFirstFrame=!0,f.add(),o.emit("play"),d(p),e.isFirstFrame=!1})},R=()=>{if(e.isPlaying&&e.__requestAnimationId!==null){console.warn("[playOneFrame] The timeline is already playing.");return}let s=performance.now();e.__startTime=s*e.speed,e.__lastFrameTime=s*e.speed,e.progress=e.__startProgress,e.isPlaying=!1,e.isFinished=e.progress===1,e.isPaused=!1,e.isFirstFrame=!1,d(s,!0)},A=()=>{if(!e.isPlaying){console.warn("[pause] The timeline is not playing.");return}if(e.isPaused){console.warn("[pause] The timeline is already paused.");return}if(!e.__requestAnimationId){console.error("[pause] `__requestAnimationId` is null.");return}cancelAnimationFrame(e.__requestAnimationId),e.__requestAnimationId=null,e.__pauseTime=performance.now(),e.isPaused=!0,e.isPlaying=!1,f.remove(),o.emit("pause")},u=()=>{if(e.isPlaying){console.warn("[resume] The timeline is already playing.");return}if(!e.isPaused){console.warn("[resume] The timeline is not paused, playing from the start."),y();return}e.__startTime+=(performance.now()-e.__pauseTime)*e.speed,e.__pauseTime=0,e.isPaused=!1,e.isPlaying=!0,f.add(),o.emit("resume"),e.__requestAnimationId=requestAnimationFrame(d)},F=(s=e.duration,l=r.timelinePlayCount)=>{e.isPlaying&&e.__requestAnimationId!==null&&(cancelAnimationFrame(e.__requestAnimationId),e.__requestAnimationId=null,e.isPlaying=!1),c(s,l),R(),o.emit("stop")},h=s=>{for(let l=0;l<s.length;l++){let p=s[l];if(!p.name)throw new Error("[updateValues] Animation name is required.");let P=e.__animations.findIndex($=>$.animationRef.name===p.name);if(P===-1)throw new Error(`[updateValues] Animation with name '${p.name}' not found.`);let O=U(p,P);e.__animations[P].Set(O)}for(let l=0;l<a.length;l++)e.__animations[l].Setup();if(e.isPlaying){let l=e.progress;e.duration=S(e.__animations),c(e.duration*l);return}e.duration=S(e.__animations)},W=s=>{if(s.timelinePlayCount===0&&console.warn("The `timelinePlayCount` with the value `0` will make the timeline not play."),typeof s.timelineSpeed=="number"&&(s.timelineSpeed===0||s.timelineSpeed<0))throw new Error("The `timelineSpeed` value cannot be a negative value or a zero.");Object.assign(r,s);let l=e.progress;e.speed=r.timelineSpeed,e.isPlaying&&c(l*e.duration)};return r.autoPlay&&y(),{timelineInfo:e,animationsInfo:a,updateValues:h,updateTimelineOptions:W,play:y,playOneFrame:R,resume:u,pause:A,stop:F,seek:c,on:o.on.bind(o),once:o.once.bind(o),onCompleteAsync:o.onCompleteAsync.bind(o),onPlayAsync:o.onPlayAsync.bind(o),onResumeAsync:o.onResumeAsync.bind(o),onPauseAsync:o.onPauseAsync.bind(o),onStopAsync:o.onStopAsync.bind(o),onRepeatAsync:o.onRepeatAsync.bind(o),clearEvents:o.clear.bind(o)}}function j(t,n){if(typeof t.to>"u")throw new Error("[group] The `to` value is required");t.to=typeof t.to=="number"?[t.to]:t.to;let i=t.to.length,r=u=>typeof u=="number",m=u=>typeof u=="object"&&!Array.isArray(u),o=u=>typeof u=="object"&&!Array.isArray(u),e=u=>typeof u=="function",f=u=>new Array(i).fill(u),a={to:t.to,from:r(t.from)?f(t.from):t.from,offset:r(t.offset)?f(t.offset):t.offset,delay:r(t.delay)?f(t.delay):t.delay,delayCount:r(t.delayCount)?f(t.delayCount):t.delayCount,playCount:r(t.playCount)?f(t.playCount):t.playCount,direction:m(t.direction)?f(t.direction):t.direction,timing:o(t.timing)?f(t.timing):t.timing,duration:r(t.duration)?f(t.duration):t.duration,ease:e(t.ease)?f(t.ease):t.ease},d=new Array(i);for(let u=0;u<i;u++)d[u]={name:u.toString(),to:a.to[u],from:Array.isArray(a.from)?a.from[u]:a.from,offset:Array.isArray(a.offset)?a.offset[u]:a.offset,delay:Array.isArray(a.delay)?a.delay[u]:a.delay,delayCount:Array.isArray(a.delayCount)?a.delayCount[u]:a.delayCount,playCount:Array.isArray(a.playCount)?a.playCount[u]:a.playCount,direction:Array.isArray(a.direction)?a.direction[u]:a.direction,timing:u===0?"from-start":Array.isArray(a.timing)?a.timing[u]:a.timing,duration:Array.isArray(a.duration)?a.duration[u]:a.duration,ease:Array.isArray(a.ease)?a.ease[u]:a.ease};let c=g(d,n,{autoPlay:t.autoPlay,timelinePlayCount:t.timelinePlayCount,timelineSpeed:t.timelineSpeed}),y=c.updateValues;return Object.assign(c,{updateValues:u=>{let F=[];for(let h=0;h<u.length;h++){if(typeof u[h].index!="number")throw new Error("[updateValues] Animation index is required.");F[h]={name:`${u[h].index}`,...u[h]}}y(F)}})}function N(t){let n=0,i=0,r=o=>{let e=o-i;i=o,t(e),n=requestAnimationFrame(r)},m=()=>cancelAnimationFrame(n);return n=requestAnimationFrame(r),m}function q(t,n){let i=typeof t.playCount=="number"&&t.playCount<0,r=[{...t,name:"single",playCount:i?1:t.playCount}],m={autoPlay:t.autoPlay??!0,timelinePlayCount:i?-1:1},o=g(r,d=>n(d[0]),m),e=o.updateValues;return Object.assign(o,{updateValues:d=>{"autoPlay"in d&&(o.updateTimelineOptions({autoPlay:d.autoPlay}),delete d.autoPlay),"playCount"in d&&(o.updateTimelineOptions({timelinePlayCount:d.playCount}),delete d.playCount),e([{name:"single",...d}])},animationsInfo:o.animationsInfo[0]})}function T(t,n,i={}){return g(t,n,i)}T.timeline=g;T.single=q;T.group=j;T.loop=N;var _e=T;export{I as Direction,k as Event,z as ScrollAxis,H as ScrollElementEdge,w as Timing,Q as createAnimations,_e as default};
//# sourceMappingURL=index.js.map