CodePark/ questions / Reflow, repaint & compositing
START PRACTICINGPRACTICE
Frontend question · Browser & web performance › Reflow, repaint & compositing

You want to slide a panel 300px to the right in a smooth animation. Which property is cheapest to animate?

transform

transform: translateX() can be handled by the compositor without layout or paint. The compositor is the part of the browser that moves existing layers on screen, often on the GPU.

left and margin-left are the tempting wrong answers. Animating them triggers layout on every frame, so frames are much more likely to drop. width also triggers layout on every frame, and it resizes the panel instead of sliding it.