Is website animation still a good idea?

Profile picture of Suzanne Scacca

{date}

{#hash1}

{#hash2}

Illustrations by {name}

Are website animations engaging - or plain distracting? A look into the good, the bad, and the future of animation on the web.

6 min read

Website animation 3D image by Shai Samana

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

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:



Website animation on Plenaire's website


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: