Animating layout properties

ui/animate-layoutwarningperformance

Why it matters

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

Fix

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

Credit

  • From Vercel

    The Web Interface Guidelines say to animate compositor-friendly properties (transform and opacity) rather than layout properties.

References

See it