Scroll Text Clip Reveal — Free GSAP Word Highlight Snippet

The scroll text reveal is the editorial effect where a big statement is dim until you scroll, then its words light up one after another as the section holds in place — the "read along with the scroll" technique from agency and storytelling sites. This snippet builds it with GSAP and ScrollTrigger (from a CDN), plus plain HTML and CSS.

Splitting into words

On load the script reads the heading's text, splits it on whitespace, and rebuilds it as a sequence of <span class="tc-word"> elements. Wrapping each word in its own inline-block span is what lets every word be animated independently — you can't target individual words inside a plain text node. The split is done in JavaScript so the markup stays clean and the effect works on any sentence you drop in.

Staggered scrub

A single gsap.to animates all the word spans from a dim grey to white, but with stagger: { each: 1 } so they don't all change at once — each word's tween is offset along the timeline. Tying that timeline to a ScrollTrigger with scrub: true means the stagger plays out across the scroll distance: as you scroll, the "bright" boundary sweeps word by word through the sentence, and scrolling back dims them again in reverse.

Pinning to hold the sentence

The stage pins with pin: true so the heading stays centered while the words reveal, giving the reader time to take in the line rather than it flying past. The end is computed from the word count (words.length × 60 + 400), so longer sentences get a proportionally longer scroll window — the reveal pace stays consistent regardless of how much text you use.

Color, not clip, for crispness

Animating each word's color from a muted tone to white (rather than masking) keeps the text perfectly crisp at every step and is cheap for the browser, since only paint changes. ease: 'none' keeps each word's transition linear so the sweep feels mechanically tied to the scrollbar. The dim resting color still leaves the words faintly legible, hinting at the full sentence before it's revealed.

Why ScrollTrigger

Doing this by hand means measuring scroll, mapping it to a per-word progress, and handling reverse and resize — exactly the bookkeeping ScrollTrigger's scrub and pin remove. GSAP's stagger turns "reveal N words in sequence" into one declarative tween, so the snippet stays short.

Customizing it

Change the dim and bright colors, the per-word stagger spacing, or the scroll length; reveal by opacity or a vertical rise instead of color; or split by character for a finer sweep. Pair it with a text reveal scroll, a split text entrance, or a scroll image mask.