alrdy-animate
Version:
A library to handle animations on scroll with GSAP integration.
1 lines • 2.14 kB
JavaScript
;(this.webpackChunkAlrdyAnimate=this.webpackChunkAlrdyAnimate||[]).push([[525],{687(e,t,r){function a(e,t,r,a,n){const o=n.includes("right"),i=n.includes("hover"),s=n.includes("paused"),l=n.includes("switch"),c=e.querySelector("[aa-marquee-scroller]"),u=e.querySelector("[aa-marquee-items]");if(!c||!u)return void console.warn("Marquee elements not found. Required: [aa-marquee-scroller] and [aa-marquee-items]");const d=window.innerWidth<479?.5:window.innerWidth<991?.75:1,m=parseInt(c.getAttribute("aa-marquee-scroller"))||0,p=r*(u.offsetWidth/window.innerWidth)*d,g=parseInt(u.getAttribute("aa-marquee-items"))||2,w=document.createDocumentFragment();for(let e=0;e<g;e++)w.appendChild(u.cloneNode(!0));c.appendChild(w);const f=e.querySelectorAll("[aa-marquee-items]"),h=o?-1:1;let q=h;if(!s){const r=t.to(f,{xPercent:-100,repeat:-1,duration:p,ease:"linear",force3D:!0,willChange:"transform"}).totalProgress(.5);if(t.set(f,{xPercent:o?-100:100,force3D:!0,willChange:"transform"}),r.play(),r.timeScale(q),e.classList.add("marquee-normal"),ScrollTrigger.create({trigger:e,start:"top bottom",end:"bottom top",onEnter:()=>{r.play(),r.timeScale(q)},onLeave:()=>r.pause(),onEnterBack:()=>{r.play(),r.timeScale(q)},onLeaveBack:()=>r.pause()}),l){let t=q;new MutationObserver(a=>{if(a.some(e=>"data-scroll-direction"===e.attributeName)){const a="up"===(document.body.getAttribute("data-scroll-direction")||"down"),n=a?-h:h;n!==t&&(t=n,q=n,r.timeScale(n)),e.classList.toggle("marquee-normal",!a),e.classList.toggle("marquee-inverted",a)}}).observe(document.body,{attributes:!0,attributeFilter:["data-scroll-direction"]})}i&&(e.addEventListener("mouseenter",()=>{t.to(r,{timeScale:.25*q,duration:.3,ease:"power2.out"})}),e.addEventListener("mouseleave",()=>{t.to(r,{timeScale:q,duration:.3,ease:"power2.out"})}))}if(m>0){c.style.marginLeft=`-${m}%`,c.style.width=2*m+100+"%";const r=o?-m:m;t.timeline({scrollTrigger:{trigger:e,start:"0% 100%",end:"100% 0%",scrub:a&&parseFloat(a)||!0}}).fromTo(c,{x:`${r}vw`},{x:-r+"vw",ease:"none"})}}function n(e,t){return{marquee:(t,r,n,o)=>a(t,e,r,n,o)}}r.r(t),r.d(t,{createMarqueeAnimations:()=>n})}}]);