Hey everyone! I’m going to explain how useful could be Lottie for web animations in After effects;
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.
Lottie only works if you use After Effects to produce your animations and this open-source animation tool is based on BodyMovin extension.
How to install Lottie
- First of all you need to download the After Effects plug in for Lottie, there are quite a few methods to do this as listed on BodyMovin Github page.
- Extract content and get the .zxp file from ‘/build/extension
- Download and Install ZXP installer from aescripts.com and run the extension file.
How to use Lottie
To start we need to have a small animation done and the export will consist on the following steps:
- Open your AE project and select the bodymovin extension from Window > Extensions > bodymovin
- 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. Select a Destination Folder and then click Render (Green button in Bodymoving window).
- 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.
And now, let’s talk about why Lottie?
Flexible After Effects features
They currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. And we’ll be adding new features on a regular basis.
Manipulate your animation any way you like
You can go forward, backward, and, most importantly, you can program your animation to respond to any interaction.
Small file sizes
Bundle vector animations within your app without having to worry about multiple dimensions or large file sizes. Alternatively, you can decouple animation files from your app’s code entirely by loading them from a JSON API.