GSAP ScrollTrigger: Animations Tied to Scroll Position

Triggering animations as the user scrolls to specific elements requires manual IntersectionObserver setup or scroll event listeners with performance pitfalls.

Use the GSAP ScrollTrigger plugin. Register it once, then attach it to any tween or timeline via the scrollTrigger option.

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// Animate on enter
gsap.from('.section', {
  opacity: 0,
  y: 60,
  duration: 0.8,
  scrollTrigger: {
    trigger: '.section',
    start: 'top 80%',
    end: 'bottom 20%',
    toggleActions: 'play none none reverse',
  },
});

// Scrub: animation progress tied 1:1 to scroll position
gsap.to('.parallax', {
  y: -100,
  scrollTrigger: {
    trigger: '.parallax',
    start: 'top bottom',
    end: 'bottom top',
    scrub: 1,
  },
});

ScrollTrigger handles all the IntersectionObserver and scroll listener boilerplate, normalizes mobile and desktop scroll behavior, and integrates directly with GSAP's animation engine for scrub animations.