mediumConceptMidSeniorStaff
Why is animating transform cheaper than animating top, and when does promoting an element to its own compositor layer make things worse?
5 min readUpdated 2026-08-15Target archetype: Big Tech, Enterprise Captive, Product Startup
Answer
Short answer
Transform and opacity can be applied by the compositor to an already-rasterised layer, skipping style, layout and paint, and running off the main thread. Promotion buys that at the cost of memory, extra rasterisation and layers you forgot to retire.
Was this answer helpful?
Likely follow-ups
- The design calls for an element's width to animate. What do you build instead, and what does the substitution cost?
- A composited animation is smooth on a laptop and drops frames on a mid-range phone. Where do you look first?
- How would you confirm from developer tools that an animation is running on the compositor rather than the main thread?
- Two elements overlap and only one of them is promoted. Why might the browser promote the other one as well?
Related questions
- Someone added will-change: transform to every card to make scrolling smooth, and the page got slower on phones. What happened?mediumAlso on will-change and rendering4 min
- A page has a poor Largest Contentful Paint. How do you diagnose it and what do you actually change?hardAlso on rendering7 min
- Find the cheapest flight from one city to another using at most K stops. Why does plain Dijkstra give the wrong answer?mediumSame kind of round: concept5 min
- Your test lifts conversion, but something else moved the wrong way. What are guardrail metrics, and when do they stop a launch?hardSame kind of round: concept5 min