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