How to make a text reveal on scroll with GSAP

The technique in three decisions

What to split. Lines are the most readable choice for paragraphs: the text arrives as it will be read and nothing jumps around once it settles. Words suit short statements that you want to light up as the reader moves through them. Characters only work for short display headlines; on a paragraph they turn into noise and slow the page down.

How to hide it. The classic look is a mask: each line is wrapped in an element with overflow: clip, and the line itself starts pushed down by its own height, so it sits just below the visible slot. Animating it back to zero makes the text rise out of nowhere. Opacity, blur or a skew can be layered on top, but the mask is what gives the clean editorial feel.

When it plays. A triggered reveal fires once when the block crosses a point in the viewport and then stays put. A scrubbed reveal maps the scroll position to the animation progress, so it moves backwards when the reader scrolls up. Triggered reveals are calmer and better for long reading pages; scrubbed ones work for a single statement in a pinned section.

A minimal version

This is the smallest reliable version of a masked line reveal. It waits for the web fonts, splits each element marked with data-reveal into masked lines and lets SplitText rebuild the split when the width changes.

import gsap from "gsap";
import { SplitText } from "gsap/SplitText";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(SplitText, ScrollTrigger);

document.fonts.ready.then(() => {
  document.querySelectorAll("[data-reveal]").forEach((el) => {
    SplitText.create(el, {
      type: "lines",
      mask: "lines",
      autoSplit: true,
      onSplit: (self) =>
        gsap.from(self.lines, {
          yPercent: 100,
          duration: 0.9,
          stagger: 0.08,
          ease: "power4.out",
          scrollTrigger: { trigger: el, start: "top 80%", once: true },
        }),
    });
  });
});

Returning the tween from onSplit matters: when the layout changes and the text is split again, SplitText reverts the old animation and starts the new one from the same point, so the masks never cut through the middle of a word. To scrub the reveal instead, drop once and add scrub: true with an end value, and split by words if the block is a single sentence.

Add one line of CSS so the text is not visible for a frame before the script runs: give [data-reveal] visibility: hidden and set it back to visible as the first step of onSplit.

Where it gets hard

Fonts. Lines are measured when the text is split. If the fallback font is still showing, the line breaks land in different places and the real font then overflows the masks. Waiting for document.fonts.ready fixes most cases; for a font that loads late on purpose, split after that specific face has loaded.

Resizing. Every width change can move the line breaks. Without autoSplit, a reveal that looked perfect on a laptop leaves broken masks after rotating a phone. If you build the split yourself, debounce the resize, revert the split, split again and recreate the trigger.

Smooth scrolling. With Lenis or another smooth scroller, ScrollTrigger has to read the same scroll position the page is showing. Connect them once at start up by calling ScrollTrigger.update from the scroller's scroll event, or the triggers fire late and the reveal looks out of sync.

Layout details. Split lines inherit text indentation, letter spacing and inline styles, and some of them do not survive the split. A first line indent ends up on every line, and inline links can break across two masks. Check the split on the real copy, not on placeholder text.

Accessibility. A screen reader should hear the sentence, not twenty separate fragments. SplitText adds an aria-label with the full text to the parent and hides the pieces from assistive technology by default; keep that behavior. Respect prefers-reduced-motion with a branch that shows the copy immediately, and never leave important text hidden until a scroll event that might not arrive.

Performance

Animate transform and opacity only, and the reveal costs almost nothing even on modest phones. What gets expensive is the number of elements: splitting a long article into characters creates thousands of nodes. Split by lines for body copy, keep characters for headlines, and use once: true so finished triggers stop listening.