When do I split by word instead?

Most of the time. Character splits are for short marks, logotypes, and lines where a single glyph is the point.

How slow is too slow?

If the last letter lands after about 1 second, people have started reading something else.

Does it have to wait for scroll?

If the line is in view on load, play it then. If it sits lower, wait until it enters.

What about emoji and accents?

Split after the font is ready, and test the real string.

What does reduced motion do?

Show the finished word. No stagger, no slide.

Character appear

Character appear brings each letter onto the page on its own, on a stagger, so the word assembles rather than arriving as a block.

TextBuild difficulty: EasySplitText

Also called Letter reveal, Char stagger, Glyph appear, Per letter fade.

Here it is working.

Motion

Letters appear in order. Play again to watch it twice.

For designers

This is Text reveal with more pieces and more waiting. A short mark can take it. A product heading of 8 words will feel busy, and a paragraph will feel like homework. If you cannot name why each letter needs its own entrance, split by words instead. Travel plus fade is enough. Scale belongs on Popping text. Shuffle belongs on Text scramble. Reduced motion shows the finished line and skips the stagger.

Use this when

The string is a few syllables, and the letters are the design.
You can finish the stagger in under 1 second.
Words would hide a joke that lives on a single glyph.
Reduced motion can skip to the finished word.

Reach for something else when

The heading is a normal product line. Use Text reveal and split by words.
Letters should bounce in. Use Popping text.
Letters should type in order. Use Typewriter.
Letters should shuffle first. Use Text scramble.
A whole card or image should arrive. Use Element reveal or Mask reveal.

How to build it

Write the real word in the document. SplitText can cut the characters after the type is set and the font has loaded. Hide the characters with opacity, or a small rise, then play them in 30 to 60 milliseconds apart. From the centre, from the start, or from the edges. Pick one. A random order on a name looks broken. Split again if the line wraps on a smaller screen. On reduced motion, show the finished word. Keep the heading as real text.

Official GSAP

SplitText.

const split = SplitText.create('.title', { type: 'chars' });
gsap.from(split.chars, { autoAlpha: 0, stagger: 0.04, duration: 0.35, ease: 'none' });

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

Common questions

When do I split by word instead?: Most of the time. Character splits are for short marks, logotypes, and lines where a single glyph is the point.
How slow is too slow?: If the last letter lands after about 1 second, people have started reading something else.
Does it have to wait for scroll?: If the line is in view on load, play it then. If it sits lower, wait until it enters.
What about emoji and accents?: Split after the font is ready, and test the real string.
Should every heading do this?: No. One per view is plenty.
What does reduced motion do?: Show the finished word. No stagger, no slide.

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: Cinematic text