Text fades into view. Images slide across the screen. Cards grow when you hover over them. Entire sections move at different speeds while you scroll. Sometimes the cursor even gets replaced by a floating circle that takes half a second to catch up with your mouse.
When animation is used well, it can add personality and help guide users through a website.
But when everything moves, nothing feels important.
Animation should have a purpose
Good animation supports the user experience.
It might show that an action has been completed, explain how two parts of an interface are connected, or make a change in content feel less sudden.
Some examples include:
- Opening and closing a mobile menu
- Showing that a form is submitting
- Revealing an error message
- Moving between steps in a checkout
- Confirming that something has been added to a basket
- Helping users understand which content has changed
These animations provide feedback. They tell the user that the website has noticed their action and something is happening.
That’s very different from animating every element simply because you can.
Scroll animations are everywhere
Scroll-triggered animations have become incredibly common.
You reach a section and the heading fades upwards. Scroll a little further and an image appears from the left. Then three cards arrive one after another, followed by a button that eventually decides to join them.
The first time you see it, it might look impressive.
By the fifth section, you’re waiting for the website to catch up with you.
Users normally visit a website because they want to do something. They might be looking for information, comparing a service, reading an article, or trying to contact a business. Making them wait for content to appear adds an unnecessary barrier between them and what they came for.
If I’ve already scrolled to the content, just let me read it!
Movement can become distracting
Animation naturally attracts attention.
That makes it useful when you need to highlight an important change, but distracting when several things are moving at once.
Imagine trying to read a paragraph while a video plays beside it, a banner moves across the top of the page, and another element slowly floats into view underneath. Your attention is being pulled in several directions before you’ve even understood the content.
This can be particularly difficult for people with cognitive or visual impairments. Some users may struggle to focus when there is constant movement, while others can experience dizziness or motion sickness from effects such as parallax scrolling and large page transitions.
A website might look creative, but that doesn’t automatically make it comfortable to use.
Don’t forget reduced motion
The prefers-reduced-motion setting allows users to tell websites that they would prefer less animation.
As developers, we can use this preference to remove or reduce effects for those users.
For example:
CSS
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}This doesn’t mean every website needs to remove every tiny transition. The aim is to avoid unnecessary or potentially uncomfortable movement while keeping the interface understandable.
It should also be considered when the animation is first designed rather than added as a quick fix at the end of development.
Animation can affect performance
Animation isn’t only a visual decision. It can also affect how well a website performs.
Large JavaScript animation libraries, background videos and complex scroll effects all add more work for the browser. On a powerful laptop with a fast connection, that might not be noticeable. On an older phone, it can result in dropped frames, delayed interactions and scrolling that feels like it’s fighting against you.
This becomes even worse when several animation libraries are added to achieve effects that could have been handled with a few lines of CSS.
Not every animation library needs to make it into production.
Before adding one, it’s worth asking:
- Does this improve the experience?
- Can the same result be achieved with CSS?
- Does it work smoothly on a real mobile device?
- What happens when JavaScript fails?
- Does it respect reduced motion preferences?
- Is the effect still enjoyable after seeing it ten times?
If the main reason for an animation is “it looks cool”, that doesn’t necessarily mean it shouldn’t be used. Websites are allowed to be creative and fun.
It just means the effect needs to earn its place.
Subtle usually works better
Some of the best interface animations are barely noticeable.
A button changing colour when it’s hovered or focused. A menu opening smoothly enough that users understand where it came from. A small loading indicator confirming that a request is still being processed.
These details can make a website feel polished without turning every visit into an interactive presentation.
Animation should support the content rather than become the content.
There will always be exceptions. Creative portfolios, campaign websites and digital experiences may intentionally use movement as part of their story. In those cases, animation is central to the idea rather than decoration added afterwards.
Even then, accessibility, performance and user control still matter.
Let the content breathe
A website doesn’t need to constantly entertain its users.
Sometimes a clear layout, readable text and an obvious call to action are enough. Content doesn’t become boring simply because it appears immediately.
I enjoy building animation into websites, especially when it adds personality or makes an interaction easier to understand. But I also think knowing when not to animate something is an important part of frontend development.
The goal shouldn’t be to make users notice every effect.
It should be to create an experience that feels smooth, clear and comfortable.
Because if someone leaves your website remembering the animation but not what the website was actually about, it probably moved a little too much.
