alrdy-animate
Version:
A library to handle animations on scroll with GSAP integration.
1 lines • 4.14 kB
JavaScript
;(this.webpackChunkAlrdyAnimate=this.webpackChunkAlrdyAnimate||[]).push([[298],{402(t,e,r){function a(t,e){const r=document.querySelector("[aa-nav]");let a=!1;const n=(t,e,r)=>{e>=r&&!a?(t.classList.add("is-scrolled"),a=!0):e<r&&a&&(t.classList.remove("is-scrolled"),a=!1)},s=(t,e)=>({duration:t,ease:e,absolute:!0,simple:!0,overwrite:"auto"}),o=t=>t.querySelector("[aa-scroll-target].is-current");return{nav:e=>{if(!r)return;const a=r.getAttribute("aa-nav")||"hide",s=r.getAttribute("aa-ease")||"power2.out",o=parseFloat(r.getAttribute("aa-duration"))||.6,i=parseFloat(r.getAttribute("aa-distance"))||1,c=a.includes("-")&&parseInt(a.split("-").pop())||100;requestAnimationFrame(()=>{const e=window.scrollY;a.includes("change")&&n(r,e,c),a.includes("hide")&&e>50&&t.set(r,{y:-100*i+"%"})}),e.create({trigger:document.body,start:"top top",end:"bottom bottom",onUpdate:e=>{const l=e.direction,u=window.scrollY;var d,v,f;a.includes("hide")&&(1===l?t.to(r,{y:-100*i+"%",duration:2*o,ease:s,overwrite:!0}):(d=r,v=o,f=s,t.to(d,{y:"0%",duration:v,ease:f,overwrite:!0}))),a.includes("change")&&n(r,u,c)}})},initNavigationTracking:t=>{if(!t)return void console.warn("GSAP ScrollTrigger not available for navigation tracking");if(!r)return;const e=r.querySelectorAll("[aa-scroll-target]");if(0===e.length)return;const a=[];e.forEach(t=>{const e=t.getAttribute("aa-scroll-target"),r=document.querySelector(e);r&&a.push({navItem:t,section:r,id:e})}),0!==a.length&&a.forEach(({navItem:r,section:a,id:n})=>{t.create({trigger:a,start:"0% 50%",end:"100% 50%",invalidateOnRefresh:!0,onEnter:()=>{e.forEach(t=>{t.classList.remove("is-current")}),r.classList.add("is-current")},onEnterBack:()=>{e.forEach(t=>{t.classList.remove("is-current")}),r.classList.add("is-current")},onLeave:()=>{r.classList.remove("is-current")},onLeaveBack:()=>{r.classList.remove("is-current")}})})},initNavSectionClasses:t=>{if(!t)return void console.warn("GSAP ScrollTrigger not available for nav section classes");if(!r)return;const e=document.querySelectorAll("[aa-nav-section]");if(0===e.length)return;const a=[];e.forEach(e=>{const n=e.getAttribute("aa-nav-section");if(!n)return;a.push(n);const s=e.getAttribute("aa-scroll-start")||"top 0%",o=e.getAttribute("aa-scroll-end")||"bottom 0%";t.create({trigger:e,start:s,end:o,invalidateOnRefresh:!0,onEnter:()=>{a.forEach(t=>{r.classList.remove(t)}),r.classList.add(n)},onEnterBack:()=>{a.forEach(t=>{r.classList.remove(t)}),r.classList.add(n)},onLeave:()=>{r.classList.remove(n)},onLeaveBack:()=>{r.classList.remove(n)}})})},initCurrentIndicator:e=>{if(!e)return;if(!r)return;const a=r.querySelector("[aa-nav-current-indicator]");if(!a)return;const n=parseFloat(a.getAttribute("aa-duration"))||.4,i=a.getAttribute("aa-ease")||"power2.out",c=r.querySelectorAll("[aa-scroll-target]");if(0===c.length)return;let l=null;requestAnimationFrame(()=>{const s=o(r)||c[0];s&&(l=s,e.fit(a,s,{duration:0,absolute:!0,simple:!0}),t.delayedCall(n,()=>{t.set(a,{opacity:1})}))});const u=new MutationObserver(t=>{for(const r of t)if("attributes"===r.type){const t=r.target;if(t.classList.contains("is-current")){l=t,e.fit(a,t,s(n,i));break}}});c.forEach(t=>{u.observe(t,{attributes:!0,attributeFilter:["class"]})})},initHoverIndicator:e=>{if(!e)return;if("ontouchstart"in window||navigator.maxTouchPoints>0)return;if(!r)return;const a=r.querySelector("[aa-nav-hover-indicator]");if(!a)return;const n=parseFloat(a.getAttribute("aa-duration"))||.4,i=a.getAttribute("aa-ease")||"power2.out",c=r.querySelectorAll("[aa-scroll-target]");if(0===c.length)return;let l=null,u=!1;const d=(t,r=n)=>{t&&e.fit(a,t,s(r,i))};requestAnimationFrame(()=>{const s=o(r)||c[0];s&&(l=s,e.fit(a,s,{duration:0,absolute:!0,simple:!0}),t.delayedCall(n,()=>{t.set(a,{opacity:1})}))});const v=new MutationObserver(t=>{for(const e of t)if("attributes"===e.type){const t=e.target;if(t.classList.contains("is-current")){l=t,u||d(t);break}}});c.forEach(t=>{v.observe(t,{attributes:!0,attributeFilter:["class"]}),t.addEventListener("mouseenter",()=>{u=!0,d(t)})}),r.addEventListener("mouseleave",()=>{u=!1,l&&d(l)})}}}r.r(e),r.d(e,{createNavAnimations:()=>a})}}]);