Interaction and motion

When to use

Use when adding animation, page transitions, feedback, hover or press states, overlays, scroll behavior, loading transitions, or other dynamic interface behavior.

Workflow

1. Define the purpose

Every movement should show a state change, preserve spatial context, communicate hierarchy, acknowledge input, guide attention, or make a complex transition easier to understand. If removing it improves clarity or speed, remove it.

2. Map states before timing

List relevant states and transitions: resting, hovered, focused, pressed, loading, expanded, success, and error. Make the state understandable when animation is disabled or unavailable.

3. Choose motion by role

Use the shortest movement that conveys the relationship. Small control feedback should feel immediate; larger surface transitions may need more time to preserve context. Avoid applying one duration to every interaction. Prefer opacity or transform over effects that repeatedly trigger expensive layout or paint work.

4. Preserve input and navigation

Animations must not delay important actions unnecessarily. Keep focus behavior predictable when dialogs, menus, tabs, or routes change. Do not animate focus away from the active control or create a visual state that differs from actual application state.

5. Respect reduced motion

Support the prefers-reduced-motion media query. Reduce or remove nonessential movement, parallax, looping decoration, and large spatial transitions. Keep essential feedback available through immediate state changes, text, or other non-motion cues. Never make a task dependent on animation.

6. Handle interruption and failure

Repeated input, rapid navigation, network delay, interrupted transitions, and reduced-motion settings must not leave the UI stuck. Avoid decorative loops that compete with important information. Do not imply progress that is unknown.

7. Check performance

Prefer transform and opacity for common transitions. Inspect expensive filters, large blurred layers, scroll-linked work, and many simultaneous animated elements. Avoid continuously animating layout properties without a strong reason. Pause work for offscreen or inactive components when practical.

8. Validate behavior

Test keyboard input, touch, pointer, reduced motion, repeated activation, and narrow screens where relevant. Check that motion does not cause flashing, disorientation, obstruction, or missed input. Use rendered behavior when browser testing is available.

Quality gates

• Every animation has a clear user-centered purpose.
• State changes remain understandable without motion.
• Reduced-motion preferences are respected.
• Keyboard focus and input timing remain predictable.
• Motion is brief, coherent, interruptible, and performant.
• No important action depends on decorative movement.