Web animation and rendering performance

Guide Updated 24 October 2026

Choose an animation technique by the interaction it must preserve: layout, focus, interruption and the final state come before the moving pixels. Then choose a measurement that answers a specific question, with the browser, device and display conditions attached to the result.

Start with the thing that changes

When boxes move or change order, begin with layout and motion. Keep the document’s destination separate from the temporary transform, and decide what happens to the active control. For content whose final height is unknown, use expanding content with intrinsic-size fallbacks to separate the disclosure from its movement.

When an effect changes appearance, compare transform versus layout. Ask whether surrounding content must move, rather than choosing a property solely because it has an animation example. For effects tied to reading position, follow scroll-linked effects; let native navigation own the scroll position.

These starting points are about the task’s geometry and input rules. A card rearrangement, expanding note and reading-progress indicator do not need the same state model. Write down the ordinary, nonanimated destination before adding a journey toward it.

Give the animation a lifetime

An interaction can be interrupted, reversed or replaced by another request. Define those cases in animation cancellation before connecting a completion callback to application work. The Web Animations API provides timing models and playback controls for DOM animation.¹ Choosing it does not decide what an interrupted action means to the application.

Use frame timing when a calculation needs elapsed time. requestAnimationFrame schedules a one-shot callback before a repaint; its callback timestamp supports time-based progress.² Repeated calls alone do not establish a rendering-performance result.

Keep the stop path beside the start path. A useful example states what remains after cancellation and who owns cleanup. Those decisions matter even when the component’s visual effect is small.

Match the evidence to the question

The performance metrics reference separates callback intervals, long animation frames, long tasks, trace counts and interaction latency. Use it to name the observation before collecting numbers. A position check and a timing measurement answer different questions.

The animation package contract ledger records package and repository declarations. Use its source and version fields when comparing integration requirements. Then use the migration audit to list the application’s actual dependencies, imports and behavior before planning a replacement.

A rendering surface is another decision. Canvas provides drawing through JavaScript, and WebGL supports accelerated graphics in a canvas.³ Neither choice supplies the same document structure as ordinary HTML. Start with the content and input requirements; reserve a renderer comparison for equivalent tasks with defined measurement conditions.

Use the examples as starting points

The decision picker offers four routes: layout, interruption, callback timing and package upgrades. It selects an investigation, not a winning library or a performance score.

Each guide keeps original implementation choices separate from documentation and recorded outcomes. Follow its concrete cases, then adapt the content, state ownership and return points to the application. Keep unknown results unknown and retain an immediate route when movement is optional.

Not covered on this page

• A universal animation library or renderer recommendation.
• Hardware benchmarks or a performance ranking of the examples.
• Application-specific integration or deployment instructions.
• Accessibility certification.