Line-by-Line Text Reveal

How it works

A quiet, editorial one-page site where every piece of text arrives the same way: line by line, rising out of an invisible slot. The hero headline lifts in a moment after the page loads; after that, each label, headline and paragraph waits until it has scrolled most of the way into view, then its lines slide up one after another and stay put.

It is built with GSAP, its SplitText and ScrollTrigger plugins, and Lenis for smooth scrolling. The point of the component is less the animation itself than the small system around it, which makes the reveal reusable on any block of text.

An attribute-driven reveal system

Instead of writing an animation per element, any element on the page can opt in with a data attribute. Other attributes adjust it: a delay for the hero, a switch to play on load rather than on scroll, and a wrapper mode for containers whose children should be split individually but animated as one sequence. That last mode is what lets three paragraphs, or a column of footer links, cascade as a single continuous column instead of starting three separate animations at once. Adding the effect to new copy is a matter of markup, with no new JavaScript.

What happens to each block

When a block is set up, SplitText breaks it into visual lines and wraps each line in a clipping mask. Every line is moved down by its own height, so it sits just below its mask and cannot be seen. A ScrollTrigger watches the block, and when its top reaches a point well inside the viewport, a single tween moves all its lines back up with a short stagger and a strong ease-out: a fast start and a long, soft landing. The trigger fires once, so scrolling back up never hides the text again.

Where it gets hard

Line splitting is only correct once the real font has loaded, because a fallback font breaks lines in different places. The whole system therefore waits for the fonts before splitting anything, while a CSS rule keeps the lines hidden in the meantime so there is no flash of text that then disappears.

The other subtlety is indentation. Two of the large headlines use a first-line indent, a classic editorial detail. Once the text is split into lines, every line would inherit that indent, so the system reads the indent before splitting, applies it only to the first line as padding and removes it from the block.

Performance, mobile and accessibility

Only transforms are animated, and each block animates once, so it is light on any device. The layout adapts below tablet width with smaller type and stacked columns, and the reveal itself runs unchanged on phones. Because the text is hidden until it is revealed, it is worth adding a reduced-motion branch that skips the movement and shows the copy immediately, and making sure screen readers receive whole sentences rather than fragments.