@wbe/interpol/dist/interpol.js

Interpolates values with a GSAP-like API ~ 3kB

var t=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))}},s={ticker:new t,durationFactor:1,duration:1e3,ease:"linear"};function i(){const t={};return t.promise=new Promise(s=>{t.resolve=s}),t}function h(t,s,i){return Math.max(t,Math.min(s,i))}var e=(t,s=1e3)=>Math.round(t*s)/s,r=t=>"function"==typeof t?t():t,n=()=>{},o={in:t=>t*t,out:t=>t*(2-t),inOut:t=>t<.5?2*t*t:(4-2*t)*t-1},a={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},u={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},l={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},p={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))},d=t=>t,c=t=>{let[s,i]=t.split(".");s[0]===s[0].toLowerCase()&&(s=s[0].toUpperCase()+s.slice(1));const h={Linear:d,Power1:o,Power2:a,Power3:u,Power4:l,Expo:p};return h?.[s]?.[i]??d},m=0,f=class{ID=++m;ticker;inTl=!1;debugEnable;#f;get duration(){return this.#f}#e=0;get time(){return this.#e}#g=0;#y=0;#b=!1;get isReversed(){return this.#b}#v=!1;get isPlaying(){return this.#v}#P=!1;get isPaused(){return this.#P}#w;get props(){return this.#w}meta;#M;#k;#O;#C;#E;#T;#S;#$;#A;#R;#j;#F=i();#U=!1;#x=!1;constructor({duration:t=s.duration,ease:i=s.ease,reverseEase:h=i,paused:e=!1,delay:r=0,immediateRender:o=!1,beforeStart:a=n,onStart:u=n,onUpdate:l=n,onComplete:p=n,debug:d=!1,meta:c={},...m}){this.ticker=s.ticker,this.#M=t,this.#P=e,this.#C=r*s.durationFactor,this.#O=o,this.#S=a,this.#$=u,this.#A=l,this.#R=p,this.debugEnable=d,this.#E=i,this.#T=h,this.meta=c,this.#w=this.#D(m),this.refreshComputedValues(),this.#k=this.#V(this.#w),this.#S(this.#k,this.#e,this.#y,this),this.#O&&this.#A(this.#k,this.#e,this.#y,this),this.#P||this.play()}refreshComputedValues(){this.#f=r(this.#M)*s.durationFactor,this.#_(t=>{t._from=r(t.from),t._to=r(t.to)})}async play(t=0,s=!0){if(this.#v&&!s)return;if(this.#v&&this.#b)return void(this.#b=!1);if(this.#v)return this.stop(),await this.play(t);this.#_(s=>s.value=s._to*t),this.#e=this.#f*t,this.#y=t,this.#b=!1,this.#v=!0,this.#P=!1;const h=0===this.#y;return this.#k=h?this.#V(this.#w):this.#I(this.#k,this.#w),this.#j=setTimeout(()=>{h&&this.#$(this.#k,this.#e,this.#y,this),this.ticker.add(this.#X)},this.#e>0?0:this.#C),this.#F=i(),this.#F.promise}async reverse(t=1,s=!0){if(!this.#v||s)return this.#v&&!this.#b?(this.#b=!0,this.#F=i(),this.#F.promise):this.#v&&this.#b?(this.stop(),await this.reverse(t)):(this.#_(s=>s.value=s._to*t),this.#e=this.#f*t,this.#y=t,this.#b=!0,this.#v=!0,this.#P=!1,this.ticker.add(this.#X),this.#F=i(),this.#F.promise)}pause(){this.#P=!0,this.#v=!1,this.inTl||this.ticker.remove(this.#X)}resume(){this.#P&&(this.#P=!1,this.#v=!0,this.inTl||this.ticker.add(this.#X))}stop(){(!this.inTl||this.inTl&&this.#b)&&(this.#_(t=>t.value=t._from),this.#e=0,this.#g=this.#y,this.#y=0),this.#v=!1,this.#P=!1,clearTimeout(this.#j),this.inTl||(this.#b=!1,this.ticker.remove(this.#X))}progress(t,s=!0){if(void 0===t)return this.#y;if(this.#v&&this.pause(),this.#g=this.#y,this.#y=h(0,t,1),(0!==this.#y&&0===this.#g||1!==this.#y&&1===this.#g)&&this.refreshComputedValues(),this.#e=h(0,this.#f*this.#y,this.#f),this.#Y(this.#y),this.#k=this.#I(this.#k,this.#w),this.#g===this.#y&&t!==this.#y||(this.#g!==this.#y&&(this.#U=!1,this.#x=!1),this.#A(this.#k,this.#e,this.#y,this),this.#q("progress onUpdate",{props:this.#k,time:this.#e,progress:this.#y})),0===this.#g&&this.#y>0&&!this.#x&&!s&&(this.#k=this.#V(this.#w),this.#$(this.#k,this.#e,this.#y,this),this.#U=!0,this.#q("progress onStart",{props:this.#k,time:this.#e,progress:this.#y})),1===this.#y&&!s){(this.#f<=0?this.#g<1:!this.#x)&&(this.#R(this.#k,this.#e,this.#y,this),this.#g=this.#y,this.#x=!0,this.#q("progress onComplete",{props:this.#k,time:this.#e,progress:this.#y}))}0===this.#y&&(this.#g=this.#y,this.#U=!1,this.#x=!1)}#X=async({delta:t})=>{if(this.#f<=0){this.#_(t=>t.value=t._to);const t={props:this.#I(this.#k,this.#w),time:this.#f,progress:1};return this.#A(t.props,t.time,t.progress,this),this.#R(t.props,t.time,t.progress,this),this.#F.resolve(),void this.stop()}this.#e=h(0,this.#f,this.#e+(this.#b?-t:t)),this.#y=h(0,e(this.#e/this.#f),1),this.#Y(this.#y),this.#k=this.#I(this.#k,this.#w),this.#A(this.#k,this.#e,this.#y,this),this.#q("handleTick onUpdate",{props:this.#k,t:this.#e,p:this.#y}),this.#b||1!==this.#y||(this.#q("handleTick onComplete!"),this.#R(this.#k,this.#e,this.#y,this),this.#F.resolve(),this.stop()),this.#b&&0===this.#y&&(this.#F.resolve(),this.stop())};#_(t){for(const s of Object.keys(this.#w))t(this.#w[s])}#Y(t){const s=t=>this.#b&&t.reverseEase?t.reverseEase:t.ease;this.#_(i=>i.value=e(i._from+(i._to-i._from)*s(i)(t),1e3))}#D(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,ease:this.#z(h?.ease||this.#E),reverseEase:this.#z(h?.reverseEase||h?.ease||this.#T)},s},{})}#V(t){return Object.keys(t).reduce((s,i)=>(s[i]=t[i]._from,s),{})}#I(t,s){for(const i of Object.keys(t))t[i]=s[i].value;return t}#z(t){return null!=t?"string"==typeof t?c(t):t:null}#q(...t){this.debugEnable&&console.log("%cinterpol","color: rgb(53,158,182)",this.ID||"",...t)}},g=0,y=class{ID;#y=0;#e=0;get time(){return this.#e}#v=!1;get isPlaying(){return this.#v}#b=!1;get isReversed(){return this.#b}#P=!1;get isPaused(){return this.#P}#L=[];get adds(){return this.#L}#Z=0;get duration(){return this.#Z}#B;get ticker(){return this.#B}#G=0;#H=1;#F=i();#J;#A;#R;#K=0;#N=!1;constructor({onUpdate:t=n,onComplete:i=n,debug:h=!1,paused:e=!1}={}){this.#A=t,this.#R=i,this.#J=h,this.#P=e,this.ID=++g,this.#B=s.ticker,setTimeout(()=>this.#q("adds",this.#L),1)}add(t,i="0"){"function"==typeof t&&(t=new f({duration:0,onComplete:t}));const h=t instanceof f?t:new f(t);let e,r;h.stop(),h.refreshComputedValues(),h.ticker=this.#B,h.inTl=!0,this.#J&&(h.debugEnable=this.#J);const n=s.durationFactor;if("string"==typeof i){e=parseFloat(i.includes("=")?i.split("=").join(""):i)*n;const t=this.#L.filter(t=>!t._isAbsoluteOffset),s=t?.length>0?t.reduce((t,s)=>s.time.end>t.time.end?s:t):this.#L?.[this.#L.length-1]||null;this.#Z=Math.max(this.#Z,this.#Z+h.duration+e),r=s?s.time.end+e:e}else"number"==typeof i&&(e=i*n,this.#Z=Math.max(0,this.#Z,e+h.duration),r=e??0);return this.#L.push({itp:h,time:{start:r,end:r+h.duration,offset:e},progress:{start:null,end:null,current:0,last:0},_isAbsoluteOffset:"number"==typeof i}),this.#Q((t,s)=>{this.#L[s].progress.start=t.time.start/this.#Z||0,this.#L[s].progress.end=t.time.end/this.#Z||0}),this.isPaused||setTimeout(()=>this.play(),0),this}async play(t=0){if(this.#G=t,!this.#v||!this.#b)return this.#v?(this.stop(),await this.play(t)):(this.#e=this.#Z*t,this.#y=t,this.#b=!1,this.#v=!0,this.#P=!1,this.#B.add(this.#X),this.#F=i(),this.#F.promise);this.#b=!1}async reverse(t=1){return this.#H=t,this.#v&&!this.#b?(this.#b=!0,this.#F=i(),this.#F.promise):this.#v&&this.#b?(this.stop(),await this.reverse(t)):(this.#e=this.#Z*t,this.#y=t,this.#b=!0,this.#v=!0,this.#P=!1,this.#B.add(this.#X),this.#F=i(),this.#F.promise)}pause(){this.#v=!1,this.#P=!0,this.#Q(t=>t.itp.pause()),this.#B.remove(this.#X)}resume(){this.#P&&(this.#P=!1,this.#v=!0,this.#Q(t=>t.itp.resume()),this.#B.add(this.#X))}stop(){this.#y=0,this.#e=0,this.#v=!1,this.#P=!1,this.#b=!1,this.#Q(t=>t.itp.stop()),this.#B.remove(this.#X)}progress(t,s=!0,i=!0){if(void 0===t)return this.#y;this.#v&&this.pause(),this.#y=h(0,t,1),this.#e=h(0,this.#Z*this.#y,this.#Z),this.#W(this.#e,this.#y,s),1!==t||i||this.#R(this.#e,this.#y)}refreshComputedValues(){this.#Q(t=>t.itp.refreshComputedValues())}#X=async({delta:t})=>{this.#e=h(0,this.#Z,this.#e+(this.#b?-t:t)),this.#y=h(0,e(this.#e/this.#Z),1),this.#W(this.#e,this.#y,!1),(!this.#b&&1===this.#y||0===this.#Z)&&(this.#R(this.#e,this.#y),this.#F.resolve(),this.stop()),(this.#b&&0===this.#y||0===this.#Z)&&(this.#F.resolve(),this.stop())};#W(t,s,i=!0){this.#K>s&&!this.#N&&(this.#N=!0),this.#K<s&&this.#N&&(this.#N=!1),this.#K=s,this.#A(t,s),this.#Q(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.#N)}#Q(t,s=!1){const i=s?this.#L.length-1:0,h=s?-1:this.#L.length,e=s?-1:1;for(let s=i;s!==h;s+=e)t(this.#L[s],s)}#q(...t){this.#J&&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 k=(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{p as Expo,f as Interpol,s as InterpolOptions,o as Power1,a as Power2,u as Power3,l as Power4,t as Ticker,y as Timeline,c as easeAdapter,k as styles};//# sourceMappingURL=interpol.js.map