clip-path techniques

Animations you can build with clip-path and zero JavaScript

Directional reveals, wipe transitions, hold-to-delete confirmations, comparison sliders. One animatable property. `clip-path: inset()` defines a rectangular clipping region with four values (top, right, bottom, left), each animated independently. } /> ## Performance notes `inset()` and `circle()` are GPU-compositable. `polygon()` may cause paint on every frame. Add `will-change: clip-path` before animation starts. Remove after completion. ## When not to use clip-path For soft reveals, use `mask-image` with a CSS gradient. Clipped elements still receive pointer events. Add `pointer-events: none` to clipped regions with interactive children.