Using Lottie


Using Lottie Cover@2x

How to export animations using Lottie

Creating little fantastic animations that will take your app to the next level and make your developers happy.



Basically, Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. Lottie is named after a German film director Lotte Reiniger.

Bodymovin is a plugin for After Effects that can export animation in JSON data format for Lottie to use.


First things first

— download and install the Bodymovin plugin

— open AE and check if the plugin is in its place (Window → Extensions → Bodymovin)

— download Lottie library: Android, iOS, React Native (this is more for developers)


When animating, keep this in mind

— if you’re importing a .ai file, set its kind as Composition, and for Footage Dimensions select Layer Size

— after that, make sure that all .ai items are converted into shape layers, otherwise things could get complicated or non-functional. You can do that by selecting those items, right clicking them and then Creating Shapes from Vector layer

— also, you can use only shape effects so it’s sort of limited what you can and can’t do with Lottie, but check out LottieFiles for various possibilities


Easy stuff (export)

— select Window → Extensions → Bodymovin

— Under Settings, select Demo to preview your animation; you’ll get a local HTML file that you can review in a browser

— Also, select Glyphs to get your JSON file which you can forward to your developer


Pros and cons

— easy for implementation
— works for all platforms
— great for simple animations, but not always for complex ones (you can not use expressions in AE)
— the text has to be outlined
— you can’t edit the JSON file after its exported; if you want to change something, you have to edit it in AE and then export it again

Web Typography Tips
More treasures ahead
A true explorer like you is always in search of new quests and gems. How about we send you one every month?
Ahh, the cookie banner 😩. The first of website frictions, the breaker of UX, mother of privacy lawsuits. State your preference or
manage cookies.