Animation must be degradable by device capability
Aliases: prefers-reduced-motion · skip motion on low GPU · animation degrade
What it is
One motion design cannot assume every device will finish it. Degrade animation by capability means a cuttable path for motion alone: stop or snap when the system asks to reduce motion; skip decorative transitions when GPU / frame budget cannot hold, and keep only the final position or state. It targets motion itself, not how the whole product is trimmed by capability. General low-end degradation is about reaching the task; this leaf is about whether this transition plays, and how heavy it is.
Why it happens
Capability arrives on two wires. One is preference: prefers-reduced-motion means motion is unwanted regardless of machine speed. The response is to cancel or drastically shorten, not to substitute a different but equally intense move. The other is runtime: sustained dropped frames, GPU process death, battery saver, low memory. That response lightens composite load—drop blurs and particles, keep transform/opacity, and if that still fails, skip to the end state.
Degradation has to stay operable: the button is there, the state still changes, focus still moves. What is removed is the in-between. If a feature vanishes when motion is off, the interaction lived only inside the animation and should not have. Tiers can be: full motion / compositor-only / no-transition end state. Switch before the clip starts; cutting mid-flight is a harder jump than a dropped frame.
Where it stops holding
Reduced motion is a preference, not a performance measurement; a flagship with it on must still stop. Conversely, a low-end user who never set the preference may still need a skip based on frame budget—both wires must be wired. If a transition is the “still working” signal, skipping it must leave a static progress cue; do not delete the status with the motion. In games and creation tools motion is content; those genres set their own policy, not “decorative UI transitions may close.” A page with no animation has nothing to degrade.
Applying it
- Hang decorative transitions on the reduced-motion query: matched duration zero or tiny, and no loops, parallax, or large travel.
- Use runtime frame time or GPU probes to enter a “end state only” tier; probe before the first transition, not after the user has already watched a stutter.
- Interactive states (on, off, selected, error) must be expressible with no transition; motion is an overlay.
- Verify: with system reduced motion on, the page should have no continuous movement and the task should still complete. On a low-end device or simulated low GPU, decorative transitions should skip, with no half-played clip. Against the undegraded flagship path, end states should match.