@olton/animation/dist/animation.js

Animation library (JavaScript)

/*!
 * Animation - Animate HTML elements with this simple, light-weight library.
 * Copyright 2024 by Serhii Pimenov
 * Licensed under MIT
 !*/

var st=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY"],at=["opacity","zIndex"],it=["opacity","volume"],rt=["scrollLeft","scrollTop"],ct=["backgroundColor","color"],ft=["opacity"],pt=(t,n)=>{let e=/^(\*=|\+=|-=)/.exec(t);if(!e)return t;let a=gt(t)||0,s=parseFloat(n),r=parseFloat(t.replace(e[0],""));switch(e[0][0]){case"+":return s+r+a;case"-":return s-r+a;case"*":return s*r+a}},lt=(t,n,e)=>typeof t[n]<"u"?rt.includes(n)?n==="scrollLeft"?t===window?pageXOffset:t.scrollLeft:t===window?pageYOffset:t.scrollTop:t[n]||0:t.style[n]||getComputedStyle(t,e)[n],L=(t,n,e,a,s=!1)=>{n=yt(n),s&&(e=parseInt(e)),t instanceof HTMLElement?typeof t[n]<"u"?t[n]=e:t.style[n]=n==="transform"||n.toLowerCase().includes("color")?e:e+a:t[n]=e},ut=(t,n,e)=>{$(n,(a,s)=>{L(t,a,s[0]+s[2]*e,s[3],s[4])})},Z=t=>{if(!(t instanceof HTMLElement))return;let n=t.style.transform||"",e=/(\w+)\(([^)]*)\)/g,a=new Map,s;for(;s=e.exec(n);)a.set(s[1],s[2]);return a},T=t=>Array.from(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t||"#000000")).slice(1).map(n=>parseInt(n,16)),dt=(t,n)=>getComputedStyle(t)[n].replace(/[^\d.,]/g,"").split(",").map(e=>parseInt(e)),mt=(t,n,e)=>{let a=[],s=Z(t);$(n,(r,c)=>{let m=c[0],g=c[1],d=c[2],f=c[3];r.includes("rotate")||r.includes("skew")?f===""&&(f="deg"):r.includes("scale")?f="":f="px",f==="turn"?a.push(`${r}(${c[1]*e+f})`):a.push(`${r}(${m+d*e+f})`)}),s.forEach((r,c)=>{n[c]===void 0&&a.push(`${c}(${r})`)}),L(t,"transform",a.join(" "))},ht=function(t,n,e){$(n,function(a,s){let r=[0,0,0];for(let c=0;c<3;c++)r[c]=Math.floor(s[0][c]+s[2][c]*e);L(t,a,`rgb(${r.join(",")})`)})},Q=t=>{let n=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;return t[0]==="#"&&t.length===4?"#"+t.replace(n,(e,a,s,r)=>a+a+s+s+r+r):t[0]==="#"?t:"#"+t},H=function(t,n,e){ut(t,n.props,e),mt(t,n.transform,e),ht(t,n.color,e)},B=(t,n,e="normal")=>{let a={props:{},transform:{},color:{}},s,r,c,m,g=Z(t);return $(n,(d,f)=>{let x=st.includes(d),I=at.includes(d),y=ct.includes(d);if(Array.isArray(f)&&f.length===1&&(f=f[0]),Array.isArray(f)?(s=y?T(Q(f[0])):M(f[0]),r=y?T(Q(f[1])):M(f[1])):(x?s=g.get(d)||0:y?s=dt(t,d):s=lt(t,d),s=y?s:M(s),r=y?T(f):M(pt(f,Array.isArray(s)?s[0]:s))),ft.includes(d)&&s[0]===r[0]&&(s[0]=r[0]>0?0:1),e==="reverse"&&([r,s]=[s,r]),m=t instanceof HTMLElement&&r[1]===""&&!I&&!x?"px":r[1],y){c=[0,0,0];for(let w=0;w<3;w++)c[w]=r[w]-s[w]}else c=r[0]-s[0];x?a.transform[d]=[s[0],r[0],c,m]:y?a.color[d]=[s,r,c,m]:a.props[d]=[s[0],r[0],c,m,!it.includes(d)]}),a},S=(t,n,e)=>{let a,s;if(typeof t=="function")s=t;else if(/^[a-z]+[\w.]*[\w]$/i.test(t)){let r=t.split(".");s=global;for(let c=0;c<r.length;c++)s=s[r[c]]}else s=new Function("a",t);return s.apply(e,n)},N=t=>typeof t>"u"||t===void 0||t===null,yt=t=>t.replace(/-([a-z])/g,n=>n[1].toUpperCase()),$=(t,n)=>{let e=0;if(wt(t))[].forEach.call(t,function(a,s){n.apply(a,[s,a])});else for(let a in t)t.hasOwnProperty(a)&&n.apply(t[a],[a,t[a],e++]);return t},wt=t=>Array.isArray(t)||typeof t=="object"&&"length"in t&&typeof t.length=="number",gt=(t,n)=>{let e=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(t);return typeof e[1]<"u"?e[1]:n},M=t=>{let n=[0,""];return t=""+t,n[0]=parseFloat(t),n[1]=t.match(/[\d.\-+]*\s*(.*)/)[1]||"",n},b=()=>{};function V(t,n,e){return Math.min(Math.max(t,n),e)}var A={linear:()=>t=>t};A.default=A.linear;var U={Sine:()=>t=>1-Math.cos(t*Math.PI/2),Circ:()=>t=>1-Math.sqrt(1-t*t),Back:()=>t=>t*t*(3*t-2),Bounce:()=>t=>{let n,e=4;for(;t<((n=Math.pow(2,--e))-1)/11;);return 1/Math.pow(4,3-e)-7.5625*Math.pow((n*3-2)/22-t,2)},Elastic:(t=1,n=.5)=>{let e=V(t,1,10),a=V(n,.1,2);return s=>s===0||s===1?s:-e*Math.pow(2,10*(s-1))*Math.sin((s-1-a/(Math.PI*2)*Math.asin(1/e))*(Math.PI*2)/a)}};["Quad","Cubic","Quart","Quint","Expo"].forEach((t,n)=>{U[t]=()=>e=>Math.pow(e,n+2)});Object.keys(U).forEach(t=>{let n=U[t];A["easeIn"+t]=n,A["easeOut"+t]=(e,a)=>s=>1-n(e,a)(1-s),A["easeInOut"+t]=(e,a)=>s=>s<.5?n(e,a)(s*2)/2:1-n(e,a)(s*-2+2)/2});var D=A;var l={duration:300,ease:"linear",onStart:()=>{},onDone:()=>{}},G={switchIn:function(t,n){let e=Object.assign({},l,n);e.onStart(t),t.setAttribute("hidden",!0),t.style.display="none",t.style.left="0",t.style.top="0",t.setAttribute("hidden",!1),e.onDone(t)},switchOut:function(t){let n=Object.assign({},l,o);n.onStart(t),t.setAttribute("hidden",!0),n.onDone(t)},switchOutIn:function(t,n,e){this.switchOut(t,e),this.switchIn(n,e)},slideUpIn:async function(t,n){let a=t.parentElement.offsetHeight,s=Object.assign({},l,n);s.onStart(t),t.style.top=`${a}px`,t.style.left="0",t.style.zIndex="2",await u({el:t,draw:{top:0,opacity:1},dur:s.duration,ease:s.ease}),s.onDone(t)},slideUpOut:async function(t,n){let e=t.parentElement,a=Object.assign({},l,n);a.onStart(t),t.style.zIndex=a.zIndex||"1",await u({el:t,draw:{top:-t.offsetHeight,opacity:0},dur:a.duration,ease:a.ease}),a.onDone(t)},slideUpOutIn:function(t,n,e){this.slideUpOut(t,e).then(()=>{}),this.slideUpIn(n,e).then(()=>{})},slideDownIn:async function(t,n){let a=t.parentElement.offsetHeight,s=Object.assign({},l,n);s.onStart(t),t.style.top=`-${a}px`,t.style.left="0",t.style.zIndex=s.zIndex||"2",await u({el:t,draw:{top:0,opacity:1},dur:s.duration,ease:s.ease}),s.onDone(t)},slideDownOut:async function(t,n){let a=t.parentElement.offsetHeight,s=Object.assign({},l,n);s.onStart(t),t.style.zIndex=s.zIndex||"1",await u({el:t,draw:{top:a,opacity:0},dur:s.duration,ease:s.ease}),s.onDone(t)},slideDownOutIn:function(t,n,e){this.slideDownOut(t,e).then(()=>{}),this.slideDownIn(n,e).then(()=>{})},slideLeftIn:async function(t,n){let a=t.parentElement.offsetWidth,s=Object.assign({},l,n);s.onStart(t),t.style.left=`${a}px`,t.style.top="0",t.style.zIndex=s.zIndex||"2",await u({el:t,draw:{left:0,opacity:1},dur:s.duration,ease:s.ease}),s.onDone(t)},slideLeftOut:async function(t,n){let e=t.parentElement,a=Object.assign({},l,n);a.onStart(t),t.style.zIndex=a.zIndex||"1",await u({el:t,draw:{left:-t.offsetWidth,opacity:0},dur:a.duration,ease:a.ease}),a.onDone(t)},slideLeftOutIn:function(t,n,e){this.slideLeftOut(t,e).then(()=>{}),this.slideLeftIn(n,e).then(()=>{})},slideRightIn:async function(t,n){let a=t.parentElement.offsetWidth,s=Object.assign({},l,n);s.onStart(t),t.style.left=`-${a}px`,t.style.top="0",t.style.zIndex=s.zIndex||"2",await u({el:t,draw:{left:0,opacity:1},dur:s.duration,ease:s.ease}),s.onDone(t)},slideRightOut:async function(t,n){let a=t.parentElement.offsetWidth,s=Object.assign({},l,n);s.onStart(t),t.style.zIndex=s.zIndex||"1",await u({el:t,draw:{left:a,opacity:0},dur:s.duration,ease:s.ease}),s.onDone(t)},slideRightOutIn:function(t,n,e){this.slideRightOut(t,e).then(()=>{}),this.slideRightIn(n,e).then(()=>{})},fadeIn:async function(t,n){let e=Object.assign({},l,n);e.onStart(t),t.style.top="0",t.style.left="0",t.style.opacity="0",await u({el:t,draw:{opacity:1},dur:e.duration,ease:e.ease}),e.onDone(t)},fadeOut:async function(t,n){let e=Object.assign({},l,n);e.onStart(t),await u({el:t,draw:{opacity:0},dur:e.duration,ease:e.ease}),e.onDone(t)},fadeOutIn:function(t,n,e){this.fadeOut(t,e).then(()=>{}),this.fadeIn(n,e).then(()=>{})},zoomIn:async function(t,n){let e=Object.assign({},l,n);e.onStart(t),t.style.top="0",t.style.left="0",t.style.opacity="0",t.style.transform=e.scale||"scale(3)",t.style.zIndex=e.zIndex||"2",await u({el:t,draw:{scale:1,opacity:1},dur:e.duration,ease:e.ease}),e.onDone(t)},zoomOut:async function(t,n){let e=Object.assign({},l,n);e.onStart(t),t.style.zIndex=e.zIndex||"1",await u({el:t,draw:{scale:3,opacity:0},dur:e.duration,ease:e.ease}),e.onDone(t)},zoomOutIn:function(t,n,e){this.zoomOut(t,e).then(()=>{}),this.zoomIn(n,e).then(()=>{})},swirlIn:async function(t,n){let e=Object.assign({},l,n);e.onStart(t),t.style.top="0",t.style.left="0",t.style.opacity="0",t.style.transform=`${e.scale||"scale(3)"} rotate(180deg)`,t.style.zIndex=e.zIndex||"2",await u({el:t,draw:{scale:1,rotate:0,opacity:1},dur:e.duration,ease:e.ease}),e.onDone(t)},swirlOut:async function(t,n){let e=Object.assign({},l,n);e.onStart(t),t.style.zIndex=e.zIndex||"1",await u({el:t,draw:{scale:3,rotate:"180deg",opacity:0},dur:e.duration,ease:e.ease}),e.onDone(t)},swirlOutIn:function(t,n,e){this.swirlOut(t,e).then(()=>{}),this.swirlIn(n,e).then(()=>{})}};var i={fx:!0,elements:{}},J={id:null,el:null,draw:{},dur:1e3,ease:"linear",loop:0,pause:0,dir:"normal",defer:0,onFrame:b,onDone:b},u=function(t){return new Promise(function(n){let e,{id:a,el:s,draw:r,dur:c,ease:m,loop:g,onFrame:d,onDone:f,pause:x,dir:I,defer:y}=Object.assign({},J,t),w={},R="linear",q=[],C=D.linear,P,E=I==="alternate"?"normal":I,X=!1,p=a||+(performance.now()*Math.pow(10,14));if(N(s))throw new Error("Unknown element!");if(typeof s=="string"&&(s=document.querySelector(s)),typeof r!="function"&&typeof r!="object")throw new Error("Unknown draw object. Must be a function or object!");(c===0||!i.fx)&&(c=1),I==="alternate"&&typeof g=="number"&&(g*=2),typeof m=="string"?(P=/\(([^)]+)\)/.exec(m),R=m.split("(")[0],q=P?P[1].split(",").map(O=>parseFloat(O)):[],C=D[R]):typeof m=="function"?C=m:C=D.linear,i.elements[p]={element:s,id:null,stop:0,pause:0,loop:0,t:-1,started:0,paused:0};let z=()=>{typeof r=="object"&&(w=B(s,r,E)),i.elements[p].loop+=1,i.elements[p].started=performance.now(),i.elements[p].duration=c,i.elements[p].paused=!1,i.elements[p].id=requestAnimationFrame(F)},_=()=>{let O=i.elements[p].element;cancelAnimationFrame(i.elements[p].id),S(f,null,O),S(n,[this],O),delete i.elements[p]},F=O=>{let j,h,Y=i.elements[p].stop,nt=i.elements[p].paused,ot=i.elements[p].started;if(i.elements[p].paused&&(i.elements[p].started=O-i.elements[p].t*c),Y>0){Y===2&&(typeof r=="function"?r.bind(s)(1,1):H(s,w,1)),_();return}if(h=(O-ot)/c,h>1&&(h=1),h<0&&(h=0),j=C.apply(null,q)(h),i.elements[p].t=h,i.elements[p].p=j,nt){i.elements[p].id=requestAnimationFrame(F);return}typeof r=="function"?r.bind(s)(h,j):H(s,w,j),S(d,[h,j],s),h<1&&(i.elements[p].id=requestAnimationFrame(F)),parseInt(h)===1&&(g?(I==="alternate"&&(E=E==="normal"?"reverse":"normal"),typeof g=="boolean"?setTimeout(function(){z()},x):g>i.elements[p].loop?setTimeout(function(){z()},x):_()):I==="alternate"&&!X?(E=E==="normal"?"reverse":"normal",X=!0,z()):_())};y>0?setTimeout(()=>{z()},y):z()})},K=function(t){i.elements[t].paused=!0},k=function(t){i.elements[t].paused=!1},v=function(t){i.elements[t].paused=!i.elements[t].paused},It=function(){Object.keys(i.elements).forEach(t=>{K(t)})},Ot=function(){Object.keys(i.elements).forEach(t=>{k(t)})},xt=function(){Object.keys(i.elements).forEach(t=>{v(t)})},tt=function(t,n=!0){i.elements[t].stop=n===!0?2:1},bt=function(t=!0){Object.keys(i.elements).forEach(n=>{tt(n,t)})},et={loop:!1,onChainItem:b,onChainItemComplete:b,onChainComplete:b};async function W(t=[],n={}){let e=Object.assign({},et,n);for(let a=0;a<t.length;a++){let s=t[a];s.loop=!1,e.onChainItem.apply(s,[s,t]),await u(s),e.onChainItemComplete.apply(s,[s,t])}e.onChainComplete.apply(t,[t]),typeof e.loop=="boolean"&&e.loop?await W(t,e.loop):typeof e.loop=="number"&&(e.loop--,e.loop>0&&await W(t,e.loop))}var At="0.5.0",Et="12.12.2024, 20:16:24",zt="false",jt=()=>{console.info(`%c Animation %c v${At} %c ${Et} `,"color: #ffffff; font-weight: bold; background: #468284","color: white; background: darkgreen","color: white; background: #0080fe;")};i.animate=u;i.stop=tt;i.stopAll=bt;i.chain=W;i.pause=K;i.resume=k;i.toggle=v;i.pauseAll=It;i.resumeAll=Ot;i.toggleAll=xt;i.easing=D;i.effects=G;i.effectOptions=l;i.animationOptions=J;i.chainOptions=et;i.info=jt;zt==="true"&&(globalThis.Animation=i);export{i as Animation,D as Easing,l as EffectOptions,G as Effects,u as animate,W as chain,jt as info,K as pause,It as pauseAll,k as resume,Ot as resumeAll,tt as stop,bt as stopAll,v as toggle,xt as toggleAll};