Lesson 13 · ScrollTrigger

Scroll to
tell a story.

Scroll down to see four different ScrollTrigger patterns in action: stagger fade-in, parallax, pinned storytelling, and a progress counter.

Pattern 01 · Stagger Fade-In

Elements reveal
as you scroll past.

Six cards fade in from below with a 0.1s stagger when the grid enters the viewport at start: 'top 75%'.

Viewport trigger

Fires once when the element scrolls into view.

start: 'top 75%'

Trigger when top of element hits 75% from viewport top.

stagger: 0.1

Each card starts 0.1s after the previous one.

ease: power2.out

Decelerates into final position for a natural feel.

Once only

No toggleActions means it plays once and stays.

Batch-select

One gsap.from() call targets all matching elements.

Pattern 02 · Parallax

The heading drifts upward at y: -80 tied to scroll via scrub: 1. Scrolling up reverses it.

Pattern 03 · Pinned Story

1 / 3

The section stays fixed on screen while you scroll. Scroll distance becomes animation progress.

2 / 3

Three panels fade in and out in sequence. The timeline is driven entirely by scroll position.

3 / 3

One GSAP timeline with pin: true and scrub: 1 handles all of this.

Pattern 04 · onUpdate Counter

The number below reads self.progress inside onUpdate and reflects it as a percentage.

Keep scrolling ↓