Animation on the web – the good, the bad, and the ugly

zac’s headshot By Zac, 17 Jul 2025

The web moves now.

Every year, the internet becomes more and more capable. With this comes the ability to push boundaries. Visit any inspiration website like Awwwards or SiteInspire and you will see great engineering feats.
However, as amazing as these are, they aren't always right for every site. Motion can have serious pitfalls if done incorrectly. It is another layer in the overall design, and like all other parts of design, it needs to be thoughtfully applied to be effective.

The Good

I like to think of motion as an enhancer. When added correctly, it magnifies good design choices and helps direct a user. It can make a good website great!

Reinforcing strong design

Our brains are made to follow motion for better or for worse. Flashing signs and sign spinners can pull your attention from an already busy street. Motion creates interest, which grabs attention. This interest can be used to reinforce visual hierarchy and user flows. Adding animations to a carousel more clearly indicates that a change in content has occurred. A button that changes colors when hovered cues a user that the button is interactable. When a menu is clicked, it should animate in a nice way. Without these animations, all of these elements would be functional, but the animation makes them even more engaging.

Creating a narrative

Motion gives access to a set of tools that are just not available on a typical static site. It can reinforce a story and highlight important parts of your message. Images can reveal themselves in the margins to add more context. You can create pacing by staggering how your content is revealed. Strong storytelling is reinforced through animation.

Encouraging engagement

Micro-interactions are some of my favorite elements in web motion. These are the small things that happen when you interact with the site. Being creative in these aspects gives users a reward for exploring and engaging. Sometimes there is no higher purpose than making things more fun. Surprise and delight go a long way to improving users' opinions, as long as these don't get in the way.

The Bad

Nothing is more frustrating than a beautiful site that is impossible to use. When done correctly, motion can elevate a site to another level. However, more often than not, it just causes issues. That menu animation that takes two full seconds may seem cool in development, but a user will hate you when they just want to get to their account quickly.

Motion is an enhancer. If your design, content, or UX is weak, then motion is not going to fix it. All the benefits described above assume a strong foundation. Adding animations to a site without clear direction creates confusion and muddles your message further.

As with most other things in life, the basics are the most important. Make sure your content is clear with a strong direction, and that you have a design that supports that. From there, you can create a solid strategy around animation.

The Ugly

Lastly, there are some trade-offs that you will always have when dealing with motion. We've written in the past about accessibility compliance. Motion introduces some serious issues for accessibility on your site. With proper steps, these can be mitigated.

At its base level, animating text and images creates visual clutter; there is no way around this. WCAG goes into more depth around these issues in their documentation. To summarize them, moving elements and other types of animation can cause discomfort, nausea, difficulty reading, and inhibit the capabilities of accessibility tools (such as screen readers).

You can mitigate these through:

Pause, stop, hide: Users should have a way to get rid of or hide animations. This can often be easily accomplished by using the prefers-reduced-motion media query in your CSS.
Don't mess with native behaviours: Any motion that you have shouldn't obstruct the way a browser or website naturally behaves (scroll, refresh, go back, etc).
Test with screen readers: Many types of animation, especially more intensive ones, affect the way a site's HTML is structured. This can seriously affect the functioning of screen readers and other assistive devices.

Motion can be a great thing. However, it needs to be implemented correctly to be effective. Following some of the tips above can get you going in the right direction. I also highly recommend checking out some of the resources below: