There’s been a trend in web design over recent years of adding animations because they “look good.” Parallax effects, entrance animations, elaborate transitions, micro-interactions on every element.
The problem is that most of those animations don’t communicate anything. They just slow down the experience and distract the user from what actually matters.
Animation as Language
Well-executed motion design is not decoration: it’s communication.
An animation can:
- Direct attention: Guide the user’s eye toward what’s relevant at that moment.
- Indicate spatial relationships: Show where an element comes from and where it’s going, providing navigation context.
- Provide feedback: Confirm that an action has had an effect (the button that was pressed, the form that was submitted).
- Convey brand personality: The way something moves says things about who you are.
All animations that do none of these things are noise.
The Rule I Apply: Purpose Before Effect
Before animating any element, I ask myself a question: What additional information does this animation give the user that they wouldn’t have without it?
If the answer is “none, but it looks nice,” I suppress the animation.
If the answer is “it indicates that this panel has unfolded from above, helping them understand the spatial model of the interface,” the animation has justification.
This rule seems simple but is hard to apply when the client wants “something more alive” or when the designer is in love with their entrance effect.
The Most Common Mistakes in Web Motion Design
Animations that are too slow: If the user has to wait for the animation to finish before interacting, the animation is obstructing the experience. In UI, transitions should rarely exceed 300ms.
Too many elements animated at once: When everything moves, nothing stands out. Movement only works as hierarchy when it’s selective.
Animations unrelated to interaction: If something animates spontaneously, in a loop, or without the user having done anything, it becomes background noise the brain learns to ignore.
Ignoring prefers-reduced-motion: A significant portion of users has vestibular sensitivity or photosensitive epilepsy. Not respecting the operating system’s preference to reduce motion is a real accessibility problem.
When Motion Design Adds Real Value
Well-applied motion design shines especially in:
- Onboarding: Guiding the new user through features without overwhelming them with text.
- Loading states: Transforming the wait into a controlled experience rather than a frustrating void.
- Transitions between views: Giving spatial continuity in applications with multiple states or sections.
- Micro-interactions: The small feedback that confirms the system is responding, building trust.
The best motion design is what the user experiences as “this works well” without consciously identifying that there are animations. When the animation is noticeable, it’s usually because there’s too much of it.
Have a project in mind?
Let's talk about how I can help you achieve your goals and scale your business.
