Scroll Word Wheel — Free GSAP Headline Snippet

The scroll word wheel is the "Built for designers / founders / marketers…" headline — but instead of auto-rotating on a timer, the wheel is turned by the scrollbar. Each segment of scroll snaps the masked word column one notch to the next word, and scrolling up spins it back. Giving the rotation to the reader turns a passive header into a scrubbed reveal of who the product serves. This snippet builds it with GSAP ScrollTrigger (from a CDN) and a masked column.

A one-line-tall mask hides all but the current word

The wheel is an inline-block .sww-wheel sized to exactly 1.24em tall with overflow: hidden — a viewport one line high. Inside it, the word list is a flex column where every <em> occupies that same 1.24em. Only one word can be visible at a time; the rest wait above or below the mask. Sizing in em keeps the mask correct at every clamp() font size without any JS measurement.

yPercent moves in exact word-height notches

Each notch tweens the list to yPercent: -(100 / COUNT) × i. Because yPercent is relative to the *list's* own height, and each word is exactly 1/COUNT of that height, every step lands pixel-perfectly on the next word — no hardcoded pixel offsets to break when the font size changes responsively.

Hold-then-snap pacing instead of continuous slide

Rather than one linear tween (which would show word edges scrolling constantly), the timeline places a short 0.35-duration power2.inOut tween just before each integer position: the wheel *holds* on a word for most of its segment, then snaps decisively to the next. Under a scrub, that means each word gets real reading time and transitions feel mechanical-in-a-good-way, like a slot drum clicking between detents. The pacing lives entirely in the position/duration math — i − 0.35 — so retuning the dwell time is one number.

Baseline alignment keeps the sentence intact

The static "Built for" and the wheel sit in a flex row aligned to baseline, and the wheel uses vertical-align: bottom so the moving words share the sentence's baseline. Word-wheel implementations commonly float half a pixel off the line; locking heights and line-heights to the same 1.24em is what keeps every word sitting exactly where static text would.

Gradient fades sell the drum

Two thin pseudo-element gradients at the mask's top and bottom fade incoming and outgoing words into the background, suggesting a curved drum edge — a purely decorative touch that reads as depth without any 3D transforms.

Scroll distance scales with the word count

end is COUNT × 55%, so each word owns the same scroll budget however many you add; the notch loop derives everything else from COUNT. Add a sixth word by adding one <em> — no other edits.

Per-word color via a custom property

Each word carries its own --wc accent, so the highlight color changes with the audience being named — a small cue that each notch is a distinct claim.

Customizing it

Edit the words (keep them short enough for your narrowest viewport), tune the dwell via the 0.35 constants, or drop the pin and trigger it inside a hero. For the timer-based version see the word flip hero; pair with a scroll typewriter or hand off to a scroll letter stagger headline.