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 no 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:

The particle background and title card that welcomes visitors to the site remains the same. What’s different is the next section where visitors are deprived of the card flip. Does it compromise the experience? Absolutely not. They still find images inviting them to explore the products further.

Bottom line:

If you design animations with a mobile-first approach, you’ll reduce unintentional inconsistencies across the user experience while also ensuring that you only use the most essential of animations to begin with.

2. Make sure the animation serves a purpose

It’s easy falling into the trap of believing that animation automatically makes a website better. It’s moving! It’s eye-catching! It’s unpredictable! But those aren’t the reasons why animation is an effective engagement tool in web design.

Good animation serves as a guide for visitors, pointing out elements they should be engaging with and taking them on a journey — a journey you designed for them.

When animation is used simply for the shock and awe of it, you’re not likely to see much come from it in the end.

Purpose-less animation can cause a ton of friction as users move through your website. For example:

• They view the site (and brand) as gimmicky as it relies on spectacle instead of on honesty and professionalism.
  

• They get distracted by all of the moving pieces, never knowing where to focus.
  

• The unpredictability of the animation makes the website too difficult to navigate.
  

• They become exhausted by all of the animation, eventually abandoning the site entirely.

When animation adds no value and provides no direction, visitors will either become blind to it or avoid it entirely. That’s the exact opposite of what you want to happen when you set out to build a site.

So, let’s look at an example of a website where all of the animations serve a clear purpose. This is Build in Amsterdam:

There are only a few kinds of animation on this site:

• Text moves or appears upon hover
  

• Scroll controls open in the bottom left, middle, and right of the screen
  

• Modular rectangle blocks move in and out of view

Each instance of animation is handled cleanly and consistently throughout the site. What’s more, the animations give the design and brand a controlled and sleek look. Nothing is out of place or unexpected and it’s all where it should be, which is indicative of what this company would be like to work with.

Bottom line:

There’s nothing wrong with using animation site-wide. It’s when that animation is applied without any moderation or goal that you’re going to have a problem with it. So, if you don’t have a good reason for using animation other than wanting to grab attention, stick with a static design until you do.

3. Be mindful of implication on page speed

One of the biggest killers of web traffic and conversions is slow-loading pages.

The longer visitors have to wait to see the content on your page, the more likely they are to abandon the page altogether and never return.

Because animations can be so draining on web hosting — especially when you use more than just a handful of them — it’s important to keep an eye on what they’re doing to loading speeds.

You can use Google PageSpeed Insights to monitor these effects.

For example, this pagespeed score and analysis comes from a website that is chock-full of complex animations:

Google has failed this website with a score of 38 on mobile and a mediocre score of 43 on desktop. Neither is good — not for the users and not for the website’s search ranking (which is negatively affected by slow-loading pages).

And so much of it has to do with how taxing the animations are.

Unfortunately, when you use animations, you put your website at a greater risk of that happening if you don’t properly optimize your assets.

Let’s compare this with eCommerce site unspun:

The website uses a loading animation, page transitions and auto-scrolling text, along with other animated elements along the way. In addition, it’s an eCommerce site, so it’s chock-full of large, high-resolution images.

Page loading times can be problematic for eCommerce websites because of all the images and pages on the site. Imagine what happens when you add animation to the picture.

But that’s not the case for unspun:

Google PageSpeed Insights gives the mobile site a passing score of 96, and desktop an 82. These are fantastic scores considering how many complex and heavy elements are on the site.

Bottom line:

Consider the downsides of an excessive amount of animations on your website. If the site is just used as a portfolio to impress potential clients, for example, then the slow speeds wouldn’t matter as much and maybe you can afford it. However, if your website needs to grow your online visibility and sales, you have to be very careful about how much animating you do, as it could throw the whole thing in jeopardy.

If the animations are absolutely necessary, look for ways to further optimize your site for speed. It’s the only way to keep from losing visitors before they’ve had a chance to see them.

Wrapping up

To answer the question at hand: Yes, website animation is still a good idea.

While you can certainly impress visitors with static content, there’s something in the way animation commands our attention that you can’t really get anywhere else.

However, while there’s a lot of good that can come from adding motion to a site, it’s a tricky balance to maintain. How much animation is enough for users to be engaged and intrigued, without crossing the line into annoying or exhausting them?

By committing to the best practices explained above, you should be able to create animations that allow you to reap all the pros and none of the cons.