gsap-dattebayo/dist/scroll.umd.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
 */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("gsap"),require("gsap/ScrollTrigger"),require("gsap/SplitText")):"function"==typeof define&&define.amd?define(["exports","gsap","gsap/ScrollTrigger","gsap/SplitText"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).GSAPDattebayo={},t.gsap,t.ScrollTrigger)}(this,function(t,e,r){"use strict";function o(t){return"string"==typeof t?Array.from(document.querySelectorAll(t)):t instanceof HTMLElement?[t]:t instanceof NodeList?Array.from(t):Array.isArray(t)?t:[]}t.batchScrollReveal=function(t,o={}){const{animation:n="fadeUp",duration:s=1,ease:a="power2.out",start:i="top 80%",stagger:c=.1,distance:l=50,once:g=!1}=o,d={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}},p=d[n]||d.fadeUp;return r.batch(t,{onEnter:t=>{e.from(t,{...p,duration:s,ease:a,stagger:c,overwrite:"auto"})},onLeaveBack:g?void 0:t=>{e.to(t,{...p,duration:.5*s,overwrite:"auto"})},start:i,once:g})},t.circularProgress=function(t={}){const{size:r=60,thickness:o=4,color:n="#3b82f6",position:s="bottom"}=t,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[s]="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",n),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),e.to(i,{strokeDashoffset:0,ease:"none",scrollTrigger:{trigger:document.body,start:"top top",end:"bottom bottom",scrub:!0}}),a},t.horizontalScroll=function(t,r={}){const{scrub:o=1,pin:n=!0,markers:s=!1}=r,a="string"==typeof t?document.querySelector(t):t;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 e.to(i,{xPercent:-100*(i.length-1),ease:"none",scrollTrigger:{trigger:a,pin:n,scrub:o,markers:s,end:()=>`+=${c}`,invalidateOnRefresh:!0}}).scrollTrigger},t.parallax=function(t,n={}){const{speed:s=.5,direction:a="vertical",scrub:i=!0,start:c="top bottom",end:l="bottom top",markers:g=!1}=n,d=o(t),p=[];return d.forEach(t=>{const o="vertical"===a?100*(s-1):0,n="horizontal"===a?100*(s-1):0,d=r.create({trigger:t,start:c,end:l,scrub:i,markers:g,onUpdate:r=>{e.to(t,{y:o*r.progress,x:n*r.progress,force3D:!0,overwrite:"auto"})}});p.push(d)}),p},t.parallax3D=function(t,n={}){const{speed:s=.5,scrub:a=1,markers:i=!1}=n,c=o(t),l=[];return c.forEach(t=>{e.set(t,{transformPerspective:1e3,transformStyle:"preserve-3d"}),e.to(t,{z:()=>200*(1-s),rotationX:()=>10*(1-s),ease:"none",scrollTrigger:{trigger:t,start:"top bottom",end:"bottom top",scrub:a,markers:i}});const o=r.getById(t.dataset.scrollTriggerId||"");o&&l.push(o)}),l},t.parallaxLayers=function(t,n={}){const{scrub:s=1,markers:a=!1}=n,i="string"==typeof t?document.querySelector(t):t;if(!i)return[];const c=o(i.querySelectorAll("[data-speed]")),l=[];return c.forEach(t=>{const o=parseFloat(t.dataset.speed||"1");e.to(t,{y:()=>-t.clientHeight*(1-o),ease:"none",scrollTrigger:{trigger:i,start:"top bottom",end:"bottom top",scrub:s,markers:a,invalidateOnRefresh:!0}});const n=r.getById(t.dataset.scrollTriggerId||"");n&&l.push(n)}),l},t.parallaxRotate=function(t,n={}){const{speed:s=1,scrub:a=1,markers:i=!1}=n,c=o(t),l=[];return c.forEach(t=>{e.to(t,{rotation:()=>360*s,ease:"none",scrollTrigger:{trigger:t,start:"top bottom",end:"bottom top",scrub:a,markers:i}});const o=r.getById(t.dataset.scrollTriggerId||"");o&&l.push(o)}),l},t.parallaxSpeed=function(t,n={}){const{speed:s=1,scrub:a=1,markers:i=!1}=n,c=o(t),l=[];return c.forEach(t=>{e.to(t,{y:()=>-t.offsetHeight*(1-s),ease:"none",scrollTrigger:{trigger:t,start:"top bottom",end:"bottom top",scrub:a,markers:i,invalidateOnRefresh:!0}});const o=r.getById(t.dataset.scrollTriggerId||"");o&&l.push(o)}),l},t.pinSection=function(t,e={}){const{start:o="top top",end:n="+=100%",pin:s=!0,scrub:a=!1,markers:i=!1}=e,c="string"==typeof t?document.querySelector(t):t;if(!c)throw new Error("Pin target not found");return r.create({trigger:c,start:o,end:n,pin:s,scrub:a,markers:i})},t.scrollPercentage=function(t,e={}){const o="string"==typeof t?document.querySelector(t):t;if(!o)throw new Error("Scroll percentage target not found");return r.create({trigger:document.body,start:"top top",end:"bottom bottom",onUpdate:t=>{const e=Math.round(100*t.progress);o.textContent=`${e}%`}})},t.scrollProgress=function(t={}){const{direction:r="horizontal",thickness:o=4,color:n="#3b82f6",position:s="top"}=t,a=document.createElement("div");a.className="gsap-scroll-progress";const i="horizontal"===r;return Object.assign(a.style,{position:"fixed",[s]:"0",[i?"left":"top"]:"0",[i?"width":"height"]:"0%",[i?"height":"width"]:`${o}px`,backgroundColor:n,zIndex:"9999",transformOrigin:"0 0"}),document.body.appendChild(a),e.to(a,{[i?"width":"height"]:"100%",ease:"none",scrollTrigger:{trigger:document.body,start:"top top",end:"bottom bottom",scrub:!0}}),a},t.scrollReveal=function(t,n={}){const{animation:s="fadeUp",duration:a=1,ease:i="power2.out",start:c="top 80%",end:l="bottom 20%",once:g=!1,markers:d=!1,distance:p=50,stagger:u=0}=n,f=o(t),m=[],h={fade:{opacity:0},fadeUp:{opacity:0,y:p},fadeDown:{opacity:0,y:-p},fadeLeft:{opacity:0,x:p},fadeRight:{opacity:0,x:-p},zoom:{opacity:0,scale:.5},slide:{x:-100}},b=h[s]||h.fadeUp;return f.forEach((t,o)=>{e.from(t,{...b,duration:a,ease:i,delay:o*u,scrollTrigger:{trigger:t,start:c,end:l,markers:d,once:g,toggleActions:g?"play none none none":"play none none reverse"}});const n=r.getById(t.dataset.scrollTriggerId||"");n&&m.push(n)}),m},t.scrubAnimation=function(t,r,n={}){const{start:s="top bottom",end:a="bottom top",scrub:i=1,markers:c=!1}=n,l=o(t),g=[];return l.forEach(t=>{const o=e.to(t,{...r,ease:"none",scrollTrigger:{trigger:t,start:s,end:a,scrub:i,markers:c}});g.push(o)}),g},t.sectionProgress=function(t,r={}){const{direction:o="vertical",thickness:n=4,color:s="#3b82f6",position:a="left"}=r,i="string"==typeof t?document.querySelector(t):t;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"]:`${n}px`,backgroundColor:s,transformOrigin:"0 0"}),i.style.position="relative",i.appendChild(c),e.to(c,{[l?"height":"width"]:"100%",ease:"none",scrollTrigger:{trigger:i,start:"top top",end:"bottom bottom",scrub:!0}}),c}});