---
title: "Animation of a layout-triggering property (smooth/animate-layout-property)"
description: "smooth/animate-layout-property: Animating width, height, top/left, margin or padding re-runs layout and paint on every frame; box-shadow on large elements…"
canonical: https://void-design.vercel.app/rules/smooth/animate-layout-property
lastModified: 2026-09-16
---

# Animation of a layout-triggering property

`smooth/animate-layout-property` · severity **warn** · category Smoothness · detected by `void smooth` and `void audit`

## Why it matters

Animating width, height, top/left, margin or padding re-runs layout and paint on every frame; box-shadow on large elements repaints large areas. These animations drop frames on phones.

## How to fix it

Animate transform and opacity instead (scale/translate), use clip-path or a pseudo-element's opacity for shadows, and grid-template-rows 0fr→1fr for accordions.

## Example

```
/* before */ .bar { transition: width .3s }
/* after  */ .bar { transform-origin: left; transition: transform .3s } .bar.on { transform: scaleX(1) }
```

## References

- https://web.dev/articles/animations-guide

## More smoothness rules

`void smooth` reports 13 rules in this category. How the page feels after it loads: dropped frames during a scripted scroll, long animation frames, INP of real clicks, shifts after input, animated layout properties, idle rAF loops and reduced-motion handling.

- `scroll-listener-nonpassive` Non-passive wheel/touch listener — [smooth/scroll-listener-nonpassive](https://void-design.vercel.app/rules/smooth/scroll-listener-nonpassive)
- `inp-slow` Interactions are slow to respond (INP) — [smooth/inp-slow](https://void-design.vercel.app/rules/smooth/inp-slow)
- `layout-shift-after-input` Layout shifts long after an interaction — [smooth/layout-shift-after-input](https://void-design.vercel.app/rules/smooth/layout-shift-after-input)
- `layout-shift-on-scroll` Layout shifts while scrolling — [smooth/layout-shift-on-scroll](https://void-design.vercel.app/rules/smooth/layout-shift-on-scroll)
- `transition-all` transition: all — [smooth/transition-all](https://void-design.vercel.app/rules/smooth/transition-all)
- `will-change-overuse` will-change is applied too broadly — [smooth/will-change-overuse](https://void-design.vercel.app/rules/smooth/will-change-overuse)
- `reduced-motion-ignored` Animations keep running with prefers-reduced-motion — [smooth/reduced-motion-ignored](https://void-design.vercel.app/rules/smooth/reduced-motion-ignored)
- `raf-loop-idle` requestAnimationFrame loop runs while idle — [smooth/raf-loop-idle](https://void-design.vercel.app/rules/smooth/raf-loop-idle)

Detected by `void smooth` and `void audit`. Explain it in a terminal: `void rules smooth/animate-layout-property`