# Choose animation timing and distance by what users need to see

Choose animation timing and distance by the information the effect communicates. A small control response should not feel like a page entrance. Start with a restrained version, test it inside the actual interface, and adjust based on legibility and interruption rather than a universal duration chart.

## Change one variable at a time
For a fictional filter panel, compare an immediate update with a 160ms movement and a 320ms movement using the same distance. Then compare distances while keeping the timing fixed. Changing easing, distance, opacity, and duration together makes it difficult to know which choice caused the improvement or annoyance.

## Use a small token set
```css
:root {
  --motion-quick: 160ms;
  --motion-panel: 240ms;
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
  --motion-offset: 8px;
}
```

These are authored starting values, not measurements of human perception or a standards requirement. Keep the set small enough that the team can explain when each value applies. Do not create a separate token for every decorative flourish.

## Record the comparison
| Variant | What to observe |
| --- | --- |
| Immediate | Is the state change clear without movement? |
| Short movement | Does the change remain easy to follow? |
| Longer movement | Does it delay attention or the next action? |
| Reduced motion | Is the same result understandable? |

Test on a small screen and a slower device. A transition that feels subtle on a large monitor may dominate a phone viewport. The practical result matters more than the token name.

## Ask for a motion rationale
```text
For this interaction, propose an immediate version and two restrained motion variants.
Keep all final states identical.
Explain the purpose, distance, timing, easing, and interruption behavior.
Treat numerical values as starting choices to test, not universal best practices.
Include reduced-motion behavior and a browser verification checklist.
Interaction: [description and code]
```

Keep the version that communicates the change with the least burden. If neither animated version improves understanding, the immediate update may be the right choice. Use tokens to keep intentional decisions consistent, not to force every component to move.

---
SkillStall · 2026-10-02
MDN: prefers-reduced-motion: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion