Using Lottie
Tutorials
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.
— 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)
— 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
— 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
— 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