What Are Lottie Animations & Why Use Them?

Adding subtle animations to your website can be a great way of adding more visual interest and polish. This has to be balanced with performance and the impact that any animation files will have on the speed of your website.

This is where Lottie comes in.

Lottie is an open-source animation file format which is based in JSON. Lottie files are much smaller, lighter and faster than more traditional animation file types like GIFs and can be interactive. They are also vectorial, and so as with other vector-based graphics, are not constrained by screen resolution. As a result, they are quickly gaining popularity in web design and development.

What Is JSON?

First things first, let’s quickly explain what JSON is.

JSON (JavaScript Object Notation) is a text-based structured data format for the storage and transfer of data. Initially created to communicate between JavaScript clients and web servers, its use spread to other programming languages and purposes due to its simplicity and flexibility. As it’s in a text format, rather than binary, it’s readable by humans, and so much easier to use.

Where Did Lottie Come From?

Just a quick potted history for context.

Lottie (nameless at the time) first appeared back in 2015 in an After Effects plugin created by Hernan Torrisi. The plugin creates a JSON version of an animation, which can then be rendered for web browsers using a JavaScript player he also released.

Then sometime later, the folk at Airbnb helped to develop libraries for rendering the Lottie file type across Android and iOS, and gifted it its name. Christened as Lottie as a homage to Lotte Reiniger, an important figure and pioneer in silhouette animation.

Since then libraries have been created and support added for numerous platforms. Then in 2020, the .lottie file format was created, which can combine and compress a range of Lottie files along with the support resources they require into one easy-to-use file.

There is an active GitHub LottieFiles community ensuring that the format will continue to be developed and innovated with.

Why Use Lottie Files?

There are a number of ways to add animations to your website, but as we touched on briefly, Lottie files are significantly lighter than other formats like GIF and PNG. According to the LottieFiles website, they are as much as 600% smaller.

You could think of them as the animation equivalent to next-generation image formats like WebP. Smaller and faster, and so a helpful tool when trying to keep websites light and fast loading.

Added to this, Lottie files can make adding animations in web design simpler. Not only can they be rendered natively across desktop and mobile browsers, but due to their vectorial nature, they are naturally scalable across screen sizes and resolutions, without loss of quality.

Sourcing Lottie Animations

Pre-made Lottie Files

There are lots of libraries out there with free and purchasable ready-to-go Lottie files out there. Here are just a few great sources to check out:

• LottieFiles – the home of all things Lottie.
• IconScout – a library of over 60,000 files and constantly updated.
• Creattie – a good range of free and premium options on offer.
• Motion Elements – options to buy on demand, with credits, or a subscription model.
• Lordicon – perfect for animated icons galore.
• LottieFolder – plenty of simple animated icons and graphics.

Having Custom Lottie Files Made

Of course, if you need something more custom created, there are plenty of ways to find designers and animators to create custom Lottie animations for you.

If you already have preferred animators and designers you like to work with, ask them if Lottie is something that they work with.

Many of the library sites have sections where you can hire animators:

• LottieFiles
• IconScout

You can of course always try freelancer sites too:

• Upwork
• Fiverr

Make Your Own Lottie Files

If you have animation experience you may want to create your own Lottie animation files. Luckily there’s a world of tutorials, tools and useful information out there to help you create, edit and implement them for web, mobile and other platforms.

Adobe After Effects

Currently, if you want to create new Lottie animations from scratch you will need to use Adobe After Effects. Although there are platforms in development that aim to change this.

Bodymovin

You will also need the Bodymovin plugin for After Effects, which allows you to export your animation as JSON.

LottieFiles

A great place to start is the LottieFiles blog. There is a huge wealth of information there to help you get to grips with creating your own animations.

For getting to grips with creating animations there are lots of integrations available to make creating them easier, and LottieFiles also has its own platform to get your animations tested, optimised and implemented.

Airbnb.io

There is an entire Lottie section on the site, with information on creating and implementing Lottie across platforms. There are useful videos and links to posts on using Lottie files.

LottieLab

LottieLab is in the process of creating a platform for Lottie creation and editing without the need for Adobe After Effects.

Lottie & WordPress

Although WordPress is yet to support Lottie files natively, it is very easy to add them to a WordPress website.

The method will depend on what editor you’re using to create your pages, or how your website is built. But if you have a WordPress Development partner, they will be able to implement Lottie regardless of the editor, or if you have custom-built or hard-coded pages.

However, here’s how to add Lottie with some of the most popular WordPress page builders out there.

Gutenberg & Lottie

For those using WordPress’s default Gutenberg editor as their page builder, there is a Lottie block plugin available.

This plugin allows you to add your own Lottie animations and provides access to thousands of free readymade Lottie animation files, along with the ability to customise how they behave.

Elementor & Lottie

If you use Elementor as your page builder in WordPress, they already support Lottie and provide a handy element you can drag and drop into your pages.

Then all you have to do is add your Lottie animation either directly as an upload from your computer, or from an external URL. Then you can customise settings for how you want your animation to behave.

Brizy & Lottie

Brizy is one of the newer page builders to the market, and like Elementor it already supports Lottie animations. Brizy has a Lottie element available for you to drop straight into your pages, which you can add an animation to via an external URL.

You also have some basic settings for size, speed, lopping or autoplay.

Divi & Lottie

Divi is yet to add support for Lottie directly, so in order to add a Lottie animation to your Divi-built pages, you will need to use a plugin.

Divi Supreme allows you to add several modules to Divi, including a Lottie module. Once activated you. will be able to add this module to your Divi pages and add Lottie files as uploads from your computer or by external URL.

If you’d like help adding animations or transitions to your WordPress website, whether with Lottie files or not, we can help. Our team have been designing and developing websites since 2003, with a focus on creating engaging user experiences.

Impact Media® has been crafting award-winning websites since 2003.

If you’d like to learn more about our website redesign approach and if it could be a good fit for your organisation, drop us an email or give James a call.