Stop 14 · AnimationsTopics · 2/5

GSAP

In short

Those award-winning sites where things fly in as you scroll? Most use GSAP. It animates anything in the browser, with timelines that let you choreograph many moves exactly.

GreenSock Animation Platform — a powerful, framework-agnostic JavaScript animation library known for performance and fine-grained timeline control, often used for complex scroll-driven animations.

The jaadu claps a beat on stage while dancers strike matching poses in sequence.

Think of it like this

A Bollywood dance choreographer

The choreographer says: hero enters on beat one, dancers spin on beat three, everyone freezes on beat eight. A GSAP timeline is that plan. Each animation gets its place, and you can pause, rewind or speed up the whole routine.

Watch it happen

The hero timeline, beat by beat

Scroll

Trigger

Title

Cards

Cleanup

1/5The user scrolls down the page. ScrollTrigger watches the hero box.

The big ideas

What you need to know

to, from, fromTo

gsap.to animates to values, gsap.from animates from them, and fromTo sets both ends.

Timelines chain moves

gsap.timeline() plays animations in order. Position values like "-=0.2" overlap them for smoother flow.

ScrollTrigger ties it to scroll

This plugin starts, pauses or scrubs animations based on scroll position. Register it with gsap.registerPlugin.

useGSAP for React

The @gsap/react hook runs your animations and cleans them up when the component unmounts.

See it in code

Walk through the code

tsx

1"use client";2import { useRef } from "react";3import gsap from "gsap";4import { ScrollTrigger } from "gsap/ScrollTrigger";5import { useGSAP } from "@gsap/react";6gsap.registerPlugin(ScrollTrigger, useGSAP);7 8export function Hero() {9  const box = useRef<HTMLDivElement>(null);10  useGSAP(() => {11    const tl = gsap.timeline({ scrollTrigger: { trigger: box.current, start: "top 80%" } });12    tl.from(".title", { y: 40, opacity: 0, duration: 0.6 })13      .from(".card", { y: 30, opacity: 0, stagger: 0.15 }, "-=0.3");14  }, { scope: box });15  return <div ref={box}><h1 className="title">Fest 2026</h1><div className="card">Events</div></div>;16}

1/4Import GSAP, the ScrollTrigger plugin and the React hook, then register the plugins once.

scope limits the .title and .card selectors to this component. stagger makes each card start 0.15s after the one before.

Save yourself the pain

Common mistakes

Oops

Calling gsap.to inside a plain useEffect with no cleanup.

Do this instead

Use useGSAP. It reverts animations on unmount, which stops double animations in React Strict Mode.

Oops

Forgetting gsap.registerPlugin(ScrollTrigger).

Do this instead

Plugins must be registered once before use, or scrollTrigger options are silently ignored.

Your mission

A scroll story in three scenes

~45 min

Quick check

In a GSAP timeline, what does the "-=0.3" position value do?

Go deeper

1Build a simple timeline animating multiple elements in sequence.
2Try ScrollTrigger to animate elements as the user scrolls.
3Compare GSAP's imperative API to Framer Motion's declarative React API.