@wbe/interpol/dist/interpol.js

Interpolates values with a GSAP-like API ~ 3kB

function t(){const t={};return t.promise=new Promise(s=>{t.resolve=s}),t}function s(t,s,i){return Math.max(t,Math.min(s,i))}var i=(t,s=1e3)=>Math.round(t*s)/s,h=t=>"function"==typeof t?t():t,e=()=>{},r={in:t=>t*t,out:t=>t*(2-t),inOut:t=>t<.5?2*t*t:(4-2*t)*t-1},n={in:t=>t*t*t,out:t=>1-Math.pow(1-t,3),inOut:t=>t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2},o={in:t=>t*t*t*t,out:t=>1-Math.pow(1-t,4),inOut:t=>t<.5?8*t*t*t*t:1-Math.pow(-2*t+2,4)/2},a={in:t=>t*t*t*t*t,out:t=>1-Math.pow(1-t,5),inOut:t=>t<.5?16*t*t*t*t*t:1-Math.pow(-2*t+2,5)/2},u={in:t=>0===t?0:Math.pow(2,10*(t-1)),out:t=>1===t?1:1-Math.pow(2,-10*t),inOut:t=>0===t?0:1===t?1:(t/=.5)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*--t))},l=t=>t,p=t=>{let[s,i]=t.split(".");s[0]===s[0].toLowerCase()&&(s=s[0].toUpperCase()+s.slice(1));const h={Linear:l,Power1:r,Power2:n,Power3:o,Power4:a,Expo:u};return h?.[s]?.[i]??l},d=class{#t=!1;#s;#i;#h;#e;#r;#n;#o;#a;#u;#l;constructor(){this.#s=[],this.#i={delta:null,time:null,elapsed:null},this.#n=0,this.#l=!0,this.#u=typeof window<"u",this.#p(),setTimeout(()=>this.play(),0)}disable(){this.#l=!1}add(t,s=0){return this.#s.push({handler:t,rank:s}),this.#s.sort((t,s)=>t.rank-s.rank),()=>this.remove(t)}remove(t){this.#s=this.#s.filter(s=>s.handler!==t)}play(){this.#t=!0,this.#h=performance.now(),this.#e=this.#h,this.#r=this.#n+(this.#e-this.#h),this.#o=16,this.#l&&this.#u&&(this.#a=requestAnimationFrame(this.#d))}pause(){this.#t=!1,this.#n=this.#r}stop(){this.#t=!1,this.#n=0,this.#r=0,this.#c(),this.#l&&this.#u&&this.#a&&(cancelAnimationFrame(this.#a),this.#a=null)}raf(t){this.#o=t-(this.#e||t),this.#e=t,this.#r=this.#n+(this.#e-this.#h),this.#i.delta=this.#o,this.#i.time=this.#e,this.#i.elapsed=this.#r;for(const{handler:t}of this.#s)t(this.#i)}#p(){this.#u&&document.addEventListener("visibilitychange",this.#m)}#c(){this.#u&&document.removeEventListener("visibilitychange",this.#m)}#m=()=>{document.hidden?this.pause():this.play()};#d=(t=performance.now())=>{this.#t&&(this.#l&&this.#u&&(this.#a=requestAnimationFrame(this.#d)),this.raf(t))}},c={ticker:new d,durationFactor:1,duration:1e3,ease:"linear"},m=0,f=class{ID=++m;ticker;inTl=!1;debugEnable;#f;get duration(){return this.#f}#g;get delay(){return this.#g}#y;get ease(){return this.#y}#b;get reverseEase(){return this.#b}#e=0;get time(){return this.#e}#v=0;#P=0;#w=!1;get isReversed(){return this.#w}#M=!1;get isPlaying(){return this.#M}#O=!1;get isPaused(){return this.#O}#k;get props(){return this.#k}meta;#C;#E;#T;#F;#R;#S;#U;#$;#_;#j;#A;#x;#V=t();#D=!1;#I=!1;constructor({duration:t=c.duration,ease:s=c.ease,reverseEase:i=s,paused:h=!1,delay:r=0,immediateRender:n=!1,beforeStart:o=e,onStart:a=e,onUpdate:u=e,onComplete:l=e,debug:p=!1,meta:d={},...m}){this.ticker=c.ticker,this.#C=t,this.#O=h,this.#E=r,this.#F=n,this.#$=o,this.#_=a,this.#j=u,this.#A=l,this.debugEnable=p,this.#R=s,this.#S=i,this.meta=d,this.#U=m,this.refresh(),this.#T=this.#X(this.#k),this.#$(this.#T,this.#e,this.#P,this),this.#F&&this.#j(this.#T,this.#e,this.#P,this),this.#O||this.play()}refresh(){this.#k=this.#Y(this.#U),this.#f=h(this.#C)*c.durationFactor,this.#g=h(this.#E)*c.durationFactor,this.#y=this.#q(this.#R),this.#b=this.#q(this.#S);for(const t of Object.keys(this.#k)){const s=this.#k[t];s._from=h(s.from),s._to=h(s.to),s.ease=s._computeEaseFn(this.#y),s.reverseEase=s._computeReverseEaseFn(this.#b)}}refreshComputedValues(){console.warn("Interpol.refreshComputedValues() is deprecated. Use Interpol.refresh() instead."),this.refresh()}async play(s=0,i=!0){if(this.#M&&!i)return;if(this.#M&&this.#w)return void(this.#w=!1);if(this.#M)return this.stop(),await this.play(s);this.#z(t=>t.value=t._to*s),this.#e=this.#f*s,this.#P=s,this.#w=!1,this.#M=!0,this.#O=!1;const h=0===this.#P;return this.#T=h?this.#X(this.#k):this.#L(this.#T,this.#k),this.#x=setTimeout(()=>{h&&this.#_(this.#T,this.#e,this.#P,this),this.ticker.add(this.#Z)},this.#e>0?0:this.#g),this.#V=t(),this.#V.promise}async reverse(s=1,i=!0){if(!this.#M||i)return this.#M&&!this.#w?(this.#w=!0,this.#V=t(),this.#V.promise):this.#M&&this.#w?(this.stop(),await this.reverse(s)):(this.#z(t=>t.value=t._to*s),this.#e=this.#f*s,this.#P=s,this.#w=!0,this.#M=!0,this.#O=!1,this.ticker.add(this.#Z),this.#V=t(),this.#V.promise)}pause(){this.#O=!0,this.#M=!1,this.inTl||this.ticker.remove(this.#Z)}resume(){this.#O&&(this.#O=!1,this.#M=!0,this.inTl||this.ticker.add(this.#Z))}stop(){(!this.inTl||this.inTl&&this.#w)&&(this.#z(t=>t.value=t._from),this.#e=0,this.#v=this.#P,this.#P=0),this.#M=!1,this.#O=!1,clearTimeout(this.#x),this.inTl||(this.#w=!1,this.ticker.remove(this.#Z))}progress(t,i=!0){if(void 0===t)return this.#P;if(this.#M&&this.pause(),this.#v=this.#P,this.#P=s(0,t,1),(0!==this.#P&&0===this.#v||1!==this.#P&&1===this.#v)&&this.refresh(),this.#e=s(0,this.#f*this.#P,this.#f),this.#B(this.#P),this.#T=this.#L(this.#T,this.#k),this.#v===this.#P&&t!==this.#P||(this.#v!==this.#P&&(this.#D=!1,this.#I=!1),this.#j(this.#T,this.#e,this.#P,this),this.#G("progress onUpdate",{props:this.#T,time:this.#e,progress:this.#P})),0===this.#v&&this.#P>0&&!this.#I&&!i&&(this.#T=this.#X(this.#k),this.#_(this.#T,this.#e,this.#P,this),this.#D=!0,this.#G("progress onStart",{props:this.#T,time:this.#e,progress:this.#P})),1===this.#P&&!i){(this.#f<=0?this.#v<1:!this.#I)&&(this.#A(this.#T,this.#e,this.#P,this),this.#v=this.#P,this.#I=!0,this.#G("progress onComplete",{props:this.#T,time:this.#e,progress:this.#P}))}0===this.#P&&(this.#v=this.#P,this.#D=!1,this.#I=!1)}#Z=async({delta:t})=>{if(this.#f<=0){this.#z(t=>t.value=t._to);const t={props:this.#L(this.#T,this.#k),time:this.#f,progress:1};return this.#j(t.props,t.time,t.progress,this),this.#A(t.props,t.time,t.progress,this),this.#V.resolve(),void this.stop()}this.#e=s(0,this.#f,this.#e+(this.#w?-t:t)),this.#P=s(0,i(this.#e/this.#f),1),this.#B(this.#P),this.#T=this.#L(this.#T,this.#k),this.#j(this.#T,this.#e,this.#P,this),this.#G("handleTick onUpdate",{props:this.#T,t:this.#e,p:this.#P}),this.#w||1!==this.#P||(this.#G("handleTick onComplete!"),this.#A(this.#T,this.#e,this.#P,this),this.#V.resolve(),this.stop()),this.#w&&0===this.#P&&(this.#V.resolve(),this.stop())};#z(t){for(const s of Object.keys(this.#k))t(this.#k[s])}#B(t){this.#z(s=>{const h=this.#w&&s.reverseEase?s.reverseEase:s.ease;s.value=i(s._from+(s._to-s._from)*h(t),1e3)})}#Y(t){return Object.keys(t).reduce((s,i)=>{let h=t[i];return s[i]={from:h?.[0]??h?.from??0,_from:null,to:h?.[1]??h?.to??h??0,_to:null,value:null,_computeEaseFn:t=>{const s=h?.ease;return s?this.#q(s):t},_computeReverseEaseFn:t=>{const s=h?.reverseEase,i=h?.ease;return s?this.#q(s):i?this.#q(i):t},ease:null,reverseEase:null},s},{})}#X(t){return Object.keys(t).reduce((s,i)=>(s[i]=t[i]._from,s),{})}#L(t,s){for(const i of Object.keys(t))t[i]=s[i].value;return t}#q(t){if(null==t)return t=>t;const s=h(t);return"string"==typeof s?p(s):"number"==typeof t?.(0)?t:s}#G(...t){this.debugEnable&&console.log("%cinterpol","color: rgb(53,158,182)",this.ID||"",...t)}},g=0,y=class{ID;#P=0;#e=0;get time(){return this.#e}#M=!1;get isPlaying(){return this.#M}#w=!1;get isReversed(){return this.#w}#O=!1;get isPaused(){return this.#O}#H=[];get adds(){return this.#H}#J=0;get duration(){return this.#J}#K;get ticker(){return this.#K}#N=0;#Q=1;#V=t();#W;#j;#A;#tt=0;#st=!1;constructor({onUpdate:t=e,onComplete:s=e,debug:i=!1,paused:h=!1}={}){this.#j=t,this.#A=s,this.#W=i,this.#O=h,this.ID=++g,this.#K=c.ticker,setTimeout(()=>this.#G("adds",this.#H),1)}add(t,s="0"){"function"==typeof t&&(t=new f({duration:0,onComplete:t}));const i=t instanceof f?t:new f(t);let h,e;i.stop(),i.refresh(),i.ticker=this.#K,i.inTl=!0,this.#W&&(i.debugEnable=this.#W);const r=c.durationFactor;if("string"==typeof s){h=parseFloat(s.includes("=")?s.split("=").join(""):s)*r;const t=this.#H.filter(t=>!t._isAbsoluteOffset),n=t?.length>0?t.reduce((t,s)=>s.time.end>t.time.end?s:t):this.#H?.[this.#H.length-1]||null;this.#J=Math.max(this.#J,this.#J+i.duration+h),e=n?n.time.end+h:h}else"number"==typeof s&&(h=s*r,this.#J=Math.max(0,this.#J,h+i.duration),e=h??0);return this.#H.push({itp:i,time:{start:e,end:e+i.duration,offset:h},progress:{start:null,end:null,current:0,last:0},_isAbsoluteOffset:"number"==typeof s}),this.#it((t,s)=>{this.#H[s].progress.start=t.time.start/this.#J||0,this.#H[s].progress.end=t.time.end/this.#J||0}),this.isPaused||setTimeout(()=>this.play(),0),this}async play(s=0){return this.#N=s,this.#M&&this.#w?(this.#w=!1,this.#V.promise):this.#M?(this.#e=this.#J*s,this.#P=s,this.#w=!1,this.#V.promise):(this.#e=this.#J*s,this.#P=s,this.#w=!1,this.#M=!0,this.#O=!1,this.#K.add(this.#Z),this.#V=t(),this.#V.promise)}async reverse(s=1){return this.#Q=s,this.#M&&!this.#w?(this.#w=!0,this.#V=t(),this.#V.promise):this.#M&&this.#w?(this.stop(),await this.reverse(s)):(this.#e=this.#J*s,this.#P=s,this.#w=!0,this.#M=!0,this.#O=!1,this.#K.add(this.#Z),this.#V=t(),this.#V.promise)}pause(){this.#M=!1,this.#O=!0,this.#it(t=>t.itp.pause()),this.#K.remove(this.#Z)}resume(){this.#O&&(this.#O=!1,this.#M=!0,this.#it(t=>t.itp.resume()),this.#K.add(this.#Z))}stop(){this.#P=0,this.#e=0,this.#M=!1,this.#O=!1,this.#w=!1,this.#it(t=>t.itp.stop()),this.#K.remove(this.#Z)}progress(t,i=!0,h=!0){if(void 0===t)return this.#P;this.#M&&this.pause(),this.#P=s(0,t,1),this.#e=s(0,this.#J*this.#P,this.#J),this.#ht(this.#e,this.#P,i),1!==t||h||this.#A(this.#e,this.#P)}refresh(){this.#it(t=>t.itp.refresh())}refreshComputedValues(){console.warn("Timeline.refreshComputedValues() is deprecated. Use Timeline.refresh() instead."),this.refresh()}#Z=async({delta:t})=>{this.#e=s(0,this.#J,this.#e+(this.#w?-t:t)),this.#P=s(0,i(this.#e/this.#J),1),this.#ht(this.#e,this.#P,!1),(!this.#w&&1===this.#P||0===this.#J)&&(this.#A(this.#e,this.#P),this.#V.resolve(),this.stop()),(this.#w&&0===this.#P||0===this.#J)&&(this.#V.resolve(),this.stop())};#ht(t,s,i=!0){this.#tt>s&&!this.#st&&(this.#st=!0),this.#tt<s&&this.#st&&(this.#st=!1),this.#tt=s,this.#j(t,s),this.#it(s=>{s.progress.last=s.progress.current,s.progress.current=0===s.itp.duration?t>=s.time.start?1:0:(t-s.time.start)/s.itp.duration,s.itp.progress(s.progress.current,i)},this.#st)}#it(t,s=!1){const i=s?this.#H.length-1:0,h=s?-1:this.#H.length,e=s?-1:1;for(let s=i;s!==h;s+=e)t(this.#H[s],s)}#G(...t){this.#W&&console.log("%ctimeline","color: rgb(217,50,133)",this.ID||"",...t)}},b=new Map,v=new Set(["x","y","z"]),P=new Set(["opacity","scale","scaleX","scaleY","scaleZ","perspective","transformOrigin"]),w=new Set(["rotate","rotateX","rotateY","rotateZ","skew","skewX","skewY"]);function M(t,s,i=!0){return i&&"number"==typeof s?P.has(t)?s:w.has(t)?`${s}deg`:`${s}px`:s}var O=(t,s,i=!0)=>{if(t){Array.isArray(t)||(t=[t]);for(const h of t){const t=b.get(h)||{};for(let e in s){const r=M(e,s[e],i);if(v.has(e)){const h=h=>M(h,s?.[h]??t?.[h]??"0px",i);t.translate3d=`translate3d(${h("x")}, ${h("y")}, ${h("z")})`,t[e]=`${r}`}else e.match(/^(translate|rotate|scale|skew)/)?t[e]=`${e}(${r})`:h.style?h.style[e]=r&&`${r}`:h[e]=r}const e=Object.keys(t).reduce((s,i)=>v.has(i)?s:s+t[i]+" ","").trim();""!==e&&(h.style.transform=e),b.set(h,t)}}};export{u as Expo,f as Interpol,c as InterpolOptions,r as Power1,n as Power2,o as Power3,a as Power4,d as Ticker,y as Timeline,p as easeAdapter,O as styles};//# sourceMappingURL=interpol.js.map