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.
```css
/* Fully visible */
clip-path: inset(0 0 0 0);
/* Hidden from the right (clipped to nothing from the right edge) */
clip-path: inset(0 100% 0 0);
/* Hidden from the bottom */
clip-path: inset(0 0 100% 0);
/* Revealed from the left edge */
clip-path: inset(0 0 0 0); /* animate from: inset(0 100% 0 0) */
```
}
/>
```css
.delete-button {
position: relative;
}
.delete-button::before {
content: "";
position: absolute;
inset: 0;
background: var(--destructive);
clip-path: inset(0 100% 0 0);
transition: clip-path 1.5s linear;
}
.delete-button:active::before {
clip-path: inset(0 0 0 0);
}
```
```tsx
const direction = newIndex > oldIndex ? "right" : "left";
const initial =
direction === "right" ? "inset(0 100% 0 0)" : "inset(0 0 0 100%)";
```
```css
.image-reveal {
clip-path: inset(100% 0 0 0);
transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.image-reveal.visible {
clip-path: inset(0 0 0 0);
}
```
```css
.comparison-before {
position: absolute;
inset: 0;
clip-path: inset(0 var(--clip-right) 0 0);
}
```
```css
clip-path: inset(8px round 12px);
```
## 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.