top of page
Profile picture of Suzanne Scacca

6.10.2020

6 min read

Is website animation still a good idea?

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

Website animation 3D image by Shai Samana

Illustration 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. 

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?