Get started with Lottie animation

Hi there, it's freaking cool when you design custom icons and animate them. But the real deal happens when you hand it over to a developer. The transition should be clean and efficient, wonder how? That is exactly what we are going to look into. Let's start digging.

So we need two things, a ZXP installer and a Bodymovin plugin for aftereffects that helps to convert the animation to a .json file. So go ahead and download the ZXP installer http://aescripts.com/learn/zxp-installer/

And then download the Bodymovin plugin for Aftereffects https://github.com/airbnb/lottie-web/tree/master/build/extension

Now open the ZXP installer and you can either drag and drop the bodymovin file to the ZXP installer or you can open the plugin from the file menu.

That's it done, head to aftereffects and open the menu “Window >Extensions” you should see “Bodymovin".

Now that the whole installation process is done, go ahead and create a dope animation. Hold your horses, before that there are few things which you should keep in mind, there are lot of aftereffects features which will not get exported with the animation, for eg. the effects in the “effects and presets ” tab, drop shadow and lot more. Head to the below link and check all the features which are supported and which are not. https://airbnb.io/lottie/#/supported-features

So once you are done with the animation, go to the bodymovin plugin and select the file destination, and hit render. voila, you have successfully exported your animation as a .json file.

Make sure you check the file is working and you are not using any unsupported effects for the animation. You can do this in two ways either upload your file to https://lottiefiles.com/preview or download the Lottie app from the Google play store or the Lottie Preview app from the App store. Use the app to scan the QR code which shows up on the website once you upload your file.

That's it, happy animating…

Peace out.✌