Motion isn't decoration
Three questions I ask before animating anything, and why motion is communication, not garnish.
Animating everything is tempting. Especially when you discover
transition: all 0.3s ease. But motion misused is noise: it distracts, slows
down, and confuses.
Motion used well is something else. It’s communication. It tells you what changed, what’s cause and what’s consequence, what comes first. Without a line of copy.
The three questions
Before I animate anything, I ask:
- What does the user need to understand after this animation? If the answer is “nothing”, don’t animate.
- Where does it come from and where does it go? An animation without a starting point confuses. Does it appear from below, from the left, from a previous state?
- How long does it last? Under 150ms is barely noticeable. Over 500ms feels slow. The sweet spot is 200-350ms.
When to animate (and when not)
I animate when the change has direction and meaning:
- An element enters → yes (origin and hierarchy)
- An element disappears → yes (focus moves)
- An element changes state → yes (action feedback)
- An element just “breathes” → no (empty loop)
- A page loads with a global fade-in → no (waiting for nothing)
The third is the most common trap. “Let’s add a fade-in to make it feel smooth” usually means “I don’t know what to communicate, but I want it to look nice”. Not the same thing.
The difference
Decorative motion: the user notices it and thinks “ah, animation”. Communicative motion: the user doesn’t notice it and understands something without anyone explaining it.
The second is the one that matters.