03 / Scroll-driven

Pinning & Scrub

The picture holds still while the page keeps moving, and your scrolling becomes the playhead. Scroll back up and it plays backwards.

also called sticky section · pinned stage · ScrollTrigger pin + scrub

Pin holds the stage still while the page keeps scrolling. Scrub is the separate idea that progress follows scroll position rather than elapsed time, which is why it reverses exactly. Most “cinematic” sites are these two words.

How it is built

position: sticky; top: 0; /* GSAP */ ScrollTrigger({ pin: true, scrub: 1 })

Exhibit 01 · Annie G.