Text Reveal on Scroll — Free HTML CSS JS Word Snippet

Text reveal on scroll is the editorial effect where a paragraph sits dim and, as you scroll, its words light up from gray to white one after another — so reading and scrolling become the same motion. This snippet builds it with plain HTML, CSS, and a compact vanilla JavaScript scroll handler tied to a pinned section.

Splitting the paragraph into words

On load, JavaScript splits the paragraph on whitespace and wraps each word in a .tr-word span, starting them all in a muted gray. Wrapping words individually is what lets them brighten one at a time — you cannot transition part of a text node — and rejoining with spaces preserves natural wrapping. Each word transitions its color over a quarter second, so lighting one is a smooth fade rather than a snap.

Pinning the text while it reveals

The section is taller than the viewport (160vh) and the paragraph is position: sticky, so it pins near the middle of the screen and stays there while you scroll through the section's extra height. That pinned window is what gives the reveal room to happen: the text holds still and the words light up as you scroll past, rather than the text scrolling away mid-reveal. This sticky-in-a-tall-section pattern is the backbone of most scroll-linked effects.

Mapping scroll to lit words

Each frame, update() computes a 0–1 progress from how far the section has scrolled through its range (-sectionTop / (height - viewport)). It then lights the first progress * wordCount words by toggling the .lit class. A small lead factor (* 1.08) lights words slightly ahead of the exact progress point, which makes the reveal feel responsive and ensures the last words finish lighting before you scroll out. Because it is a class toggle driven by progress, scrolling back up dims the words again — the effect is fully reversible.

Efficient scroll handling

The scroll listener is { passive: true } and throttled with requestAnimationFrame behind a ticking flag, so the measurement and the class updates run at most once per frame no matter how many scroll events fire. A resize listener re-runs it since the progress math depends on viewport height. Toggling classes is cheap, and only the words whose state actually changes trigger a style recalc.

Why progress-based, not per-word observers

You could use an IntersectionObserver per word, but tying the whole paragraph to a single scroll-progress value is simpler and gives precise, reversible control — you always know exactly how many words should be lit for any scroll position, and there is one calculation instead of dozens of observer callbacks.

Customizing it

Change the dim and lit colors (or fade other properties like opacity or blur), adjust the section height to slow or speed the reveal, tune the lead factor, or reveal by letter instead of word. Pair it with a text generate headline above or stacking scroll cards below for a scroll-driven story.