The Rendering Pipeline & Frame Budget

Before any library, before any easing curve, there is the browser's rendering pipeline. Every visual change your animation makes flows through up to four stages — and which stage it touches decides whether you get butter-smooth 120fps or a stuttering mess.

The pipeline: Style → Layout → Paint → Composite

On each frame the browser may run these stages in order. The trick of high-performance motion is to change only properties that skip straight to the last one.

See it: layout-bound vs compositor-bound

Both boxes travel the same distance. The red one animates left (layout every frame); the teal one animates transform: translateX (composite only). Now hit “block the main thread” and watch only the red one freeze.

The performance tier list

Memorize this. It is 80% of practical animation performance.

Playground: classify the property

Edit the keyframes below. Swap transform for left/width and you’ll feel the difference under load — this is the same demo, yours to break.