Using the After Effects plug-in 'Bodymovin' for Airbnb's 'Lottie'

Airbnb released a stunning open-source library called Lottie a while back. Once a designer makes an animation in After Effects and exports it as a .json file via the Bodymovin plug-in, developers can use Lottie by Airbnb to play it on web or mobile.

Let me walk you through how to use it. It's pretty cool to ship animations created in After Effects on web, iOS, Android, and React Native applications without GIFs-just the code Bodymovin exports. SVG!

Building heavy animation directly on web or mobile is complex, and GIFs are too large for slow connections. With Bodymovin you don't need to write CoffeeScript for Framer (Mac-only), and you don't need to explain to a developer how the animation should "buzz here for X seconds and move N pixels to…"

The first thing to do is install the plug-in. Download it from GitHub or Adobe Add-ons. Once installed, you should see Bodymovin inside After Effects.

Next, build an animation in After Effects so you can export it to .json. For this tutorial I made a simple star icon out of shape layers-keeping it intentionally simple, though Bodymovin can export much more complex compositions.

Once you're done, click the Refresh button in the Bodymovin tab and your composition will appear. Before rendering, set the Destination for the export and choose your Render Settings.

Check Glyphs if your animation contains text, and Hidden if you want to export hidden layers. I checked Demo to get an HTML preview file. Save the settings and render.

Brackets!

After rendering, you'll get a .json file containing the animation as code. If you checked Demo, you'll also get an HTML preview file. Open it and tweak the CSS to position and scale the animation as you like.

All done. You can find plenty of example files on LottieFiles or the Bodymovin GitHub. Now download Bodymovin, open After Effects, build something cool, and export it as SVG. Thanks for reading!