Composite

Compositing combines painted layers into the final frame, often on a separate compositor thread. Animating transform and opacity can avoid layout and paint when the element is already suitable for compositing. Layer promotion is a trade-off because each layer consumes memory and can increase upload work.

					.panel {
  will-change: transform; /* use sparingly, remove after animation */
  transition: transform 200ms ease, opacity 200ms ease;
}
				

Transform-only motion can look wrong if sibling layout relationships must change. Compositor thread work is not free on low-end GPUs.

On interviews: choose compositor-friendly properties and explain why will-change is not free.

Common pitfalls: will-change everywhere wastes memory. Transform-only animations can still look wrong if layout relationships need to change.

The trade-off is convenience versus control — pick the mechanism that matches your coupling and performance budget.

Checklist:

• Prefer transform and opacity for motion.
• Use will-change briefly and locally.
• Watch layer count and memory.
• Measure jank, not only FPS in devtools.