How fast should it type?

40 to 80 milliseconds a character for UI.

Can I type a whole paragraph?

You can. People will skip it. Keep the string short enough to finish in about 1 second, or loop short phrases.

What about the caret?

Optional. Hide it when the line is complete, and never blink it under reduced motion.

Does this work on mobile?

Yes, if it starts on load or on scroll.

Will screen readers hear it letter by letter?

Not if the finished phrase sits in the document and the typing layer is marked as visual only.

What does reduced motion do?

Show the finished phrase. No caret, no drip of letters.

Typewriter

A typewriter adds letters in reading order, often with a caret, so the line looks as if someone is still typing it.

TextBuild difficulty: Easygsap.timeline

Also called Typing effect, Type out text, Caret text, Sequential type.

Here it is working.

Motion notes

Three phrases take turns. The caret keeps time.

For designers

This is charm with a cost. Every character is a wait. A 4 word loop on a hero can feel like a conversation. A typed legal line, a typed price, or a typed error feels like the page is stalling on purpose. If someone needed the sentence to decide whether to stay, show the sentence. A blinking caret sells the idea and also steals attention from the next action. Use it on 1 phrase, then stop or loop that phrase only. Reduced motion shows the finished line and kills the caret blink.

Use this when

The phrase is short, and a little wait is the joke or the tone.
You can loop 2 or 3 short strings without anyone needing all of them at once.
A caret helps, and you can hide it when the line is done.
Reduced motion can skip to the finished phrase.

Reach for something else when

The heading should arrive as words, still readable as a group. Use Text reveal.
The letters should shuffle before they settle. Use Text scramble.
Each character should pop or fade, without typing. Use Popping text or Character appear.
The line is a paragraph, a label, or a price. Set it in type.
You wanted a looping strip of logos or chips. Use Infinite marquee.

How to build it

Put the finished phrase in the document for search, selection and the accessibility tree. Drive the visible letters from that string, one character at a time. A counter that slices the string is enough. SplitText is only needed if each glyph also has to move. Pace the add at 40 to 80 milliseconds for a product line. If you backspace into a second phrase, cut back to the shared stem, then type the rest. Give the caret its own span and blink it with a tween you can kill. On reduced motion, show the finished phrase and leave the caret off. Hold space in the layout for the longest phrase.

Official GSAP

Timeline + TextPlugin.

const tl = gsap.timeline({ repeat: -1 });
tl.to('.type', { duration: 0.8, text: 'Designer.' })
  .to({}, { duration: 0.7 })
  .to('.type', { duration: 0.3, text: '' });

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

Common questions

How fast should it type?: 40 to 80 milliseconds a character for UI.
Can I type a whole paragraph?: You can. People will skip it. Keep the string short enough to finish in about 1 second, or loop short phrases.
What about the caret?: Optional. Hide it when the line is complete, and never blink it under reduced motion.
Does this work on mobile?: Yes, if it starts on load or on scroll.
Will screen readers hear it letter by letter?: Not if the finished phrase sits in the document and the typing layer is marked as visual only.
What does reduced motion do?: Show the finished phrase. No caret, no drip of letters.

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: Dual scramble