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