Lottie & After effects ♕

Designers are now finally able to make <devs-friendly> animations.

Based on my own experience building animations I’ve felt stuck for a long time with an issue, as a Digital Product Designer working on Mobile Products I’ve lacked of a tool to help me build complex animations for Android, iOS, and React Native apps as well as microinteractions.

Thanks to the airbnb design team we now have the solution we were looking for since a really long time to build solid animations without the need of adding bulky image files for each screen size or write a thousand lines of brittle, hard-to-maintain code.

Now my wish has come true somehow, designers can now do it all and deliver a simple HTML or JSON file ready to be implemented and 100% faithful to our designs.

“Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets. Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin. The extension is bundled with a JavaScript player that can render the animations on the web.”

How to use Lottie?

It’s important to clarify that Lottie only works if you use After Effects to produce your animations.

This open-source animation tool is based on Hernan Torrisi — BodyMovin extension.

STEP 1

First all you have to do is to download here the After Effects plug in for Lottie, there are quite a few methods to do this as listed on BodyMovin Github page but here is the easiest of them all:

1. Download the Zip file from the link
2. Extract content and get the .zxp file from ‘/build/extension

=> Run bodymovin.zxp

3. Download and Install ZXP installer from aescripts.com and run the extension file.

ZXP Installer

STEP 2

Now that you have everything you need it’s time you run After Effects.

1. Open your AE project and select the bodymovin extension from Window > Extensions > bodymovin

Bodymovin Extension

2. A panel will open with a Compositions tab. On the Compositions tab, click Refresh to get a list of all you project Comps. Select the composition you want to export (Composition 1 in the example below shown). Select a Destination Folder and then click Render (Green CTA in Bodymoving window).

Render with Bodymovin

3. Look for the exported json file in the Destination Folder

STEP 3

As soon as the animation is rendered, you can immediately load it up on your app. Depending on the platform of your choice, download the Lottie Library for iOS, Android or React Native and install based on the platform.

Since the animation is a JSON file they are quite small in size therefore reducing the load on your apps. The Animations can be played, resized, looped, sped up, slowed down, and even trigger based on interactions.

I’m sure that you are now as excited as I was when I first heard these news so I’ve uploaded a really easy After Effects animation demo for you to download and try this incredible open source tool following this guide before you start producing and rendering your own animations.

DEMO ANIMATION

DEMO PROJECT IN ANDROID STUDIO

Are these great news or what? Try it out and let those animations start rolling!

Resources and other related interesting links:

Lottie

App Animations with Lottie by Airbnb

Native app animations in Xcode using Sketch, After Effects and Lottie from Airbnb.