@wbe/interpol/dist/interpol.cjs

Interpolates values with a GSAP-like API ~ 3kB

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