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.