Is the rectangle the design or the trick?

If you would still draw it with the motion off, you are in the right page. If you would delete it, use [Text reveal](/motion/text-reveal/).

Can the box stay after the reveal?

Yes, if it is part of the layout.

Does this work on mobile?

Yes, if the box still fits and you trigger from scroll or load.

What does reduced motion do?

Show the line uncovered, and the rectangle in its resting place.

Rectangle text reveal

A rectangle text reveal uncovers a line with a box, so the heading arrives because a rectangle moved, not because the letters did.

TextBuild difficulty: EasyscaleX

Also called Box reveal text, Block wipe heading, Rect mask type, Cover reveal.

Here it is working.

Motion

The bar pulls back. The sentence was there the whole time.

For designers

The rectangle has to be designed. A coloured slab, a rule that grows, a hard clip. If the box is only there to hide type, Text reveal or Mask reveal will do the same job with less furniture. If the box is a card and the type is just inside it, you wanted Element reveal. Keep the move to one direction. Left to right, bottom to top. A box that also fades, scales and scrambles is 3 tricks in a trench coat. Reduced motion shows the line and the rectangle already in their final seats.

Use this when

The rectangle is drawn on purpose, and the type lives in it.
You can finish the wipe in under 1 second.
One heading per view is enough.
Reduced motion can show the box and the line at rest.

Reach for something else when

There is no rectangle, only a heading. Use Text reveal.
The crop is soft or cinematic. Use Cinematic text.
A whole section or image should uncover. Use Mask reveal or Element reveal.
The line should fold. Use Folding text.
Letters should pop, type or shuffle. Use Popping text, Typewriter or Text scramble.

How to build it

Set the heading as real text. Draw the rectangle as a sibling or a clip on the line. Move the rectangle off, or open a clip-path inset, on a single ease. Do not split the letters unless the wipe is already done. Size the rectangle to the type after the font has loaded. If the box is a colour slab that stays in the layout, animate a child that covers the type, and leave the slab where it is. On reduced motion, show the uncovered line. Rebuild the clip if the heading wraps.

Official GSAP

gsap.to scaleX.

gsap.to('.bar', { scaleX: 0, transformOrigin: 'right center', stagger: 0.12, duration: 0.55, ease: 'power2.inOut' });

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

Common questions

Is the rectangle the design or the trick?: If you would still draw it with the motion off, you are in the right page. If you would delete it, use Text reveal.
How fast should the wipe be?: Under 1 second.
Can the box stay after the reveal?: Yes, if it is part of the layout.
Does this work on mobile?: Yes, if the box still fits and you trigger from scroll or load.
What about more than one heading?: One per view.
What does reduced motion do?: Show the line uncovered, and the rectangle in its resting place.

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 on path