Using Lottie

Tutorials

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.

01_lottie-bodymovin-visual

Intro

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.

02_image_preview

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)

03_image_preview

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

04_image_preview

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

05_image_preview

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

NEXT ARTICLE
Web Typography Tips
Tutorials
More treasures ahead
E95CC837-0713-48B5-BAA1-FC9DD4FA6399Arrrrr!
A true explorer like you is always in search of new quests and gems. How about we send you one every month?
TOP