Anti-pattern · Motion · Medium
Animating Width and Height
Animating width and height means transitioning layout properties directly, which forces reflow on every frame and stutters on real devices.
The tell
Transitions or keyframes targeting width, height, top, left, margin or padding.
Why it happens
Height:auto → a fixed value is the intuitive way to write an accordion, and models reach for it first. It demos fine on a fast machine with a small DOM.
The rule
Animate transform and opacity only. Never transition layout properties.
- Replace width/height transitions with scaleX/scaleY or a transform-based reveal.
- Use opacity plus transform for enter and exit; avoid animating margin or padding.
- Where true size change is unavoidable, measure once and animate a fixed transform.
What is a Animating Width and Height?
Width, height, top and left are layout properties: changing them makes the browser recompute layout on every frame. On a mid-range phone that is visible jank. Transform, opacity and (with care) clip-path are composited — the browser can move them without relayout. Animate those, and if you need layout to change, animate a transform and let the layout snap.
Paste this after your existing prompt to strip the pattern from the result.