2 March 2022

Adding animations to websites – a guide for creatives

Animations don't just look cool, they can really help user engagement in other ways too

img

Website animations can take a few different forms and are becoming more and more common on websites. They have a lot of uses too. They can highlight key parts of content, encourage engagement with different parts of the page, and help convey a company’s brand too. They can also look really cool too, and that’s always nice. 

So how do we go about doing it? Well as mentioned, there are a few different forms to look at. Here we go:

Micro animations

This is how we group together the slight and subtle reveal animations. Here are some examples: 

Animations such as these give a website a bit of life, movement, and flow to them. They might not be particularly obvious or noticeable, but we find that if they are used correctly, they can add a certain ‘feel’ to a site.

We find that less-is-more when it comes to these sorts of animations. A single slight fade-in effect applied to page elements equally can be all we need and we don’t need a dedicated animation for each different type of element. 

Consistency is important here too. Some elements may not need an animation, though if there are any similar types of elements they should all have the same animations applied. 

These kinds of animations are done purely with CSS code so they don’t need anything additional from a designer to add to a site. Just say the word and we’ll handle it. 

Adobe After Effects animations

The animations that you see strewn across the Jambi site were all created in Adobe After Effects by our fantastic design partner: 

There is a way to take a vector-based After Effects animation and export it to JSON / HTML. This is a format that can be interpreted and understood by web pages. To do this from After Effects, you will need an extension called Bodymovin’ – here’s the link. Once exported, we can embed it into a web page. 

These work really well. Because they are vector-based they are really lightweight, especially compared to videos and gifs, and retain clarity too. Despite containing seven different animations, the Jambi homepage still scores a 99/100 on the Google Lighthouse page speed index. 

We can also play the animation when the page detects particular user events. The majority of the animations seen on the Jambi site don’t do this – they just play and loop as soon as the page loads. But if you hover over the Jambi logo in the top left-hand corner you’ll see the smiley-face animation play. This is also an After Effects animation exported using Bodymovin’, but we’ve written some code to only play the animation once when the page first loads, and any time a hover event is detected. 

Advanced animations

Sometimes the desired animation is more reliant on user interaction than After Effects animations, even including ones that are influenced by hover states and similar user events. For example, the one at the top of the EllisJames website:

We built this to change the position of each image layer based on the position of the mouse cursor. There are also some other bits going on there too – such as the background colour changing and the parallax entry of the different elements. The result is great but it was too advanced to be handled by an After Effects animation or any kind of third party library, so we built it from scratch. 

Also included in this category would be sites that rely even further on user interactivity, particularly scrolling, to animation elements on the page. A good example of this is Every Last Drop, or any Apple product page.

Apple know their audience will invest the time and effort scrolling through a site to find out some basic product information. But if you need to instantly present your key message to an undecided audience you may not be afforded such digital-marketing luxuries

These sites are certainly cool and impressive, though being honest, they do seem to be falling out of fashion slightly from what we can see. We think there are two main reasons for this: though they look great, they’re not actually that good at conveying meaningful information. Secondly, to produce something like that is hugely time-consuming, and the costs associated with that are often prohibitive once factoring in both design and development time. Apple, as an example, is able to get away with these issues as they have an incredibly loyal and engaged audience to begin with, and Apple know their audience will invest the time and effort scrolling through a site to find out some basic product information. If you need to instantly present your key message to an undecided audience you may not be afforded such digital-marketing luxuries. Apple also has a near-infinite budget to spend, something that is out of range for most of us. That said, if you’re looking for something memorable they can be a fantastic showcase. 

We hope this is useful but if you have any questions do just get in touch. 

Design websites but need a hand building them?
We can help.

Contact us