The rendering pipeline
Compositing layers
Understand how painted layers are positioned and combined into the final frame.
8 minute lesson
Compositing places painted layers in the correct order and produces the final frame.
Some content gets its own composited layer. The browser can move or fade a suitable layer without repainting its contents, which is why transform and opacity are often good animation properties.
This is not automatic magic. Layer creation depends on browser decisions, element properties, and surrounding content. A transform can still cause other work during setup or when its contents change.
Layers also consume memory for rasterized content and require management. Adding will-change everywhere can make performance worse.
Use the Performance panel’s frame and rendering information to compare an animation of left with one using transform. Paint flashing can show whether frames repaint.
My advice is to express the visual effect clearly, record it, and let evidence guide layer tuning.
Exercise: animate one card both ways under CPU throttling. Compare dropped frames, Layout events, and Paint events.
Lesson completed