Introduction

GSAP (GreenSock Animation Platform) is the industry standard for high-performance web animations. This post covers how I architect scroll-driven experiences using ScrollTrigger and React.

---

Why GSAP Over CSS Animations

CSS animations are great for simple transitions, but they fall short when:

• You need precise scrub-based control tied to scroll position
• Animations must sequence across multiple elements with fine timing
• You need to reverse or pause mid-animation based on user interaction

GSAP gives you a JavaScript-native timeline that integrates cleanly with React via @gsap/react.

---

Setting Up ScrollTrigger in React

The key is using useGSAP from the official React package, which handles cleanup automatically.

import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const HeroSection = () => {
  useGSAP(() => {
    gsap.from(".hero-title", {
      y: 60,
      opacity: 0,
      duration: 1.2,
      ease: "power3.out",
      scrollTrigger: {
        trigger: ".hero-title",
        start: "top 80%",
      },
    });
  });

  return <h1 className="hero-title">Hello World</h1>;
};

---

Scrub-Based Parallax

For cinematic parallax, scrub: true binds animation progress directly to scroll position.

gsap.to(".bg-layer", {
  yPercent: -30,
  ease: "none",
  scrollTrigger: {
    trigger: ".section",
    start: "top bottom",
    end: "bottom top",
    scrub: true,
  },
});

scrub: 1 adds a 1-second lag, making motion feel weighty and physical rather than mechanical.

---

Performance Considerations

• Always animate transform and opacity — never top, left, or margin
• Use will-change: transform sparingly on elements that animate on scroll
• Batch ScrollTrigger.refresh() calls after layout changes
• Kill triggers in cleanup to prevent memory leaks — useGSAP handles this automatically

---

Conclusion

GSAP gives you the control to build scroll experiences that feel native and polished. The React integration is first-class, and the performance headroom is substantial compared to alternatives.