Animation Performance

Animation Performance diagnoses why web motion misses its frame budget. It separates the cost of the properties being animated from the runtime or browser path that drives them. The task is frame delivery rather than choosing easing, judging whether motion belongs in the interface, or managing React Native threads. Those concerns belong to companion animation skills.

The workflow starts by inventorying each element's driver, animated properties, and overlapping work, such as navigation, data fetching, or hydration. It then works through likely causes in order: layout-heavy properties, busy-main-thread timing, per-frame React renders, growing descendant costs, animated CSS variables, expensive blur, and finally measured cases where will-change may help. Every proposed fix names its cause before code changes are considered.

The frame-budget discussion compares roughly 16.7ms at 60fps with approximately 8ms at 120Hz. A fast development laptop is insufficient evidence for the phones that run the interface. The skill distinguishes findings visible in code from issues that still need a recording on representative hardware.

Use it when an animation stutters, degrades during loading, grows slower as content increases, repaints shadows, shifts by a pixel, or unexpectedly animates layout properties. It is also suited to hand-written React animation loops and Motion implementations whose actual driver needs profiling.

It does not prescribe avoiding JavaScript animation wholesale. CSS is the suggested choice for simple motion and animation that overlaps a busy page; Framer Motion remains useful for springs, shared layout, exits, and interruptible gestures. Transform shortcuts are not assumed to be main-thread-only: installed Motion versions, selected drivers, and browser conditions determine acceleration. Readable shorthands stay the default until profiles justify a change.

Inputs are the affected motion, its code location, driver, properties, and the workload during playback. The report gives the element and file location, diagnosed cause, before-and-after implementation, and a verification label distinguishing code inspection from required device evidence. Findings are ordered by cost, prioritizing layout over paint and main-thread contention over idle work. Fixes are applied when requested.

The property analysis follows layout, paint, and composite stages. Transform and opacity are the default cheaper choices. Filter, clip-path, and background-color can gain compositor paths under suitable conditions; box-shadow, border-radius, and color involve paint, while width, height, margin, padding, and positioning can require layout as well. Suggested substitutions include translation for positioning and drop-shadow for box-shadow, subject to profiling.

Geometry takes priority over a speculative optimization. Scale also transforms text and hit targets and does not reserve layout space, so it cannot replace every size change. Small or absolutely positioned elements can have acceptable layout animation costs. Percentage translations remain useful for unknown element sizes even when browser acceleration varies.

React-specific checks look for state updates inside requestAnimationFrame, pointermove, scroll, or drag handlers. A supplied alternative writes directly to the element:

ref.current.style.transform = `translateY(${nextY}px)`;

Another trap is an inherited CSS variable carrying drag distance through a parent: style recalculation grows with its descendants. Direct element transforms avoid that propagation. Animated blur receives separate scrutiny, particularly in Safari; the guidance keeps it below 20px and suggests small amounts for softened crossfades.

will-change is a late, measured intervention for observed shifts or dropped frames, placed on the element that animates. Blanket promotion consumes GPU memory and does not fix unsuitable properties or main-thread congestion. Even compositor-driven motion can suffer from GPU load, memory pressure, or browser decisions.

Diagnosis uses browser DevTools Performance recordings for dropped frames and long tasks, the Animations panel for slowed inspection, and remote debugging on a real mid-range phone. Desktop CPU throttling does not reproduce a weak GPU or limited memory. The guidance covers CSS transitions and keyframes, WAAPI, requestAnimationFrame, React refs and motion values, and Motion or Framer Motion, with installed-version verification before treating a rendering path as accelerated.