Mask or element reveal?

If the shape of the uncover matters, mask. If you only needed a fade and a few pixels of Y, element reveal.

Can type sit inside the mask?

It can, and then nobody can read it until the crop finishes.

Play once for a card. Scrub for a full-width wipe you are willing to pin.

What does reduced motion do?

Show the uncovered block. No wipe.

Mask reveal

A mask reveal uncovers a block through a crop, a wipe or a shaped hole, so the image or section is there the whole time and the mask is what moves.

ScrollBuild difficulty: Easyclip-path

Also called Clip reveal, Wipe reveal, Crop reveal, Image mask, Uncover.

Here it is working.

Under the mask

The circle opens. Play again to watch it twice.

For designers

You reach for this when the rectangle, the circle or the wipe is part of how the block is meant to look, not just a way to avoid a hard cut. A photograph that opens from the centre, a panel that wipes left with the heading. If you only needed the block to appear, Element reveal is smaller and easier to live with. Keep one mask per view. The still, fully uncovered crop has to be a good crop. Motion will not save a bad frame.

Use this when

The crop or wipe is a designed shape, not a generic fade.
The block underneath is already the final image or section.
You can finish the uncover quickly, or scrub it if the wipe is the story.
Reduced motion can show the uncovered block with no crop animation.

Reach for something else when

You just wanted the block to arrive. Use Element reveal.
The words inside should arrive. Use Text reveal.
The graphic is a stroke that should draw. Use SVG draw path.
Layers should keep moving as the page moves. Use Parallax.
One picture should fit a sequence of frames. Use Flip zone.

How to build it

Put the image or section in at its final size. Hide it with a clip, a mask, or overflow on a wrapping frame. Animate the clip or the frame, not the image layout size. Play on enter for a small figure. Scrub with ScrollTrigger when the wipe is the point of the section. Once is enough. A crop that closes again on the way up feels like a trap. On reduced motion, set the clip to fully open.

Official GSAP

clip-path circle.

gsap.fromTo('.pic', { clipPath: 'circle(0% at 50% 50%)' }, { clipPath: 'circle(80% at 50% 50%)', duration: 0.9, ease: 'power2.out' });

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

Common questions

Mask or element reveal?: If the shape of the uncover matters, mask. If you only needed a fade and a few pixels of Y, element reveal.
Can type sit inside the mask?: It can, and then nobody can read it until the crop finishes.
Play or scrub?: Play once for a card. Scrub for a full-width wipe you are willing to pin.
What about a circle that grows from the click?: That is a different trigger.
What does reduced motion do?: Show the uncovered block. No wipe.

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: Flip zone