---
title: "Animating layout properties (ui/animate-layout)"
description: "width, height, top/left, margin and padding run layout on every frame, and long pages drop frames."
url: http://localhost:4173/rules/ui/animate-layout
updated: 2026-11-11
---

# Animating layout properties

> `ui/animate-layout` is a vetd rule. It flags: Animating layout properties. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `ui/animate-layout` |
| Severity | warning |
| Group | Interface craft: accessibility, motion and mobile |
| Tags | performance |

## Why it matters

width, height, top/left, margin and padding run layout on every frame, and long pages drop frames.

## How to fix it

Animate transform and opacity; for height use grid-template-rows 0fr → 1fr.

## Credit

Based on work by:

- [Vercel](https://vercel.com): The Web Interface Guidelines say to animate compositor-friendly properties (transform and opacity) rather than layout properties.

## References

- [Stick to compositor-only properties and manage layer count](https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count), web.dev
- [How to create high-performance CSS animations](https://web.dev/articles/animations-guide), web.dev
- [CSS and JavaScript animation performance](https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/CSS_JavaScript_animation_performance), MDN Web Docs
- [Rendering performance](https://web.dev/articles/rendering-performance), web.dev

## See it

Demos in the vetd Lab:

- [Animate transform and opacity](http://localhost:4173/lab/web-guidelines/motion-compositor-and-reduced)

## Related rules

- [`ui/will-change`](http://localhost:4173/rules/ui/will-change.md)
- [`ui/transition-all`](http://localhost:4173/rules/ui/transition-all.md)
- [`ui/reduced-motion`](http://localhost:4173/rules/ui/reduced-motion.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "ui/animate-layout" }`. CLI: `npx vetd explain ui/animate-layout`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`ui/input-type`](http://localhost:4173/rules/ui/input-type.md) · Next: [`ui/will-change`](http://localhost:4173/rules/ui/will-change.md)