Design practice

GSAP Scroll Animation

Build a scroll-triggered animation sequence with GSAP ScrollTrigger and staggered reveals

Start the exercise

01 / Prepare

What you’ll
work on.

Build a scroll-triggered animation sequence for a content-heavy page using GSAP and ScrollTrigger. Practice timeline composition, staggered reveals, scrub-linked animation, and performance-conscious implementation.

Before you begin

  • Basic JavaScript/TypeScript
  • HTML/CSS fundamentals
  • GSAP installed (npm install gsap)
  • Basic experience with JavaScript and CSS animation

02 / Practice

The work,
step by step.

Work through these 5 parts at your own pace. Keep your notes and work together so you can review them when you finish.

  1. Setup

    30 min

    1. Create a simple page with 5–6 content sections (hero, features grid, testimonial, stats, CTA)

    2. Install GSAP and register ScrollTrigger

      gsap.registerPlugin(ScrollTrigger)

    3. Verify the basic setup works: a simple fade-in on scroll

  2. Section Reveals

    45 min

    1. Hero: Fade in + slight upward translate on page load (not scroll-triggered)

    2. Features grid: Staggered reveal — each card fades in sequentially

      stagger: 0.1

    3. Testimonial: Slide in from the left with a slight overshoot (follow-through principle)

    4. Stats section: Counter animation — numbers count up as the section enters the viewport

  3. Scrub Animation

    45 min

    1. Create one section with scrub: true — animation progress is linked to scroll position

    2. Example: a horizontal gallery that moves as the user scrolls vertically

    3. Pin the section while the scrub animation plays

      pin: true

  4. Timeline Composition

    45 min

    1. Create a GSAP timeline for one complex section (e.g., the hero): background color shifts, heading reveals word-by-word, subtext fades in after heading completes, CTA button scales up with a spring ease

    2. Use timeline.add() to sequence and overlap animations

  5. Performance and Accessibility

    30 min

    1. Only animate transform and opacity (compositor-only properties)

    2. Add will-change: transform where appropriate

    3. Implement prefers-reduced-motion

      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (prefersReducedMotion) {
  // Skip animations, show content immediately
}

    4. Test in Chrome DevTools Performance panel — verify no layout thrashing

03 / Review

Look at what
you’ve made.

Gather your deliverables, then use the criteria to find what worked and what you would change. They also give a peer something specific to respond to.

What to bring together

  • Working page with 5–6 scroll-animated sections
  • At least one stagger animation
  • At least one scrub-linked animation with pin
  • One composed timeline with sequenced elements
  • prefers-reduced-motion handling
  • No layout-triggering properties animated (no width, height, top, left)

How to assess your work

Animation quality
Smooth, purposeful motion that enhances rather than distracts
ScrollTrigger usage
Correct trigger points, appropriate scrub and pin behavior
Timeline composition
Sequenced elements with intentional timing and overlap
Performance
Compositor-only properties, no jank at 60fps
Accessibility
Reduced motion handled gracefully

Choose your
next exercise.

Browse all exercises