Functional vs. Gratuitous Animation in UX

Every millisecond of motion must serve an explicit cognitive or operational purpose:

Functional Animation (Essential)

1. Communicates System Status: Progress bars, skeleton loaders, and spinner transitions reassuring the user that the system is processing input.
2. Confirms User Action: Button press depressions, checkmark draws, and heart micro-bounces providing immediate haptic and visual feedback.
3. Establishes Spatial Relationships: Sidebars sliding in from the right edge signal to the user where to look to dismiss them.

Gratuitous Animation (Harmful)

Excessive, slow, or looping animations that block user progress, distract from content, or cause cognitive fatigue.