Motion Choreography and Progressive Enhancement

Purpose

Use motion only when it communicates cause, hierarchy, continuity, feedback, or spatial change without delaying work.

When to Use

• Revealing grouped content, state changes, insertion/removal, navigation continuity, or feedback needs motion.
• An interface needs coherent motion rules or must replace arbitrary animation.

Do

• State motion purpose, bounded timing, easing, overlap, delay, direction, and maximum sequence length.
• Prefer CSS transitions and animations with state-driven classes or attributes; prefer transform and opacity where suitable.
• Provide a usable no-motion baseline and prefers-reduced-motion simplification; test interruption, reversal, hidden-tab, and low-performance cases.

Do Not