Popping text
Popping text brings each character in with a scale, so the letters bounce to rest rather than fading or typing.
SplitTextAlso called Bounce text, Pop in letters, Scale stagger type.
Here it is working.
Each letter grows into place. Play again if you missed it.
For designers
This is a grin, and it reads as one. A 2 word mark, a sticker, a festival date. A popping error, a popping total, or a popping paragraph asks people to wait for a joke they did not ask for. If the line has to be trusted, leave the scale at 1. Overshoot is the whole trick. Too much and the glyphs crash into each other. Too little and you built Character appear with extra work. Reduced motion shows the finished word at its resting size.
When to use popping text
Use this when
- The line is short, and a bounce fits the tone.
- You can finish the stagger in under 1 second.
- Characters have room to grow without clipping a neighbour.
- Reduced motion can skip to the resting size.
Reach for something else when
- The heading should arrive as words, without a bounce. Use Text reveal.
- Each letter should fade or slide, without scaling. Use Character appear.
- You want a camera push on huge type. Use Text split zoom.
- The letters should shuffle or type. Use Text scramble or Typewriter.
- The copy is a price, a warning, or a paragraph. Set it in type.
How to build it
Write the real word in the document. SplitText can cut the characters after the font has loaded. Set each character to scale 0, transform origin at the centre or the baseline, then stagger them to scale 1 with a short overshoot. 40 to 70 milliseconds apart is plenty. Keep the split after wrapping is known. On reduced motion, skip the scale and show the finished line. Do not leave characters at scale 0.
Official GSAP
SplitText + scale stagger.
const split = SplitText.create('.title', { type: 'chars' });
gsap.from(split.chars, {
scale: 0, rotation: 10, stagger: 0.04,
duration: 0.5, ease: 'back.out(1.6)',
});Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.
Common questions
- Words or characters?
- Characters. The pop lives on the glyph.
- How much bounce?
- Enough to feel, not enough to hit the next letter.
- Can I pop a sentence?
- You can. It will feel like a ringtone. Keep it to a few words.
- Does this work on scroll?
- Yes, if you start it when the line enters. Do not scrub a bounce against scroll.
- What about reduced motion?
- Show the word at scale 1. No stagger.
- Will this break selection?
- Keep real text in the document.
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: Character appear