Seedling
CSS Animation Performance: width vs transform
#css#performance#animation#frontend
Had a janky progress bar on mobile. Switching from width to transform: scaleX() fixed it instantly.
Understanding the browser rendering pipeline gives you the answer.
width change → Recalculate from Layout → Main thread blockingtransform change → Composite only → GPU handles it// Before - reflow every frame
<div style={{ width: `${progress}%` }} />
// After - GPU-accelerated, no reflow
<div
className="w-full origin-left will-change-transform"
style={{ transform: `scaleX(${progress / 100})` }}
/>
The difference is dramatic for frequent animations like scroll events.
width, height → Layout trigger → Main thread blockingtransform, opacity → Composite only → GPU handles itMobile has a weaker main thread, so the difference is more noticeable.
will-change to hint the browser about upcoming changes