Whole lotta Lottie: An open-source animation rendering tool

Lottie is built around Bodymovin library. It consists of two things: a plugin which exports animation from After Effects and a simple web player. Lottie spices up that player – helps running it from Vanilla HTML or inside React/Angular apps. Also, Lottie adds players for iOS and Android environments.

Below, I’ll present you the animation development workflow and show you a few examples of how Lottie can be used.

Workflow

So how does it work? It starts with a graphic designer. They use Adobe After Effects – one of the best tools for vector animations in my opinion. Their task is to prepare the animation.

Make sure it works on web and iOS/Android if needed. Make it pretty and efficient.

All the hard stuff. Once the graphic designer is satisfied with the animation, they use the Bodymovin plugin to export JSON file and send it to the developer.

Developer’s job is as simple as putting exported JSON into assets directory. It doesn’t matter if you are a frontend developer, work with Android or iOS, Lottie authors have prepared a player for each of these environments. Just wire it in your application to start and it will run – that simple!

Now, let’s look at some examples.

Loading spinner before the app starts

If you want an animation to display as fast as possible – you should inline Lottie player code and a few basic styles. Lottie will check if there are any data attributes in the HTML code and then, initiate animation as fast as the “page loaded” event starts. In the example below, you are giving the animation name by which you can later recover its instance. Once the application is ready, all you need to do is “to kill” the animation in order to free resources.

Example 1

Play and rewind animation

With Lottie, you can also initiate animation. The API for this task is almost as simple as in the previous example. You just have more options to tweak renderer. Also, you can keep animation reference for further usage. Lottie fires a lot of events that deal with animation lifecycle, so you can use them for your advantage.

Example 2

Animation progress follows cursor position

This example shows how great control developer has over Lottie animation. Just hover over the area to see. In the example below, animation progress follows cursor in a vertical position. Lottie is great when movement depends on user input. You can stop it any frame you need or play only some of them.

Example 3

Change animation text

You can manipulate animation by editing content of exported JSON data. This task is quite tricky – it requires reading and understanding cryptic data structure that data.json contains. But when you finally manage to find out the path to the particular text layer – you can change its content during animation instantiation. This method is considered safe because you can easily duplicate it on either web, iOS or Android environments.

Example 4

Dynamically change text

To dynamically manipulate animation, you can use the player API. In this example, you count from 0 to 100. The weak point of this method is that player API is not very well documented, although, being a developer, you know – there’s nothing impossible for you, right?

Just stay advised, various players have different APIs, that’s why the results are not easily duplicated across different environments.

Example 5

Disadvantages

Of course – Lottie, like everything, has its disadvantages. It renders an animation in a real-time, which means it can use a lot of CPU/battery resources. Badly optimised animation can cost your site FPS drop while user scrolls or performs other interactive actions.

Also, in case Bodymovin export doesn’t work correctly – it’s very difficult to figure out why is it that way.

From our experience – you may have some problems when animation includes some After Effects features which are not supported.

Short and sweet

Summing up – Lottie is a great tool. It enables the use of After Effects which eases animation creation. It makes it trivial to add that animation to your existing product. And if you plan to enhance your project with motion – Lottie is definitely a tool worth considering.

if you want to learn more about how we work and design, take a peek here.