Lottie Animation Workflow

As a web developer, I have always found the relationship between development and design to be a lot of give-and-take. From a UX/UI Designer’s point of view, it’s easy to point out the value of having crisp, clean animations in a product feature. As a developer, it’s easy to point out how much time the animation will add to the feature’s scope. Hand coding css or canvas animations is tedious and cumbersome and it distracts from other core functionality.

Situations like this is when Lottie looked very attractive. While a lot of developers/designers are familiar with Lottie and what it can do, I thought I’d take a second to go over the workflow for making them actually happen.

Lottie, in short, is an animation library created by AirBnb Design that utilizes an Adobe After Effects plugin called Bodymovin that exports After Effects animations as json data that Lottie then converts to the appropriate native animation for Web, iOS and Android.

I was always interested in Lottie but never actually gave it a shot, so I decided to download After Effects and try the whole flow for myself to see how feasible/useful it can be and here’s how I did it.

Part One: Making and Exporting the Animation

For this simple example I’ll be making a loading animation that uses a generic spiral logo that animates through the points of a line.

1. File > New Project
2. Composition > New Composition
3. For this composition I am making a 100x100 size with a 2 second duration:

4. Using the pen tool with a transparent fill and 10px white stroke I will draw the spiral logo:

5. With the shape layer selected, click the Contents / Add button and choose “Trim Paths”:

6. Now expand the options for Trim Paths 1:

7. Click the Clock icon next to Start and set the value to 100%. (See gif below for this process)

8. Use the blue arrow on the timeline to scrub to 1 second into the timeline and set the start value back to 0%

9. Finally, scrub to the very end of the 2 second timeline and set the start value back to 100%.

Check out this gif for a visual

10: You should end up with something like this:

Export the Animation

1. To export the animation we’ll need to have Bodymovin installed. You can find the installation steps on their Github Page. I found the easiest way to be just using the Adobe store to install it. (don’t worry, it’s free)
2. Now that Bodymovin is installed, choose Windows > Extensions > Bodymovin option in After Effects.
3. Select the comp 1 composition and give it an output path. Default settings will work for this example. Then press Render.

4. Now we have successfully exported a json animation that we can pass into Lottie.

Stay tuned for Part 2 where I will go through using the animations in the code of a React Native application.