Keeping websites up to date and moving with the trends can feel like a full time job. First there’s the regular back-end updates (which I recommend you do monthly) then on top of that there’s the keeping the design fresh. 

A good way of updating the design and keeping things interesting is to use animation on your website. Animation doesn’t tend to date in the same way images can and, due to the customisation tools for animations, you won’t fall into the trap of the same animation being recognised across many areas of the internet the way you can with stock imagery. 

Lottie Animation is a great way to use animations, customise them to your branding and design needs and give your website that bit of oomph it’s missing. 

What is it?

Simply put, Lottie Files are tiny files (so won’t take up much room on your server) of animations which you can choose and customise then add to your website. 

How to use it

Set up a free account with Lottie Files, click on ‘discover’ and search for the type of animation you’re looking for.

When you find one, you can either use it as is, or you can choose to edit the background, animation speed and layer colours in the free editor. 

Once you’ve done this download the json file. 

Adding Lottie Animation to your website

Many website builders will have a Lottie animation file element available and you then simply choose this, upload the file to your media library and insert it into the relevant section of the page. 

If your theme doesn’t have this function there are other ways you can use it including using the Lottie player or inserting the HTML. You can read more about how to do it by clicking here. 

Video tutorial

Here’s a step-by-step tutorial of how to add Lottie Animation to your website. 


Adding Lottie Animation to your website is as easy as 1-2-3. You don’t need to know any code to do it, it’s completely free and jazzes up your website with very minimal time and effort.