What the Frontend? Open the interactive gallery →
Page & Layout

Clip-path reveal

An element is revealed by animating a clip-path — content appears through an expanding shape.

What you're seeing

Content hidden by a shape that grows — a circle expanding from the center, or a rectangle wiping left to right.

Where you'll see it

Section reveals, image entrances, page transitions.

Difficulty

Low — 2/5

Libraries that build it

GSAPCSSMotion

Ready to prompt — paste this into your AI coding tool

"Animate clip-path from circle(0% at 50% 50%) to circle(150% at 50% 50%) on scroll trigger, ease power2.inOut"

Seen in the wild

La Fresque RuinartThree centuries of a champagne house painted as one enormous fresco — scroll opens the frame, then you drag through the artwork.

Related Page & Layout effects

Page transitionSmooth scrollGrid revealStaggered card entranceFLIP transitionModal entrance
See the animated preview in the dictionary →