Scroll Letter Stagger — Free GSAP Split Text Snippet

The scroll letter stagger is the split-text entrance — each character rising from below its line, straightening as it lands — but scrubbed to the scrollbar instead of played on a timer: letters ride up exactly as far as you've scrolled, and retreat in reverse order when you scroll back. This snippet builds it with GSAP ScrollTrigger (from a CDN), a hand-rolled character splitter, and masked line boxes — no SplitText plugin.

A twelve-line splitter instead of a plugin

Each headline stores its copy in data-text; a small function converts it into inline-block <span class="ch"> elements, mapping spaces to \u00A0 so they keep width. Inline-block is the load-bearing detail — plain inline spans ignore transforms, so every character must become a box before yPercent or rotation can touch it. Reading from an attribute (not innerHTML) also makes the split idempotent: re-running it can't nest spans inside spans.

yPercent + overflow: hidden = the masked rise

Characters start at yPercent: 120 — 120% of *their own height* below their resting spot — while each line has overflow: hidden. The line box acts as a mask: letters are genuinely invisible until they cross their baseline, rising as if from behind a sill. Using yPercent instead of a pixel offset means the hide distance self-scales with the clamped responsive font size, and a small padding-bottom on the line keeps descenders (y, g) from being clipped at rest.

Rotation gives the rise its physicality

Each character also un-rotates from 9° (line one) or −9° (line two) as it lands. Straight vertical rises read as blinds; adding a settling rotation makes letters feel individually *placed*, and mirroring the angle between lines makes the two lines visually answer each other.

Stagger order becomes spatial order under scrub

stagger: 0.05 offsets each character's tween along the timeline, and because the timeline is scrubbed, temporal offset becomes spatial: at any scroll position the left letters are further through their arc than the right ones, producing a wave that sweeps across the word. Scrolling up runs the wave backward — last letter retreats first — for free.

Three beats on one timeline

Line one starts at 0, line two overlaps at 0.35 (starting while line one's tail is still landing, so the headline reads as one gesture), and the gradient rule draws from 0 width at 1.1 — a sign-off that only completes once the type has fully landed. The rule animates width deliberately: it's a single tiny element, so the layout cost is nil and it avoids a scale-x's stretched-gradient artifact.

Gradient text survives the split

The second line's gradient uses background-clip: text applied to the *characters*, so each span carries its slice of the gradient. Applying it to the parent wouldn't survive the split, since transformed inline-blocks establish their own paint containers.

Customizing it

Edit the data-text attributes (the splitter adapts), flip the wave direction with stagger: { each: 0.05, from: 'end' }, or add a third line at a later position. Related type effects: word-level text reveal on scroll, the timer-based split text, scrubbed typing in scroll typewriter, and self-drawing outlines in scroll text draw.