UNPKG

alrdy-animate

Version:

A library to handle animations on scroll with GSAP integration.

1 lines 5.43 kB
"use strict";(this.webpackChunkAlrdyAnimate=this.webpackChunkAlrdyAnimate||[]).push([[336],{960(e,t,n){n.r(t),n.d(t,{createAppearAnimations:()=>i});const o={up:{start:"inset(100% 0 0 0)",end:"inset(0% 0 0 0)"},down:{start:"inset(0 0 100% 0)",end:"inset(0 0 0% 0)"},left:{start:"inset(0 100% 0 0)",end:"inset(0 0% 0 0)"},right:{start:"inset(0 0 0 100%)",end:"inset(0 0 0 0%)"}};function i(e,t){return{appear:(t,n,o,i,l,s,a=1)=>function(e,t,n,o,i,l,s,a=1){const[r,c]=s.split("-");t.set(e,{x:0,y:0,opacity:a,clipPath:"none"});const d={opacity:0,y:"up"===c?3*l+"rem":"down"===c?-3*l+"rem":0,x:"left"===c?3*l+"rem":"right"===c?-3*l+"rem":0},p={opacity:a,y:0,x:0,duration:n,ease:o,delay:i};return t.timeline().fromTo(e,d,p)}(t,e,n,o,i,l,s,a),reveal:(t,n,o,i,l,s=1)=>function(e,t,n,o,i,l,s=1){const a=l.split("-"),r=a.length>2?`${a[1]}-${a[2]}`:a[1];t.set(e,{x:0,y:0,opacity:s,clipPath:"none"});const c={up:{start:"inset(100% 0 0 0)",end:"inset(0% 0 0 0)"},down:{start:"inset(0 0 100% 0)",end:"inset(0 0 0% 0)"},right:{start:"inset(0 100% 0 0)",end:"inset(0 0% 0 0)"},left:{start:"inset(0 0 0 100%)",end:"inset(0 0 0 0%)"},center:{start:"circle(0% at 50% 50%)",end:"circle(150% at 50% 50%)"},"oval-down":{start:"ellipse(0% 0% at 50% 0%)",end:"ellipse(150% 150% at 50% 0%)"},"oval-up":{start:"ellipse(0% 0% at 50% 100%)",end:"ellipse(150% 150% at 50% 100%)"},"oval-right":{start:"ellipse(0% 0% at 0% 50%)",end:"ellipse(150% 150% at 0% 50%)"},"oval-left":{start:"ellipse(0% 0% at 100% 50%)",end:"ellipse(150% 150% at 100% 50%)"}};return t.timeline().fromTo(e,{clipPath:c[r]?.start||c.up.start,opacity:"center"===r?0:s},{clipPath:c[r]?.end||c.up.end,opacity:s,duration:n,ease:o,delay:i})}(t,e,n,o,i,l,s),revealSlices:(t,n,i,l,s,a=1,r=.02,c=3)=>function(e,t,n,i,l,s,a,r,c){const d=s.split("-");let p=5,u="up";const h=["up","down","left","right"],f=d.find(e=>h.includes(e));f&&(u=f);const g=f?d.indexOf(f):-1;if(g>=0&&g+1<d.length){const e=parseInt(d[g+1],10);!isNaN(e)&&e>0&&(p=e)}else if(!f&&d.length>=3&&"slices"===d[1]){const e=parseInt(d[2],10);!isNaN(e)&&e>0&&(p=e)}const m="up"===u||"down"===u,C=e.offsetHeight,y=e.offsetWidth,v=Array.from(e.childNodes);e._revealSlicesOriginalContent=v,t.set(e,{x:0,y:0,opacity:a,clipPath:"none"});const b=[];if(1===p)b.push(1);else if(1===c){const e=1/p;for(let t=0;t<p;t++)b.push(e)}else{for(let e=0;e<p;e++){const t=1+e/(p-1)*(c-1);b.push(t)}const e=b.reduce((e,t)=>e+t,0);for(let t=0;t<b.length;t++)b[t]=b[t]/e}const w=document.createElement("div");Object.assign(w.style,{position:"relative",width:"100%",height:"100%",overflow:"hidden"}),e.innerHTML="",e.appendChild(w);const x=[],N=m?C:y;let S=0;for(let e=0;e<p;e++){const t=Math.floor(b[e]*N);x.push(t),S+=t}x.length>0&&S<N&&(x[x.length-1]+=N-S);const E=o[u],O=[],_=document.createDocumentFragment();let T=0;for(let e=0;e<p;e++){const t=document.createElement("div"),n=document.createElement("div"),o=e>0,i=o?T-1:T,l=x[e]+(o?1:0);m?(Object.assign(t.style,{position:"absolute",left:"0",right:"0",width:"100%",height:`${l}px`,top:`${i}px`,overflow:"hidden"}),n.style.transform=`translateY(-${i}px)`):(Object.assign(t.style,{position:"absolute",top:"0",bottom:"0",height:"100%",width:`${l}px`,left:`${i}px`,overflow:"hidden"}),n.style.transform=`translateX(-${i}px)`),Object.assign(n.style,{position:"absolute",top:"0",left:"0",width:`${y}px`,height:`${C}px`});const s=document.createDocumentFragment();v.forEach(e=>{e.nodeType!==Node.ELEMENT_NODE&&e.nodeType!==Node.TEXT_NODE||s.appendChild(e.cloneNode(!0))}),n.appendChild(s),t.appendChild(n),_.appendChild(t),O.push(t),T+=x[e]}w.appendChild(_);const $=t.timeline(),k="right"===u;return t.set(O,{clipPath:E.start,opacity:a}),O.forEach((e,t)=>{const o=k?p-1-t:t;$.to(e,{clipPath:E.end,duration:n,ease:i,delay:0===o?l:0},o*r)}),e._revealSlicesContainer=w,$}(t,e,n,i,l,s,a,r,c),cleanupRevealSlices:t=>function(e,t){if(!e._revealSlicesContainer)return;e.timeline&&(e.timeline.kill(),e.timeline=null);const n=e._revealSlicesContainer.querySelectorAll('div[style*="position: absolute"]');n.length>0&&t.killTweensOf(n),e._revealSlicesContainer.parentNode===e&&e.removeChild(e._revealSlicesContainer);const o=e._revealSlicesOriginalContent;if(o&&o.length>0){const t=document.createDocumentFragment();o.forEach(e=>{t.appendChild(e)}),e.appendChild(t)}t.set(e,{clearProps:"all"}),e._revealSlicesContainer=null,e._revealSlicesOriginalContent=null}(t,e),counter:(t,n,o,i,l)=>function(e,t,n,o,i,l){const[s,a]=l.split("-"),r=e.textContent,c=r.replace(/[,\.]/g,""),d=parseFloat(c),p=a?parseFloat(a):0,u=r.includes(","),h=r.includes(".");return isNaN(d)?(console.warn("Counter animation target must be a number"),t.timeline()):t.timeline().fromTo(e,{textContent:p},{textContent:d,duration:n,ease:o,delay:i,snap:{textContent:1},onUpdate:function(){const e=this.targets()[0].textContent;u?this.targets()[0].textContent=Number(e).toLocaleString("en-US").replace(/,/g,","):h&&(this.targets()[0].textContent=Number(e).toLocaleString("de-DE").replace(/\./g,"."))}})}(t,e,n,o,i,l),grow:(t,n,o,i,l)=>function(e,t,n,o,i,l){const[s,a]=l.split("-"),r=e.settings?.colors||{},c=window.getComputedStyle(e),d={};void 0!==r.backgroundColor&&(d.backgroundColor=c.backgroundColor),void 0!==r.color&&(d.color=c.color),void 0!==r.borderColor&&(d.borderColor=c.borderColor);const p="horizontal"===a?"width":"height",u={[p]:0,...r},h={[p]:"auto",...d,duration:n,ease:o,delay:i};return t.set(e,u),t.timeline().to(e,h)}(t,e,n,o,i,l)}}}}]);