animate.min.js

const AnimateJS=class{constructor(){if(this.INFINITE=-1,this.EASE="ease",this.LINEAR="linear",this.EASE_IN="ease-in",this.EASE_OUT="ease-out",this.EASE_IN_OUT="ease-in-out",this.CUBIC_BEZIER=function(t,s,e,i){if(arguments.length<4)throw new Error("Must have four parameters.");return`cubic-bezier(${t},${s},${e},${i})`},this.NORMAL="normal",this.REVERSE="reverse",this.ALT="alternate",this.ALT_REVERSE="alternate-reverse",this.NONE="none",this.FORWARDS="forwards",this.BACKWARDS="backwards",this.BOTH="both",this.SUPER_SLOW=5e3,this.SLOW=3e3,this.MODERATE=1e3,this.FAST=500,this.SUPER_FAST=200,this.RED="#ff0000",this.BROWN="#a52a2a",this.TAN="#d2b48c",this.ORANGE="#ffa500",this.YELLOW="#ffff00",this.GOLD="#ffd700",this.GREEN="#008000",this.LIME="#00ff00",this.BLUE="#0000ff",this.CYAN="#00ffff",this.NAVY="#000080",this.PURPLE="#800080",this.MAGENTA="#ff00ff",this.GRAY="#808080",this.LIGHT_GRAY="#d3d3d3",this.PINK="#ffc0cb",this.BLACK="#000",this.WHITE="#FFF",this.OPACITY=1,this.OPACITY_HALF=.5,this.NO_OPACITY=0,this.Utils={inView:t=>{const s=t.getBoundingClientRect(),e=window.innerHeight||document.documentElement.clientHeight,i=window.innerWidth||document.documentElement.clientWidth,n=s.top<e&&s.bottom>0,r=s.left<i&&s.right>0;return n&&r},$:t=>document.querySelectorAll(t),$$:t=>document.querySelector(t),Merger:(t,s)=>{const e=t.style.animation?t.style.animation.split(",").map((t=>t.trim())):[];e.includes(s)||(t.style.animation=e.length?`${t.style.animation}, ${s}`:s)},preserve3D:t=>{t.style.transformStyle="preserve-3d"},create:t=>document.createElement(t),insert:(t,s,e)=>{t.insertAdjacentElement(s,e)},contrast:(t,s)=>{const e=t=>{3===(t=t.replace(/^#/,"")).length&&(t=t.split("").map((t=>t+t)).join(""));const s=parseInt(t,16);return{r:s>>16&255,g:s>>8&255,b:255&s}},i=({r:t,g:s,b:e})=>{const i=[t,s,e].map((t=>(t/=255)<=.03928?t/12.92:Math.pow((t+.055)/1.055,2.4)));return.2126*i[0]+.7152*i[1]+.0722*i[2]},n=i(e(t)),r=i(e(s)),o=Math.max(n,r),a=Math.min(n,r);return parseFloat(((o+.05)/(a+.05)).toFixed(2))}},this.Listener={start:(t,s)=>(t.addEventListener("animationstart",(()=>s(this,t))),this),iteration:function(t,s){let e=0;return t.addEventListener("animationiteration",(()=>{e++,s(this,t,e)})),this},end:(t,s)=>(t.addEventListener("animationend",(()=>s(this,t))),this),animation:(t,{s:s,i:e,e:i})=>(s&&this.Listener.start(t,s),e&&this.Listener.iteration(t,e),i&&this.Listener.end(t,i),this)},this.draw={cube:(t={container:container,width:200,height:200,margin:0,perspective:500,label:{enabled:!1,color:"black"},face:{front:{border:"black",background:"skyblue",opacity:this.OPACITY_HALF},back:{border:"black",background:"skyblue",opacity:this.OPACITY_HALF},top:{border:"black",background:"skyblue",opacity:this.OPACITY_HALF},left:{border:"black",background:"skyblue",opacity:this.OPACITY_HALF},right:{border:"black",background:"skyblue",opacity:this.OPACITY_HALF},bottom:{border:"black",background:"skyblue",opacity:this.OPACITY_HALF}}})=>{const[s]=this.Utils.$(t.container);s.style.perspective=`${t.perspective??500}px`,s.style.width=`${t.width??200}px`,s.style.height=`${t.height??200}px`,s.style.margin=`${t.margin??0}px`,s.classList.add("cube-scene");const e=this.Utils.create("div");e.className="cube",this.Utils.insert(s,"afterbegin",e);const i=["front","back","top","bottom","left","right"];for(const s in i){const n=this.Utils.create("div");n.className=`face ${i[s]}`,t?.label&&(t.label.enabled||t.label)&&(n.innerHTML=`<span style="color:${t.label?.color??"black"};">${i[s]}</span>`),t?.face&&t.face[[`${i[s]}`]]&&(n.style.border=`2px solid ${t.face[i[s]].border??"black"}`,n.style.background=`${t.face[i[s]].background??"skyblue"}`,n.style.opacity=`${t.face[i[s]].opacity??this.OPACITY_HALF}`),this.Utils.insert(e,"beforeend",n)}}},this.Animations={fade:{in:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`fadeIn ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},out:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`fadeOut ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},inLeft:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`fadeInLeft ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},outLeft:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`fadeOutLeft ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},inRight:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`fadeInRight ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},outRight:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`fadeOutRight ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},inTop:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`fadeInTop ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},outTop:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`fadeOutTop ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},inBottom:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`fadeInBottom ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},outBottom:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`fadeOutBottom ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h}},slide:{inTop:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`slideInTop ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},outTop:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`slideOutTop ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},inBottom:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`slideInBottom ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},outBottom:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`slideOutBottom ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},inLeft:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`slideInLeft ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},outLeft:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`slideOutLeft ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},inRight:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`slideInRight ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},outRight:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`slideOutRight ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h}},rotate:{in:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`rotateIn ${e}ms ${s} ${i}ms ${n} ${r}  ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},out:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`rotateOut ${e}ms ${s} ${i}ms ${n} ${r}  ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},clockwise:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`rotateClockwise ${e}ms ${s} ${i}ms ${n} ${r}  ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},counterClockwise:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`rotateCounterClockwise ${e}ms ${s} ${i}ms ${n} ${r}  ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h}},zoom:{in:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`zoomIn ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},out:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`zoomOut ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h}},bounce:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`bounce ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},stretch:{width:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`stretchWidth ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},height:(t,s="ease",e=this.MODERATE,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`stretchHeight ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h}}},!this.Utils.$$("#animateJS-animations")){const t=document.createElement("style");t.id="animateJS-animations",document.head.appendChild(t)}}animate(t,s,e={}){const{timing:i="linear",duration:n=this.MODERATE,delay:r=0,count:o=1,direction:a="normal",mode:h="forwards",merge:l=!1}=e,$=s.split(".");let c=this.Animations;for(let t=0;t<$.length;t++){if(void 0===c[$[t]])return console.error("Animation not found:",s),Promise.resolve();c=c[$[t]]}return"function"!=typeof c?(console.error("Animation is not a function:",s),Promise.resolve()):(c(t,i,n,r,o===this.INFINITE?"infinite":o,a,h,l),new Promise((s=>{if(o===this.INFINITE)s();else{const e=()=>{t.removeEventListener("animationend",e),s()};t.addEventListener("animationend",e)}})))}scroll(t,s){return t.addEventListener("scroll",(()=>s(this,t))),this}load(t,s){return t.addEventListener("load",(()=>s(this,t))),this}hover(t,s,e=((t,s)=>{s.style.animation=""})){return t.addEventListener("mouseenter",(()=>s(this,t))),t.addEventListener("touchstart",(()=>s(this,t))),t.addEventListener("mouseleave",(()=>e(this,t))),t.addEventListener("touchend",(()=>e(this,t))),this}click(t,s){return t.addEventListener("click",(()=>s(this,t))),this}init(t,s={}){const e=Object.entries(s).map((([t,s])=>`${t}: ${s}`)).join("; ");return t.setAttribute("style",e),this}wait(t,s=1e3){return setTimeout(t,s),this}add(t){if(!(t instanceof AnimationJS))throw new Error("Must be an instance of AnimationJS");if(!t.callback)throw new Error(`${t.path} hasn't been developed. You must use develop() method`);const s=t.path.split(".");let e=this.Animations;for(let i=0;i<s.length;i++){const n=s[i];i===s.length-1?e[n]=t.callback:(void 0!==e[n]||(e[n]={}),e=e[n])}if(t.css){const s=this.Utils.$$("#animateJS-animations");s&&(s.innerHTML+=t.css)}return this}async run(...t){for(const s of t)"function"==typeof s?await s():s instanceof Promise?await s:console.warn("Animation must be a function or promise:",s)}},AnimationJS=class{#t;#s;#e;constructor(...t){this.path=t.join(".")??"",this.name=`${this.#i(t)}_${this.#n(t)}`,this.#t=`@keyframes ${this.name}{`,this.#s="",this.#e="}",this.css="",this.callback=null,this.Utils={Merger:(t,s)=>{t.style.animation=t.style.animation?`${t.style.animation}, ${s}`:s}}}#n(t){return t[t.length-1]}#i(t){return t[0]}createTimeline(t,...s){return t=t.toString(),this.#s+=`${t.match(/\d+/)?`${t}%`:t}{`,s.forEach((t=>{if(!(t instanceof KeyFrames))throw new Error("Must be a keyframe object");this.#s+=t.finalize()})),this.#s+="}",this.css=`${this.#t}${this.#s}${this.#e}`,this}develop(){return this.callback=(t,s="ease",e=3e3,i=0,n=1,r="normal",o="none",a=!1)=>{const h=`${this.name} ${e}ms ${s} ${i}ms ${n} ${r} ${o}`;a?this.Utils.Merger(t,h):t.style.animation=h},this}},KeyFrames=class{constructor(){this.css="",this.transforms=[],this.boxShadows=[],this.backgrounds=[],this.transitions=[],this.borders={},this.fontShadows=[],this.colors="",this.opacities=null}rotate(t){return this.transforms.push(`rotate(${t}deg)`),this}rotateX(t){return this.transforms.push(`rotateX(${t}deg)`),this}rotateY(t){return this.transforms.push(`rotateY(${t}deg)`),this}rotateZ(t){return this.transforms.push(`rotateZ(${t}deg)`),this}scale(t,s){return void 0===s?this.transforms.push(`scale(${t})`):this.transforms.push(`scale(${t}, ${s})`),this}scale3D(t,s,e){return this.transforms.push(`scale3d(${t}, ${s}, ${e})`),this}scaleX(t){return this.transforms.push(`scaleX(${t})`),this}scaleY(t){return this.transforms.push(`scaleY(${t})`),this}scaleZ(t){return this.transforms.push(`scaleZ(${t})`),this}translate(t,s){return this.transforms.push(`translate(${t}px, ${s}px)`),this}translateX(t){return this.transforms.push(`translateX(${t}px)`),this}translateY(t){return this.transforms.push(`translateY(${t}px)`),this}perspective(t){return this.transforms.push(`perspective(${t}px)`),this}matrix(t,s,e,i,n,r,o,a,h,l,$,c,m,u,d,f){return this.transforms.push(`matrix(${t}, ${s}, ${e}, ${i}, ${n}, ${r}, ${o}, ${a}, ${h}, ${l}, ${$}, ${c}, ${m}, ${u}, ${d}, ${f})`),this}matrix3D(t,s,e,i,n,r,o,a,h,l,$,c,m,u,d,f){return this.transforms.push(`matrix3d(${t}, ${s}, ${e}, ${i}, ${n}, ${r}, ${o}, ${a}, ${h}, ${l}, ${$}, ${c}, ${m}, ${u}, ${d}, ${f})`),this}rotate3D(t,s,e,i){return this.transforms.push(`rotate3d(${t}, ${s}, ${e}, ${i}deg)`),this}skew(t,s){return this.transforms.push(`skew(${t}deg, ${s}deg)`),this}skewX(t){return this.transforms.push(`skewX(${t}deg)`),this}skewY(t){return this.transforms.push(`skewY(${t}deg)`),this}boxShadow(...t){return t.forEach((t=>{this.boxShadows.push(`${t.h??0}px ${t.v??0}px ${t.blur??0}px ${t.spread??0}px ${t.color??"transparent"}`)})),this}background(...t){return this.backgrounds.push(...t),this}transition(...t){return this.transitions.push(...t),this}border(t,s,e,...i){if(0===i.length)this.borders.border=`${t}px ${s} ${e}`;else for(const n of i)switch(n.toLowerCase()){case"top":this.borders["border-top"]=`${t}px ${s} ${e}`;break;case"right":this.borders["border-right"]=`${t}px ${s} ${e}`;break;case"bottom":this.borders["border-bottom"]=`${t}px ${s} ${e}`;break;case"left":this.borders["border-left"]=`${t}px ${s} ${e}`}return this}fontShadow(...t){return t.forEach((t=>{this.fontShadows.push(`${t.h??0}px ${t.v??0}px ${t.blur??0}px ${t.color??"transparent"}`)})),this}color(t){return this.colors=t,this}opacity(t){return this.opacities=Math.min(Math.max(parseFloat(t),0),1),this}finalize(){const t=[];this.transforms.length>0&&t.push(`transform: ${this.transforms.join(" ")};`),this.boxShadows.length>0&&t.push(`box-shadow: ${this.boxShadows.join(", ")};`),this.backgrounds.length>0&&t.push(`background: ${this.backgrounds.join(", ")};`),this.transitions.length>0&&t.push(`transition: ${this.transitions.join(", ")};`);for(const[s,e]of Object.entries(this.borders))t.push(`${s}: ${e};`);return this.fontShadows.length>0&&t.push(`text-shadow: ${this.fontShadows.join(", ")};`),this.#r(this.colors)||t.push(`color: ${this.colors};`),this.opacities>=0&&this.opacities&&t.push(`opacity: ${this.opacities};`),this.css=t.join(" "),this.css}#r(t){return!t||""===t}clear(){return this.css="",this.transforms=[],this.boxShadows=[],this.backgrounds=[],this.transitions=[],this.borders={},this.fontShadows=[],this.colors="",this.opacities=null,this}},AnimateEvents=class{constructor(){this.transformState={rotateX:0,rotateY:0,scale:1}}clickRotate(t,s=1){let e=!1,i=0,n=0,r=0,o=0;t.classList.add("isMovable");const a=t=>{e=!0,t.type.startsWith("touch")?(i=t.touches[0].clientX,n=t.touches[0].clientY):(i=t.clientX,n=t.clientY),document.addEventListener("mousemove",h),document.addEventListener("mouseup",l),document.addEventListener("touchmove",h),document.addEventListener("touchend",l)},h=a=>{if(!e)return;let h,l;a.type.startsWith("touch")?(h=a.touches[0].clientX,l=a.touches[0].clientY):(h=a.clientX,l=a.clientY);o+=(h-i)*s,r-=(l-n)*s,this.transformState.rotateX=r,this.transformState.rotateY=o,t.style.transform=this._getTransformString(),i=h,n=l},l=()=>{e=!1,document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",l),document.removeEventListener("touchmove",h),document.removeEventListener("touchend",l)};return t.addEventListener("mousedown",a),t.addEventListener("touchstart",a),this}scrollZoom(t,s=.5,e=3){let i=!1,n=0;const r=t=>{const[s,e]=t,i=e.clientX-s.clientX,n=e.clientY-s.clientY;return Math.hypot(i,n)};return t.addEventListener("wheel",(i=>{i.preventDefault();const n=.001*-i.deltaY;let r=this.transformState.scale+n;r=Math.min(Math.max(r,s),e),this.transformState.scale=r,t.style.transform=this._getTransformString()})),t.addEventListener("touchstart",(t=>{2===t.touches.length&&(i=!0,n=r(t.touches))})),t.addEventListener("touchmove",(o=>{if(i&&2===o.touches.length){const i=r(o.touches)-n;let a=this.transformState.scale+.005*i;a=Math.min(Math.max(a,s),e),this.transformState.scale=a,t.style.transform=this._getTransformString()}})),t.addEventListener("touchend",(t=>{i&&t.touches.length<2&&(i=!1)})),this}_getTransformString(){const{rotateX:t,rotateY:s,scale:e}=this.transformState;return`rotateX(${t}deg) rotateY(${s}deg) scale(${e})`}};