How similar do the words have to be?

Close in length. Five to eight characters each is comfortable. A three letter word becoming an eleven letter one moves the line.

Should the morph run on its own?

No. Give it a control. A word that changes by itself reads as a bug on second glance.

How do I stop the layout jumping?

Reserve the width of the longest label on the container, so the node never resizes.

No. The letters go straight to the next word. A scramble passes through junk characters on the way.

What does reduced motion do?

Set the word straight away, with no tween.

Text morph

A word that becomes another word in place, letter by letter.

TextBuild difficulty: EasyTextPlugin

Also called Word swap, Text replace.

Here it is working.

Motion

Pick a word. The line becomes it in place.

For designers

A morph only works when the two words are close in length, because the node keeps its slot and the layout has to hold still while the letters change. Three labels of five to eight characters is the comfortable range. Give people the row of pills that picks the word, so the change is something they did rather than something the page decided to do at them. Reserve the width of the longest label up front, or every switch nudges whatever sits beside it. On reduced motion, set the word with no tween.

Use this when

Three short labels that share a slot
A filter, a tab, or a name that changes on click
The words are similar in length, so the layout does not jump

Reach for something else when

A scramble into junk letters. Use Text scramble.
A typewriter that deletes. Use Typewriter.
Long sentences. Morph a word, not a paragraph.

How to build it

TextPlugin on the node. Tween text to the next word. Keep a row of pills so the change is chosen, not random. Reduced motion sets the word with no tween.

Official GSAP

TextPlugin.

gsap.to('.word', { duration: 0.55, text: next, ease: 'none' });

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

Common questions

How similar do the words have to be?: Close in length. Five to eight characters each is comfortable. A three letter word becoming an eleven letter one moves the line.
Should the morph run on its own?: No. Give it a control. A word that changes by itself reads as a bug on second glance.
How do I stop the layout jumping?: Reserve the width of the longest label on the container, so the node never resizes.
Is this a scramble?: No. The letters go straight to the next word. A scramble passes through junk characters on the way.
What does reduced motion do?: Set the word straight away, with no tween.

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 underline