UNPKG

alrdy-animate

Version:

A library to handle animations on scroll with GSAP integration.

2 lines 13.6 kB
/*! For license information please see gsap-text.6a4ca86efe36f5be98a9.js.LICENSE.txt */ "use strict";(this.webpackChunkAlrdyAnimate=this.webpackChunkAlrdyAnimate||[]).push([[478],{646(t,e,i){function n(t){const e={duration:.5,stagger:.1,ease:"back.out"},i=1.2,n=.3,s="circ.out",l={duration:1,stagger:.08,ease:"power2.inOut"},r={duration:.4,stagger:.02,ease:"ease-out"};function a(e,i){return(n,s,l,r,a,o)=>function(e,i,n,s,l,r,a){const o=e.hasAttribute("aa-scrub");o&&t.set(e,{visibility:"visible",opacity:1});const p={duration:n,ease:r,delay:l,onStart:()=>{o||t.set(e,{visibility:"visible",opacity:1})}},c=e.settings?.colors||{};return"lines&words"===i?{onSplit:e=>{const i=t.timeline();return e.lines.forEach((t,n)=>{const l=e.words.filter(e=>t.contains(e));i.from(l,{...p,...a,...c,stagger:s},n*s*3)}),i}}:"lines&chars"===i?{onSplit:e=>{const i=t.timeline();return e.lines.forEach((t,n)=>{const l=e.chars.filter(e=>t.contains(e));i.from(l,{...p,...a,...c,stagger:s},n*s*6)}),i}}:{onSplit:e=>{const n=t.timeline(),l=e[i.split("-")[0].split("|")[0]];return e._groups?e._groups.forEach((t,e)=>{n.from(t,{...p,...a,...c,stagger:0},e*s)}):n.from(l,{...p,...a,...c,stagger:s}),n}}}(n,s,l??i.duration,r??i.stagger,a,o??i.ease,e)}function o(e){const i={left:{initialClip:"inset(0% 0% 0% 100%)",revealClip:"inset(0% 0% 0% 0%)",hideClip:"inset(0% 100% 0% 0%)",textInit:{x:"0.6em",y:0},textFinal:{x:0,y:0}},right:{initialClip:"inset(0% 100% 0% 0%)",revealClip:"inset(0% 0% 0% 0%)",hideClip:"inset(0% 0% 0% 100%)",textInit:{x:"-0.6em",y:0},textFinal:{x:0,y:0}},up:{initialClip:"inset(100% 0% 0% 0%)",revealClip:"inset(0% 0% 0% 0%)",hideClip:"inset(0% 0% 100% 0%)",textInit:{x:0,y:"0.6em"},textFinal:{x:0,y:0}},down:{initialClip:"inset(0% 0% 100% 0%)",revealClip:"inset(0% 0% 0% 0%)",hideClip:"inset(100% 0% 0% 0%)",textInit:{x:0,y:"-0.6em"},textFinal:{x:0,y:0}}};return(n,s,l,r,a,o)=>({onSplit:s=>{const p=n.hasAttribute("aa-scrub"),c=t.timeline({delay:a,onStart:()=>{p||t.set(n,{visibility:"visible",opacity:1})}}),d=n.settings?.colors||{},h=d.backgroundColor||"#000000",u=d.color;p&&t.set(n,{visibility:"visible",opacity:1});const{initialClip:f,revealClip:m,hideClip:g,textInit:y,textFinal:x}=i[e];return s.lines.forEach((e,i)=>{const n=document.createElement("div");n.className="aa-block-bg",n.style.backgroundColor=h;const s=e.innerHTML,a=document.createElement("div");a.className="aa-block-text",a.innerHTML=s,e.innerHTML="",e.appendChild(n),e.appendChild(a),t.set(n,{clipPath:f});const p=.4*l,d=.6*l,x=.4*l,b=t.timeline(),v={opacity:0,...y};u&&(v.color=u),b.to(n,{clipPath:m,duration:p,ease:o}).to(n,{clipPath:g,duration:d,ease:o}).from(a,{...v,duration:x,ease:o},"<"),c.add(b,i*(r??0))}),c}})}function p(i){const n={down:{initialClip:"ellipse(20% 0% at 50% 0%)",finalClip:"ellipse(100% 120% at 50% 0%)"},up:{initialClip:"ellipse(20% 0% at 50% 100%)",finalClip:"ellipse(100% 120% at 50% 100%)"}};return(s,l,r,a,o,p)=>({onSplit:l=>{const c=t.timeline({delay:o}),d=s.settings?.colors||{},h=s.hasAttribute("aa-scrub");h&&t.set(s,{visibility:"visible",opacity:1});const{initialClip:u,finalClip:f}=n[i],m=[];return l.lines.forEach(t=>{const e=document.createElement("div");e.classList.add("aa-oval-line"),t.parentNode.insertBefore(e,t),e.appendChild(t),m.push(e)}),t.set(".aa-oval-line",{overflow:"clip"}),l.lines.forEach((i,n)=>{const l=m[n];t.set(l,{clipPath:u});const o=t.timeline({onStart:()=>{h||0!==n||t.set(s,{visibility:"visible",opacity:1})}});o.to(l,{clipPath:f,duration:r??e.duration,ease:p??e.ease}),Object.keys(d).length>0&&o.from(i,{...d,duration:r??e.duration,ease:p??e.ease},0),c.add(o,n*(a??e.stagger))}),c}})}return{text:{"text-slide-up":a({y:"110%",opacity:0},e),"text-slide-down":a({y:"-110%",opacity:0},e),"text-slide-left":a({x:"100vw",opacity:0},e),"text-tilt-up":a({y:"110%",opacity:0,rotation:10,transformOrigin:"bottom left"},e),"text-tilt-down":a({y:"-110%",opacity:0,rotation:-10,transformOrigin:"top left"},e),"text-scale-up":a({y:"120%",opacity:0,scale:.9,transformOrigin:"left center"},e),"text-fade-30":a({opacity:.3},l),"text-fade-10":a({opacity:.1},l),"text-fade":a({opacity:0},l),"text-blur":a({opacity:0,filter:"blur(10px)"},r),"text-blur-left":a({opacity:0,filter:"blur(10px)",x:30},r),"text-blur-right":a({opacity:0,filter:"blur(10px)",x:-30},r),"text-blur-up":a({opacity:0,filter:"blur(10px)",y:"110%"},r),"text-blur-down":a({opacity:0,filter:"blur(10px)",y:"-110%"},r),"text-block-left":o("left"),"text-block-right":o("right"),"text-block-up":o("up"),"text-block-down":o("down"),"text-oval-up":p("up"),"text-oval-down":p("down"),"text-rotate-soft":(e,l,r,a,o,p)=>({onSplit:l=>{const c=t.timeline();if(!l.lines||0===l.lines.length)return c;const d=e.settings?.colors||{},h=e.hasAttribute("aa-scrub");h&&t.set(e,{visibility:"visible",opacity:1});const u=5*parseFloat(window.getComputedStyle(e).fontSize);return l.lines.forEach(t=>{const e=document.createElement("div");e.classList.add("line-perspective-wrapper"),t.parentNode.insertBefore(e,t),e.appendChild(t)}),c.set(".line-perspective-wrapper",{transformStyle:"preserve-3d",perspective:u}).set(l.lines,{transformOrigin:"50% 0%"}),c.from(l.lines,{autoAlpha:0,rotateX:-90,y:"100%",scaleX:.75,...d,duration:r??i,stagger:a??n,ease:p??s,delay:o,onStart:()=>{h||t.set(e,{visibility:"visible",opacity:1})}}),c}})}}}i.r(e),i.d(e,{createTextAnimations:()=>n})},321(t,e,i){function n(t,e,i=!1,n,s){const[l,r]=e?.split("|")||[],a={"lines&words":{type:"words,lines"},"lines&chars":{type:"chars,lines"},chars:{type:"chars,lines"},words:{type:"words,lines"},lines:{type:"lines"}},o=Object.entries(a).find(([t])=>l?.startsWith(t))?.[1]||a.lines,p=t.textContent,c=t.tagName.toLowerCase(),d=t.hasAttribute("aa-aria-false")||"p"===c||"div"===c;if(d){t.setAttribute("aria-hidden","true");const e=document.createElement("span");e.className="aa-screenreader-only",e.textContent=p,t.parentElement.insertBefore(e,t)}o.aria=i?"hidden":d?"none":"auto";const h=["-clip","-lines","-words","-chars"].find(t=>s.includes(t));if(h){const t="-clip"===h?"lines":h.substring(1);o.mask=t}return o.autoSplit=!0,o.linesClass="aa-line",n&&(o.onSplit=t=>{if(r){const e=t[l.split("-")[0]];for(let t=e.length-1;t>0;t--){const i=Math.floor(Math.random()*(t+1));[e[t],e[i]]=[e[i],e[t]]}if(!isNaN(parseInt(r))){const i=parseInt(r),n=Math.ceil(e.length/i);t._groups=Array.from({length:i},(t,i)=>e.slice(i*n,(i+1)*n))}}const e=n(t);return t.timeline=e,e}),{splitInstance:new SplitText(t,o)}}i.r(e),i.d(e,{splitText:()=>n})},373(t,e,i){i.d(e,{SplitText:()=>E});let n,s,l,r="function"==typeof Symbol?Symbol():"_split",a="undefined"!=typeof Intl&&"Segmenter"in Intl?new Intl.Segmenter:0,o=t=>t?"string"==typeof t?o(document.querySelectorAll(t)):"length"in t?Array.from(t).reduce((t,e)=>("string"==typeof e?t.push(...o(e)):t.push(e),t),[]):[t]:[],p=t=>o(t).filter(t=>t&&1===t.nodeType),c=[],d=function(){},h={add:t=>t()},u=/\s+/g,f=new RegExp("\\p{RI}\\p{RI}|\\p{Emoji}(\\p{EMod}|\\u{FE0F}\\u{20E3}?|[\\u{E0020}-\\u{E007E}]+\\u{E007F})?(\\u{200D}\\p{Emoji}(\\p{EMod}|\\u{FE0F}\\u{20E3}?|[\\u{E0020}-\\u{E007E}]+\\u{E007F})?)*|.","gu"),m={left:0,top:0,width:0,height:0},g=(t,e)=>{for(;++e<t.length&&t[e]===m;);return t[e]||m},y=({element:t,html:e,ariaL:i,ariaH:n})=>{t.innerHTML=e,i?t.setAttribute("aria-label",i):t.removeAttribute("aria-label"),n?t.setAttribute("aria-hidden",n):t.removeAttribute("aria-hidden")},x=(t,e)=>{if(e){let i,n,s,l,r=new Set(t.join("").match(e)||c),a=t.length;if(r.size)for(;--a>-1;)for(s of(n=t[a],r))if(s.startsWith(n)&&s.length>n.length){for(i=0,l=n;s.startsWith(l+=t[a+ ++i])&&l.length<s.length;);if(i&&l.length===s.length){t[a]=s,t.splice(a+1,i);break}}}return t},b=t=>"inline"===window.getComputedStyle(t).display&&(t.style.display="inline-block"),v=(t,e,i)=>e.insertBefore("string"==typeof t?document.createTextNode(t):t,i),w=(t,e,i)=>{let n=e[t+"sClass"]||"",{tag:s="div",aria:l="auto",propIndex:r=!1}=e,a="line"===t?"block":"inline-block",o=n.indexOf("++")>-1,p=e=>{let p=document.createElement(s),c=i.length+1;return n&&(p.className=n+(o?" "+n+c:"")),r&&p.style.setProperty("--"+t,c+""),"none"!==l&&p.setAttribute("aria-hidden","true"),"span"!==s&&(p.style.position="relative",p.style.display=a),p.textContent=e,i.push(p),p};return o&&(n=n.replace("++","")),p.collection=i,p},C=(t,e,i,n,s,l,r,o,p,d)=>{var h;let f,m,g,y,w,S,E,A,T,N,k,O,_,I,B,R,F,L,W=Array.from(t.childNodes),M=0,{wordDelimiter:j,reduceWhiteSpace:H=!0,prepareText:z}=e,P=t.getBoundingClientRect(),D=P,X=!H&&"pre"===window.getComputedStyle(t).whiteSpace.substring(0,3),q=0,G=i.collection;for("object"==typeof j?(g=j.delimiter||j,m=j.replaceWith||""):m=""===j?"":j||" ",f=" "!==m;M<W.length;M++)if(y=W[M],3===y.nodeType){for(B=y.textContent||"",H?B=B.replace(u," "):X&&(B=B.replace(/\n/g,m+"\n")),z&&(B=z(B,t)),y.textContent=B,w=m||g?B.split(g||m):B.match(o)||c,F=w[w.length-1],A=f?" "===F.slice(-1):!F,F||w.pop(),D=P,E=f?" "===w[0].charAt(0):!w[0],E&&v(" ",t,y),w[0]||w.shift(),x(w,p),l&&d||(y.textContent=""),T=1;T<=w.length;T++)if(R=w[T-1],!H&&X&&"\n"===R.charAt(0)&&(null==(h=y.previousSibling)||h.remove(),v(document.createElement("br"),t,y),R=R.slice(1)),H||""!==R)if(" "===R)t.insertBefore(document.createTextNode(" "),y);else{if(f&&" "===R.charAt(0)&&v(" ",t,y),q&&1===T&&!E&&G.indexOf(q.parentNode)>-1?(S=G[G.length-1],S.appendChild(document.createTextNode(n?"":R))):(S=i(n?"":R),v(S,t,y),q&&1===T&&!E&&S.insertBefore(q,S.firstChild)),n)for(k=a?x([...a.segment(R)].map(t=>t.segment),p):R.match(o)||c,L=0;L<k.length;L++)S.appendChild(" "===k[L]?document.createTextNode(" "):n(k[L]));if(l&&d){if(B=y.textContent=B.substring(R.length+1,B.length),N=S.getBoundingClientRect(),N.top>D.top&&N.left<=D.left){for(O=t.cloneNode(),_=t.childNodes[0];_&&_!==S;)I=_,_=_.nextSibling,O.appendChild(I);t.parentNode.insertBefore(O,t),s&&b(O)}D=N}(T<w.length||A)&&v(T>=w.length?" ":f&&" "===R.slice(-1)?" "+m:m,t,y)}else v(m,t,y);t.removeChild(y),q=0}else 1===y.nodeType&&(r&&r.indexOf(y)>-1?(G.indexOf(y.previousSibling)>-1&&G[G.length-1].appendChild(y),q=y):(C(y,e,i,n,s,l,r,o,p,!0),q=0),s&&b(y))};const S=class t{constructor(t,e){this.isSplit=!1,l||E.register(window.gsap),this.elements=p(t),this.chars=[],this.words=[],this.lines=[],this.masks=[],this.vars=e,this.elements.forEach(t=>{var i;!1!==e.overwrite&&(null==(i=t[r])||i._data.orig.filter(({element:e})=>e===t).forEach(y)),t[r]=this}),this._split=()=>this.isSplit&&this.split(this.vars);let i,n=[],s=()=>{let t,e=n.length;for(;e--;){t=n[e];let i=t.element.offsetWidth;if(i!==t.width)return t.width=i,void this._split()}};this._data={orig:n,obs:"undefined"!=typeof ResizeObserver&&new ResizeObserver(()=>{clearTimeout(i),i=setTimeout(s,200)})},d(this),this.split(e)}split(t){return(this._ctx||h).add(()=>{this.isSplit&&this.revert(),this.vars=t=t||this.vars||{};let e,{type:i="chars,words,lines",aria:n="auto",deepSlice:l=!0,smartWrap:r,onSplit:a,autoSplit:c=!1,specialChars:d,mask:h}=this.vars,u=i.indexOf("lines")>-1,y=i.indexOf("chars")>-1,x=i.indexOf("words")>-1,b=y&&!x&&!u,v=d&&("push"in d?new RegExp("(?:"+d.join("|")+")","gu"):d),S=v?new RegExp(v.source+"|"+f.source,"gu"):f,E=!!t.ignore&&p(t.ignore),{orig:A,animTime:T,obs:N}=this._data;(y||x||u)&&(this.elements.forEach((e,i)=>{A[i]={element:e,html:e.innerHTML,ariaL:e.getAttribute("aria-label"),ariaH:e.getAttribute("aria-hidden")},"auto"===n?e.setAttribute("aria-label",(e.textContent||"").trim()):"hidden"===n&&e.setAttribute("aria-hidden","true");let s,a,p,c,d=[],h=[],f=[],T=y?w("char",t,d):null,N=w("word",t,h);if(C(e,t,N,T,b,l&&(u||b),E,S,v,!1),u){let i,n,l=o(e.childNodes),r=((t,e,i,n)=>{let s=w("line",i,n),l=window.getComputedStyle(t).textAlign||"left";return(i,n)=>{let r=s("");for(r.style.textAlign=l,t.insertBefore(r,e[i]);i<n;i++)r.appendChild(e[i]);r.normalize()}})(e,l,t,f),a=[],p=0,c=l.map(t=>1===t.nodeType?t.getBoundingClientRect():m),d=m;for(s=0;s<l.length;s++)i=l[s],1===i.nodeType&&("BR"===i.nodeName?(s&&"BR"===l[s-1].nodeName||(a.push(i),r(p,s+1)),p=s+1,d=g(c,s)):(n=c[s],s&&n.top>d.top&&n.left<d.left+d.width-1&&(r(p,s),p=s),d=n));p<s&&r(p,s),a.forEach(t=>{var e;return null==(e=t.parentNode)?void 0:e.removeChild(t)})}if(!x){for(s=0;s<h.length;s++)if(a=h[s],y||!a.nextSibling||3!==a.nextSibling.nodeType)if(r&&!u){for(p=document.createElement("span"),p.style.whiteSpace="nowrap";a.firstChild;)p.appendChild(a.firstChild);a.replaceWith(p)}else a.replaceWith(...a.childNodes);else c=a.nextSibling,c&&3===c.nodeType&&(c.textContent=(a.textContent||"")+(c.textContent||""),a.remove());h.length=0,e.normalize()}this.lines.push(...f),this.words.push(...h),this.chars.push(...d)}),h&&this[h]&&this.masks.push(...this[h].map(t=>{let e=t.cloneNode();return t.replaceWith(e),e.appendChild(t),t.className&&(e.className=t.className.trim().split(" ").map(t=>t+"-mask").join(" ")),e.style.overflow="clip",e}))),this.isSplit=!0,s&&u&&c&&s.addEventListener("loadingdone",this._split),(e=a&&a(this))&&e.totalTime&&(this._data.anim=T?e.totalTime(T):e),u&&c&&this.elements.forEach((t,e)=>{A[e].width=t.offsetWidth,N&&N.observe(t)})}),this}kill(){let{obs:t}=this._data;t&&t.disconnect(),null==s||s.removeEventListener("loadingdone",this._split)}revert(){var t,e;if(this.isSplit){let{orig:i,anim:n}=this._data;this.kill(),i.forEach(y),this.chars.length=this.words.length=this.lines.length=i.length=this.masks.length=0,this.isSplit=!1,n&&(this._data.animTime=n.totalTime(),n.revert()),null==(e=(t=this.vars).onRevert)||e.call(t,this)}return this}static create(e,i){return new t(e,i)}static register(t){n=n||t||window.gsap,n&&(o=n.utils.toArray,d=n.core.context||d),!l&&window.innerWidth>0&&(s=document.fonts,l=!0)}};S.version="3.15.0";let E=S}}]);