Search For...


Web Animations – Essential or just appealing?

Web Animations – Essential or just appealing?


Animations have been around for a long time. However, they weren’t quite the same as they are today. Starting out it was all about animated GIF files which allowed a sequence of still images to be displayed one after the other. Unfortunately, this method was more often used to display flashing banners, flying cats and other things that generally hurt our eyes, rather than improving a website’s usability and UX (user experience).

A short while ago Adobe Flash was the king of animation. It was a revolutionary technology that allowed complex on site animations as well as video playback on all of the major browsers. However, although it was revolutionary, it was also slow compared to an equivalent purely HTML based website, both in build time and loading time, putting a heavy and unwanted load on server and developer resource.  It was also, unfortunately, a target rich environment for hackers and other unscrupulous coders so many browsers started blocking or banning the required plugins.

Today animations are very different. Animations are seen as a lot more than a way of adding a fun concept to websites. They are now seen as an important part of improving website usability. This was a much needed change and to support this shift it became possible to create animations with lightweight Javascript and CSS3. Now transitions and other effects can be added to static web elements quickly and easily, instantly bringing the websites usability and feel to another level.


Usability and UX are sometimes confused as the same thing. However, although animation plays a major role in supporting both of these, I believe they have a slightly different relationship with animation. Usability is all about making the site easier to use. For example, animation could be implemented to direct the user’s attention to something important, or to adjust the styling to make the appearance and layout of the site more user-friendly in certain situations. In this case, I think animation could very much be labelled as ‘essential’. It’s our job as developers and designers to ensure we are doing everything to assist the user’s journey through the site.

User experience on the other hand, is less to do with the ease of use, but instead primarily for improving the experience for the user. There is overlapping between these two concepts but UX is usually seen as more of a way enhancing the feel of the website, giving it an aspect of quality and making the user’s experience on the website more memorable, through storytelling for example.

This is where the question gets a little trickier to answer – is this type of animation essential or just appealing? In my opinion, animations to improve UX are essential up to a certain point. This point comes as soon as the UX based animations begin to hinder the usability in any way. It may be appealing to gradually fade in or slide in some hidden content as the user reaches a certain point on the site, but in no way should it be seen as essential. Too many of these types of animation performed at the same time will cause the pages loading times to suffer (a big no-no for usability) and there is the added risk of frustrating the user by making them feel like they are having a hard time finding the content they are looking for. It’s all a balancing act between loading speeds, usability and UX but the focus should remain primarily on the first two for the majority of websites.


For me the perfect combination, is ‘essential’ usability based animations with some simple unobtrusive UX animations. There is a market for heavily animated websites, but I think this should be limited to certain ‘fun’ projects where the main goal of the project is to stand out and be memorable for the user. A perfect example of this would be the storytelling infographic we built for GHM Hotels on ‘The History of Luxury Hotels’ –

Speed, content and usability should be the priority for most information based websites out there, but as I’ve said, adding a little UX spice through animation to this solid foundation creates the perfect balance!

Rob - Kingsland Linassi

Written Byrob

Published InThinking

View All Thinking