Motion earns its place when it explains change, preserves context, or provides useful feedback.
Motion should carry information
A transition can show where an item moved, confirm that an action completed, or help users understand a change in hierarchy. Decorative motion that competes with the task increases cognitive load.
Protect performance and comfort
Animations should be short, interruptible, and respectful of reduced-motion preferences. Essential content must remain visible when an animation library, graphics API, or JavaScript fails.
- Animate opacity and transforms where possible.
- Avoid motion that blocks input.
- Provide a static fallback for canvas and WebGL effects.
- Test on low-powered devices and slower connections.
Use the quietest effective treatment
The right amount of motion is usually less than a design team first imagines. If the interface communicates the same state change without animation, motion should improve understanding—not merely announce itself.