Reduced Motion and Rendering Budget

Working case

A case-review board moves a card across three columns when assignment changes. Reviewer 29 has reduced motion enabled, so the card changes column without travel and a short status message names the new column. Reviewer 47 permits motion, sees a brief movement, and can still tab to the card during the change. A bulk reassignment of 62 cases uses one summary update instead of 62 simultaneous animations. On a low-power tablet, the board drops its optional background blur but preserves the same task completion feedback.

Implementation boundary

function motionPlan(reducedMotion, changedItems) {
  return reducedMotion || changedItems > 12 ? "instant-with-status" : "short-motion";
}
console.log(motionPlan(false, 62));
// Output: instant-with-status

Read the platform preference through CSS and, when imperative motion is used, through a media query that can change during a session. Define a no-motion state path that does not depend on animation events. Keep status messages tied to actual outcomes, not merely visual movement. Prefer transform and opacity for small surfaces when measured, but test paint and layer memory rather than assuming they are free. Cap simultaneous effects for bulk changes and provide a plain result for assistive technology. Verify focus, zoom, color contrast, and keyboard operation with both settings.

Cost and boundaries

An effect may be O(1) in application code yet expensive in pixels, layers, and compositing bandwidth. Repeated full-screen filters can hurt battery and input latency; many promoted layers consume memory. Profiling only a desktop development machine hides the slow-device path. Measure frame time at a dense state, long tasks while data updates, and the time until an action becomes operable. A no-motion path can be faster and simpler, but it still needs intentional confirmation and focus handling.

Failure trace

The team globally disables all animation but also removes the only indication that a card changed columns. Another build keeps a scripted loop running after the preference switches to reduce. Test preference change during an active effect, bulk changes, 200 percent zoom, keyboard reorder, a screen reader announcement, low-power mode, and a denied save. Verify the status message describes the committed state rather than an optimistic move that later rolls back.

Verification

• Reduced motion retains a clear state cue.
• A preference change stops optional scripted movement.
• Dense-page frame cost is measured on target devices.

Practice drill

Run the same 62-case reassignment under both motion preferences and compare visible status, focus, and final order. Switch preference while an effect is active. Profile frame time and layer count on a low-power device while the case list updates. Remove an expensive blur and compare input delay without changing the underlying task. Revert one failed assignment and ensure the announcement reports the rollback plainly.

Decision note

Preserve information and operability across motion settings, then keep effects within a measured device budget.

Common Mistakes

• Removing status cues with motion.
• Assuming transform has zero rendering cost.
• Animating a bulk update item by item.

Connected lessons

Build Project: case board motion and route continuity and review Web Development: motion and regional state decisions quiz; follow Motion and View Change Contracts; CSS Motion State and Interruption; Web Animations Lifecycle and Cancellation; View Transition Navigation, Focus, and Fallback; Reflow, Zoom, and Motion Preferences; Field and Lab Performance Evidence.