Mastering GSAP ScrollTrigger

The Magic of ScrollTrigger

ScrollTrigger has revolutionized how we build scroll-based animations. Instead of relying on complex scroll event listeners, GSAP handles all the performance optimizations under the hood.

Setting up your first timeline

The key to a great scroll animation is tying it to a timeline. This allows you to scrub through the animation smoothly as the user scrolls down the page.

gsap.registerPlugin(ScrollTrigger);

gsap.to(".box", {
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    scrub: true
  },
  x: 500,
  rotation: 360
});

By using scrub: true, the animation becomes perfectly synced with the scroll bar, creating a truly immersive experience.