How wide should the split be?

30 to 40 pixels each side on desktop, less on a phone. Past that the two halves read as two words.

Can I use it on a full headline?

No. The split needs the eye to hold both halves at once, and a long line pushes them off the same glance.

Once, when the mark enters. A loop turns a heading into a logo sting.

What does reduced motion do?

Show the finished lockup. No scale, no push.

Text split zoom

A word that breaks in the middle as a block grows between the halves.

TextBuild difficulty: Mediumscale + x

Also called Split zoom, Letter gap.

Here it is working.

Motion

The mark splits, then holds. Play again to watch it twice.

For designers

This is a lockup move, so it wants a lockup: two or three words that already sit together as a mark. The block between the halves is the event, and the halves only have to get out of its way. Keep the push small, 30 to 40 pixels each side, because a wide split stops reading as one word. One moment, then rest. A split that loops turns a name into a logo sting, and a logo sting on a page heading is a different job. On reduced motion, show the finished lockup and skip the break.

Use this when

A short lockup like a name or a brand mark
You want one moment of split, then rest
Two halves and one block. Not a sentence

Reach for something else when

A headline with many words. The split gets lost.
You want letters to pop. Use Popping text.
A photo zoom. That is a gallery move.

How to build it

Two spans and a square. Scale the square from zero. Push the left span left and the right span right by the same amount. Reduced motion shows the finished lockup.

Official GSAP

gsap.fromTo scale and x.

gsap.fromTo('.box', { scale: 0 }, { scale: 1, duration: 0.8, ease: 'power3.out' });
gsap.to('.left', { x: -36, duration: 0.8 });

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

Common questions

How wide should the split be?: 30 to 40 pixels each side on desktop, less on a phone. Past that the two halves read as two words.
Can I use it on a full headline?: No. The split needs the eye to hold both halves at once, and a long line pushes them off the same glance.
Should it loop?: Once, when the mark enters. A loop turns a heading into a logo sting.
What does reduced motion do?: Show the finished lockup. No scale, no push.

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 shimmer wave