Back to all blogposts

Whole lotta Lottie: An open-source animation rendering tool

Łukasz Pietrek

Łukasz Pietrek

Frotend Developer

I’d like to introduce you to Lottie. It’s an open-source library that tries to solve one (but significant) problem – how to add some life to your product, using motion effects and then deliver high quality, complex animations with multiple target environments. Yes, you’re right – one animation to be run in a browser or a native Android/iOS app.

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.

See also: How to make a React Native app?

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.

Need help with developing your project? We've got the people, the tools, and the technology 🚀

Łukasz is just one of many super experienced Frotend Developer we’ve got onboard. If you wish to meet our talented bunch and discuss your project idea with them, book a free, one-hour consultation. Yup, really, no strings attached.

Interviews
CTO vs Status Quo

Find the exact rules Tech Managers used to organize IT & deliver solutions the Board praised.

Read here

The Software House is promoting EU projects and driving innovation with the support of EU funds

What would you like to do?

    Your personal data will be processed in order to handle your question, and their administrator will be The Software House sp. z o.o. with its registered office in Gliwice. Other information regarding the processing of personal data, including information on your rights, can be found in our Privacy Policy.

    This site is protected by reCAPTCHA and the Google
    Privacy Policy and Terms of Service apply.

    We regard the TSH team as co-founders in our business. The entire team from The Software House has invested an incredible amount of time to truly understand our business, our users and their needs.

    Eyass Shakrah

    Co-Founder of Pet Media Group

    Thanks

    Thank you for your inquiry!

    We'll be back to you shortly to discuss your needs in more detail.