What is a scroll text reveal?

Words that were hidden come to rest as the section enters the viewport.

Should I reveal by letter or by word?

Word, unless the word itself is the joke. Letters cost more and read slower.

Does this work on mobile?

Yes, if you trigger from scroll position, not from hover.

What if the user prefers less motion?

Show the finished line. Do not invent a smaller flourish.

Can I put this on body copy?

You can. You should not. Body copy is for reading.

Text reveal

A text reveal shows a line as you scroll, one word or one block at a time.

TextBuild difficulty: MediumSplitText

Also called Scroll text reveal, Split text reveal, Line mask reveal.

Here it is working.

Motion earns its place

Words arrive one after another. Play again to watch it twice.

For designers

The line is already there. Motion only decides when you get to read it. If the sentence cannot stand still, do not animate it.

Use this when

The heading is the one thing you want people to finish reading.
A short line sits on a quiet section and can wait for the scroll.
You can name the moment: first screen, start of a chapter, the line under a product shot.

Reach for something else when

You need every letter to pop. Use Character appear or Popping text.
You want the letters to change, not just arrive. Use Text scramble or Typewriter.
The block is a paragraph. A reveal on a paragraph is homework.

How to build it

Split the line into words. Hide them just below the mask, or drop the opacity to 0. On scroll, ease them to rest, in order. Keep the duration short. If someone has asked the browser to reduce motion, show the line at rest.

Official GSAP

SplitText + ScrollTrigger.

const split = SplitText.create('.title', { type: 'words' });
gsap.from(split.words, {
  autoAlpha: 0, y: 16, stagger: 0.06, duration: 0.7,
  scrollTrigger: { trigger: '.title', start: 'top 80%' },
});

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

What is a scroll text reveal?: Words that were hidden come to rest as the section enters the viewport.
Should I reveal by letter or by word?: Word, unless the word itself is the joke. Letters cost more and read slower.
Does this work on mobile?: Yes, if you trigger from scroll position, not from hover.
What if the user prefers less motion?: Show the finished line. Do not invent a smaller flourish.
Can I put this on body copy?: You can. You should not. Body copy is for reading.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Text scramble