Simple GSAP text animation on scroll (2 ways)
This method uses GSAP to add a class to an element and the animation is in css.
GSAP:
gsap.registerPlugin(ScrollTrigger); function initTextAnimate() { gsap.utils.toArray(".anim-text-animate").forEach(function(section) { ScrollTrigger.create({ trigger: section, start: "top bottom-=100px", toggleClass: {targets: section, className: "animated-copy-element"} }); }); } window.addEventListener('load', function(){ initTextAnimate(); });
SCSS:
.anim-text-animate { transition: opacity .6s linear,transform .6s cubic-bezier(0.26,0.67,0.48,0.91); opacity: 0; transform: translateY(120px); } .anim-text-animate.animated-copy-element { opacity: 1; transform: translateY(0); }
This Second method uses GSAP only perhaps this route has a better fallback if the browser doesn’t allow javascript but performance maybe worse.
GSAP:
gsap.registerPlugin(ScrollTrigger); function initTextAnimateGSAP() { gsap.utils.toArray(".anim-text-animate-gsap").forEach(function(section) { gsap.from(section, { y: "120px", opacity: 0, ease: "none", scrollTrigger: { trigger: section, pin: false, scrub: 1.5, start: "top bottom", end: "top bottom-=200px", } }); }); } window.addEventListener('load', function(){ initTextAnimateGSAP(); });
With a duration not on scrub and reverse when leaving the screen
function initTextAnimateGSAP() { gsap.utils.toArray(".anim-text-animate-gsap").forEach(function(section) { gsap.from(section, { y: "120px", opacity: 0, ease: "power1.out", duration: 0.5, scrollTrigger: { trigger: section, pin: false, start: "top bottom-=100px", toggleActions: "play none none reverse", } }); }); }