gsap-dattebayo/dist/scroll.esm.min.js

The ultimate GSAP-powered scroll animation library - Simple as AOS, powerful as GSAP. Modern animations for 2025-2026 web trends.

/*!
 * GSAP Dattebayo v0.1.0-alpha.1
 * The ultimate GSAP-powered scroll animation library
 * https://github.com/serdjan/gsap-dattebayo
 *
 * Copyright 2025 GSAP Dattebayo
 * Released under the MIT License
 */
import t from"gsap";import e from"gsap/ScrollTrigger";import"gsap/SplitText";function r(t){return"string"==typeof t?Array.from(document.querySelectorAll(t)):t instanceof HTMLElement?[t]:t instanceof NodeList?Array.from(t):Array.isArray(t)?t:[]}function o(o,n={}){const{speed:s=.5,direction:i="vertical",scrub:a=!0,start:c="top bottom",end:d="bottom top",markers:g=!1}=n,p=r(o),l=[];return p.forEach(r=>{const o="vertical"===i?100*(s-1):0,n="horizontal"===i?100*(s-1):0,p=e.create({trigger:r,start:c,end:d,scrub:a,markers:g,onUpdate:e=>{t.to(r,{y:o*e.progress,x:n*e.progress,force3D:!0,overwrite:"auto"})}});l.push(p)}),l}function n(o,n={}){const{speed:s=1,scrub:i=1,markers:a=!1}=n,c=r(o),d=[];return c.forEach(r=>{t.to(r,{y:()=>-r.offsetHeight*(1-s),ease:"none",scrollTrigger:{trigger:r,start:"top bottom",end:"bottom top",scrub:i,markers:a,invalidateOnRefresh:!0}});const o=e.getById(r.dataset.scrollTriggerId||"");o&&d.push(o)}),d}function s(o,n={}){const{scrub:s=1,markers:i=!1}=n,a="string"==typeof o?document.querySelector(o):o;if(!a)return[];const c=r(a.querySelectorAll("[data-speed]")),d=[];return c.forEach(r=>{const o=parseFloat(r.dataset.speed||"1");t.to(r,{y:()=>-r.clientHeight*(1-o),ease:"none",scrollTrigger:{trigger:a,start:"top bottom",end:"bottom top",scrub:s,markers:i,invalidateOnRefresh:!0}});const n=e.getById(r.dataset.scrollTriggerId||"");n&&d.push(n)}),d}function i(o,n={}){const{speed:s=.5,scrub:i=1,markers:a=!1}=n,c=r(o),d=[];return c.forEach(r=>{t.set(r,{transformPerspective:1e3,transformStyle:"preserve-3d"}),t.to(r,{z:()=>200*(1-s),rotationX:()=>10*(1-s),ease:"none",scrollTrigger:{trigger:r,start:"top bottom",end:"bottom top",scrub:i,markers:a}});const o=e.getById(r.dataset.scrollTriggerId||"");o&&d.push(o)}),d}function a(o,n={}){const{speed:s=1,scrub:i=1,markers:a=!1}=n,c=r(o),d=[];return c.forEach(r=>{t.to(r,{rotation:()=>360*s,ease:"none",scrollTrigger:{trigger:r,start:"top bottom",end:"bottom top",scrub:i,markers:a}});const o=e.getById(r.dataset.scrollTriggerId||"");o&&d.push(o)}),d}function c(o,n={}){const{animation:s="fadeUp",duration:i=1,ease:a="power2.out",start:c="top 80%",end:d="bottom 20%",once:g=!1,markers:p=!1,distance:l=50,stagger:u=0}=n,f=r(o),m=[],h={fade:{opacity:0},fadeUp:{opacity:0,y:l},fadeDown:{opacity:0,y:-l},fadeLeft:{opacity:0,x:l},fadeRight:{opacity:0,x:-l},zoom:{opacity:0,scale:.5},slide:{x:-100}},b=h[s]||h.fadeUp;return f.forEach((r,o)=>{t.from(r,{...b,duration:i,ease:a,delay:o*u,scrollTrigger:{trigger:r,start:c,end:d,markers:p,once:g,toggleActions:g?"play none none none":"play none none reverse"}});const n=e.getById(r.dataset.scrollTriggerId||"");n&&m.push(n)}),m}function d(r,o={}){const{animation:n="fadeUp",duration:s=1,ease:i="power2.out",start:a="top 80%",stagger:c=.1,distance:d=50,once:g=!1}=o,p={fade:{opacity:0},fadeUp:{opacity:0,y:d},fadeDown:{opacity:0,y:-d},fadeLeft:{opacity:0,x:d},fadeRight:{opacity:0,x:-d},zoom:{opacity:0,scale:.5}},l=p[n]||p.fadeUp;return e.batch(r,{onEnter:e=>{t.from(e,{...l,duration:s,ease:i,stagger:c,overwrite:"auto"})},onLeaveBack:g?void 0:e=>{t.to(e,{...l,duration:.5*s,overwrite:"auto"})},start:a,once:g})}function g(t,r={}){const{start:o="top top",end:n="+=100%",pin:s=!0,scrub:i=!1,markers:a=!1}=r,c="string"==typeof t?document.querySelector(t):t;if(!c)throw new Error("Pin target not found");return e.create({trigger:c,start:o,end:n,pin:s,scrub:i,markers:a})}function p(e,o,n={}){const{start:s="top bottom",end:i="bottom top",scrub:a=1,markers:c=!1}=n,d=r(e),g=[];return d.forEach(e=>{const r=t.to(e,{...o,ease:"none",scrollTrigger:{trigger:e,start:s,end:i,scrub:a,markers:c}});g.push(r)}),g}function l(e,r={}){const{scrub:o=1,pin:n=!0,markers:s=!1}=r,i="string"==typeof e?document.querySelector(e):e;if(!i)throw new Error("Horizontal scroll container not found");const a=i.querySelectorAll("[data-scroll-section]"),c=Array.from(a).reduce((t,e)=>t+e.offsetWidth,0);return t.to(a,{xPercent:-100*(a.length-1),ease:"none",scrollTrigger:{trigger:i,pin:n,scrub:o,markers:s,end:()=>`+=${c}`,invalidateOnRefresh:!0}}).scrollTrigger}function u(e={}){const{direction:r="horizontal",thickness:o=4,color:n="#3b82f6",position:s="top"}=e,i=document.createElement("div");i.className="gsap-scroll-progress";const a="horizontal"===r;return Object.assign(i.style,{position:"fixed",[s]:"0",[a?"left":"top"]:"0",[a?"width":"height"]:"0%",[a?"height":"width"]:`${o}px`,backgroundColor:n,zIndex:"9999",transformOrigin:"0 0"}),document.body.appendChild(i),t.to(i,{[a?"width":"height"]:"100%",ease:"none",scrollTrigger:{trigger:document.body,start:"top top",end:"bottom bottom",scrub:!0}}),i}function f(e,r={}){const{direction:o="vertical",thickness:n=4,color:s="#3b82f6",position:i="left"}=r,a="string"==typeof e?document.querySelector(e):e;if(!a)throw new Error("Section progress target not found");const c=document.createElement("div");c.className="gsap-section-progress";const d="vertical"===o;return Object.assign(c.style,{position:"absolute",[i]:"0",[d?"top":"left"]:"0",[d?"height":"width"]:"0%",[d?"width":"height"]:`${n}px`,backgroundColor:s,transformOrigin:"0 0"}),a.style.position="relative",a.appendChild(c),t.to(c,{[d?"height":"width"]:"100%",ease:"none",scrollTrigger:{trigger:a,start:"top top",end:"bottom bottom",scrub:!0}}),c}function m(e={}){const{size:r=60,thickness:o=4,color:n="#3b82f6",position:s="bottom"}=e,i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("width",String(r)),i.setAttribute("height",String(r)),i.style.position="fixed",i.style[s]="20px",i.style.right="20px",i.style.zIndex="9999";const a=document.createElementNS("http://www.w3.org/2000/svg","circle"),c=(r-o)/2,d=2*Math.PI*c;return a.setAttribute("cx",String(r/2)),a.setAttribute("cy",String(r/2)),a.setAttribute("r",String(c)),a.setAttribute("fill","none"),a.setAttribute("stroke",n),a.setAttribute("stroke-width",String(o)),a.setAttribute("stroke-dasharray",String(d)),a.setAttribute("stroke-dashoffset",String(d)),a.setAttribute("transform",`rotate(-90 ${r/2} ${r/2})`),i.appendChild(a),document.body.appendChild(i),t.to(a,{strokeDashoffset:0,ease:"none",scrollTrigger:{trigger:document.body,start:"top top",end:"bottom bottom",scrub:!0}}),i}function h(t,r={}){const o="string"==typeof t?document.querySelector(t):t;if(!o)throw new Error("Scroll percentage target not found");return e.create({trigger:document.body,start:"top top",end:"bottom bottom",onUpdate:t=>{const e=Math.round(100*t.progress);o.textContent=`${e}%`}})}export{d as batchScrollReveal,m as circularProgress,l as horizontalScroll,o as parallax,i as parallax3D,s as parallaxLayers,a as parallaxRotate,n as parallaxSpeed,g as pinSection,h as scrollPercentage,u as scrollProgress,c as scrollReveal,p as scrubAnimation,f as sectionProgress};