Website animation has become commonplace these days. And there’s a good reason for that:

Because it works.

But have we reached a point where there’s too much animation on the web? Or, rather, are we moving into a phase where animation is longer as useful to us as it once was?

In the following guide, we’re going to debate the value of animation in web design and lay down some ground rules for animation going forward.

The pros and cons of website animation

Every animation choice we make — from the slight “wiggle” of a button to a full-blown animated hero image — directly affects our visitors.

Let’s have a look at all the reasons why animation can be great for a website and its visitors’ experience as well as some reasons why we should be more careful about using it:

The pros:

• More engaging than static content which can help drive more conversions

• More effectively calls attention to important elements and messages

• Succinctly tells a story in a small space

• A multitude of animations means many different ways to surprise visitors

• Unique animations can improve a brand’s competitiveness

The cons:

• Ill-timed or poorly designed animations become distractions and roadblocks

• Too much motion can slow down the loading of a web page

• Too many animations prevent visitors from knowing which parts of the page to focus on

• Website animation doesn’t always translate well to mobile, which leads to poor experiences

• Can present accessibility issues for disabled or elderly visitors

Tips for designing website animation the right way

Clearly, animations in web design range from the effective to the distracting. That said, I don’t believe it justifies doing away with website animation altogether. It just means being more mindful of how it’s used.

Here are some things to keep in mind as you design with animations in the future:

1. Start by designing them on mobile

Over the last couple of years, more and more visitors are searching the web on mobile devices, and, consequently, the mobile version of a website has become an important part of the user experience. In tandem, Google has repeatedly stated that we need to design websites with a mobile-first approach.

So, what happens when you animate a website with only the desktop user in mind?

The worst-case scenario is that the mobile experience is compromised as a result of the desktop focus. There are a number of ways this could play out:

• Mobile site design becomes an afterthought because the hyper-engaging visual spectacle on desktop can’t be executed there.

• Mobile visitors miss out on all the extra value animations provide on desktop (for example, not being able to see animated software walk-throughs).

• The inconsistency between mobile and desktop might, when not done intentionally, create a jarring experience for users that switch between their devices.

• The mobile design or functionality breaks as a result of the animation built for larger screens.

The best-case scenario is that the animation on desktop is so minor that it doesn’t hurt the mobile user’s experience all that much. The only real issue would be a lack of consistency from mobile to desktop, but even that can be smoothed out.

For example, this is the Plenaire website viewed on desktop:

The particle background is the first thing users see at the top of the page. When they scroll down to the first set of images/links, a hover triggers a card flip animation.

Now let’s look at that same experience on mobile: