Clip-Path
clip-path cuts away part of an element without changing its layout. The element keeps its size, its position, and its text wrapping. Only the visible window changes. That one property replaces a surprising amount of work that would otherwise involve resizing boxes, duplicating layouts, or reaching for JavaScript.
The demo below animates the same card two ways. On the left the width shrinks, so the text inside reflows and the icon squashes. On the right the card is clipped, so it just slides out of view.
Deploy finished
Production is live at acme.com
Deploy finished
Production is live at acme.com
Clipping does not trigger layout. The browser keeps the element painted at full size and hides part of it at composite time, which is why it stays smooth even on long lists or heavy content.
Tabs that transition properly
Picture a segmented control with a dark pill that slides between options. The pill can move with a transform, but the text has to change color too. If you transition color on each label, the label leaving fades out while the label arriving fades in. For a moment both are half-gray and the control looks muddy.
Rather than tinting labels, render the tab list twice. The second copy sits on top with inverted colors and is clipped down to the pill. Then animate the clip.
The dark copy on the right is not fading anything. It is always fully colored and only the clipped window moves. The text swaps color exactly at the pill edge, which is what a physical slider would do.
Hold to delete
Destructive actions benefit from a short hold. A clipped overlay is a good way to show that time passing. The full red state is rendered underneath, clipped to zero width, and revealed with a linear transition while the pointer is down.
The trick is in the two transition timings. The reveal runs slowly and linearly so the progress feels honest. On release, the overlay snaps back in 200ms with an ease-out curve. Nobody wants to wait for a cancel.
Comparison slider
Stack two full-size layers and clip the top one. Because both images are the same size and position, moving the clip edge produces a before and after slider with no distortion. Drag the handle below.
Note that neither image ever moves or resizes. The only thing that changes is the right edge of the inset on the top layer.
Usage
<!-- Shown -->
<div class="[clip-path:inset(0_0_0_0)] transition-[clip-path] duration-300 ease-out">
...
</div>
<!-- Hidden, slides out to the right -->
<div class="[clip-path:inset(0_100%_0_0)] transition-[clip-path] duration-300 ease-out">
...
</div>.card {
clip-path: inset(0 0 0 0);
transition: clip-path 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.card[data-hidden] {
/* top right bottom left */
clip-path: inset(0 100% 0 0);
}
/* Rounded corners on the visible window */
.pill {
clip-path: inset(2px 66% 2px 2px round 9999px);
}A gotcha worth knowing: clip-path only interpolates between shapes of the same type with the same number of arguments. inset(0 0 0 0) to inset(0 100% 0 0) animates. inset(0) to inset(0 100% 0 0) does not, and neither does inset() to circle(). Write both ends of the transition in the same form.
Resources
The Magic of Clip Path - Emil Kowalski walks through tabs, hold-to-delete buttons, and comparison sliders built with a single property.
clip-path on MDN - Every shape function clip-path accepts, with browser support and animation notes.
How to create high-performance CSS animations - Why animating width and height is expensive, and which properties the browser can animate cheaply.