The layout properties
| Property | Type | Default | Description |
|---|---|---|---|
| width | number (px) | (natural) | Element width in pixels. Animating width can shift surrounding content. |
| height | number (px) | (natural) | Element height in pixels. Animating height shifts content below. |
| borderRadius | number (px) | (inherited) | Corner radius in pixels. Pure cosmetic effect, no layout impact. |
| clipPath | CSS clip-path string | (none) | CSS clip-path expression. Reveal content with circles, polygons, or insets without affecting surrounding layout. |
The trade-off
Transforms (translate, scale, rotate) are GPU-composited: they don’t change the element’s box model, just where it’s painted. Layout properties are different. When you change width, height, or padding, the browser has to:
- Recalculate the element’s box.
- Recalculate every sibling whose position depends on it.
- Repaint everything that overlaps.
On a single element with no neighbors, this is imperceptible. On a complex layout with sticky elements and grid containers, it can cause visible jank.
Heads-up
The right panel marks layout properties with a small “may impact performance” note when you enable them. It’s not a block, just a flag. Animate them when you need them; just don’t reach for them as a default.
When to reach for them anyway
- border-radiusis safe. It changes the shape’s outline, not its box. Animate freely.
- clip-pathis safe for reveals (animate from a small circle to a full reveal). It doesn’t affect the element’s layout box, only what’s visible.
- width / height are right when you actually need the box to change size and surrounding content to flow accordingly. Accordion expansion, hero image growing into the viewport, full-screen takeovers. Plan for the reflow.
Cheaper alternatives
Often what looks like a width/height animation can be done cheaper:
- Visual scaling: scale instead of width/height. The element appears larger but the box stays the same. Surrounding content doesn’t shift. Use when you don’t need the layout to adapt.
- clip-path reveals: instead of growing the element from zero width, hide it with clip-path and animate the reveal. The box is full size from the start, no reflow.
- Translate hide: instead of collapsing height to 0, translate the element off its parent and use overflow hidden. The space stays but the content slides out. Often what people want when they reach for height animation.
Next steps
- Transform: x, y, scale, rotate, skew for the cheaper alternatives.
- Performance and Core Web Vitals for the broader discussion of cost.
- Visual: opacity, blur, brightness, contrast, saturate, grayscale for non-layout visual effects.