30 / Image

Clip-path Reveal

The picture is uncovered by an edge travelling across it, not by fading up underneath.

also called mask reveal · wipe · shape reveal

A wipe has a direction and an edge; a fade has neither. That edge is what makes the reveal feel authored rather than merely delayed.

How it is built

clip-path: inset(0 100% 0 0) → inset(0 0 0 0); transition: clip-path .9s cubic-bezier(.16,.84,.24,1);