Scroll Pin Steps — Free GSAP ScrollTrigger Steps Snippet

Scroll pin steps is the "how it works" pattern where a two-column panel sticks to the screen and its content — step number, heading, body, and visual — swaps from one step to the next as you scroll, with a progress bar tracking how far through you are. This snippet builds it with GSAP and ScrollTrigger (from a CDN), plus plain HTML and CSS.

Pin once, scroll through many steps

A single ScrollTrigger pins the panel with pin: true and runs for end: '+=300%' — three extra screens of scroll for four steps. During that pinned window, onUpdate reads self.progress (0 to 1) and maps it to a step index with Math.floor(progress × stepCount). So one pinned section presents the entire sequence without repeating markup for each step — the content is data, swapped in place.

Data-driven content

The steps live in a STEPS array of { num, head, body }. A show(i) function writes the active step's text into the panel and crossfades to the matching visual. Guarding with if (i === current) return means the swap only runs when the step actually changes, not on every scroll frame — important because onUpdate fires constantly while pinned.

Crossfading visuals and popping text

When the step changes, the visuals crossfade via opacity tweens (only the active one is shown), and the text elements pop in with a small fromTo rise-and-fade plus a stagger, using overwrite: true so rapid scrolling can't stack half-finished tweens. This gives each step a clean micro-transition instead of a hard text replacement.

The progress bar

Because onUpdate also has the continuous self.progress, the snippet sets a fill bar's width to progress × 100% every frame — a smooth, scrubbed indicator of position within the pinned section that's independent of the discrete step swaps. It gives the viewer a sense of "how much is left" while the steps tick over.

Discrete steps from a continuous scroll

The interesting part is mixing two readings of the same scroll: a continuous one for the progress bar, and a quantized one (floor) for which step is active. ScrollTrigger's single progress value drives both, so they stay perfectly in sync — the bar is exactly one-quarter full as step two begins, and so on.

Customizing it

Add steps to the array (and matching visuals) and bump the end accordingly, change the per-step transitions, swap emoji for real images or components, or flip the columns. Pair it with a scroll horizontal pin, a progress wizard, or scroll sticky stack.