clip-path techniques

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.

inset() as the universal primitive

inset() clips without reflowing layout. GPU-compositable with will-change: clip-path.

Hold-to-delete

A red fill wipes across the button from left to right. Release early, it reverses. Hold long enough, the delete fires.

Linear timing is intentional. Progress indicators use linear easing so the user can predict completion.

In React, track hold time with onPointerDown / onPointerUp and fire only if the full duration elapsed.

Tab transitions

Clip the new panel in from the direction the user is navigating. Tab 1 to Tab 3: reveal from right. Tab 3 to Tab 1: reveal from left.

Smoother than a transform-based slide because you don't need to position two panels side by side.

Image reveals

Trigger .visible with an Intersection Observer at threshold 0.1-0.2.

Comparison sliders

Update --clip-right as 100% - dragPosition%. Combine with setPointerCapture and touch-action: none on the slider handle.

Rounded insets

inset() accepts an optional round parameter:

Useful for padded, rounded reveals that match the card's own border-radius.

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.