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",
          }
        });  
	});	
}

Search the site

Newsletter

Subscribe to get regular news and updates

  • This field is for validation purposes and should be left unchanged.