How to Use Lottie ? | After Effects Plug-in ‘Bodymovin’

This article is simply telling how to apply plug-in ‘Bodymovin’ for animation making step by step.

image from http://airbnb.io/lottie/

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web! — Airbnb.io

‘Bodymovin’ is a Plug-in made by Airbnb. It could render After Effects animations natively on Web, Android and iOS, and React Native. You can watch more examples on its Website.

So, Let’s start.

First Step: Download ‘Bodymovin’ from Adobe or Github.

Through Adobe, click Here. Through Github, click Here.

If download successfully, the plug-in would show on the right side while opening After Effects.

Second: Use After Effects making animation, then save files through ‘Bodymovin’ by pressing ‘Render’.

Before entering “Render”, the lighten green button. Make sure that “Allow Scripts to Write Files and Access Network” in “Preferences setting → General” has been checked .

We could choose what’s going to render by “Setting”. And don’t forget to choose a correct saving route ( that could be found ).

After all set up, pressing “Selected” and wait for the button turn fully green. Through render, the animation we made by After Effects becomes a folder with several files.

Preferences setting → General → checked “Allow Scripts to Write Files and Access Network”

Note to choose the right file by pressing ‘Selected’ and make sure your ‘Saving route’ & ‘Settings’ are correct before you press ‘Render’.

Third: Now we can see the demo in browser.

Open the demo.html file in the browser.

Since I set to render a demo, there were three types of files: .ape, .json and .html in my saved place. We could open demo.html file through the browser to see what it would like and also adjust codes in the generated file to adjust animation’s show-up place and more…

There are three files: .ape, .json, .html.

I opened the ‘demo.html’ by Atom, here are the codes it generate liked.

Simple steps end here. By now, we could tell that ‘Lottie’ has bring us many conveniences, and give designers more space to adventure the design of website or mobile UI.

I will keep trying using Lottie Library to design better user experience of my works.

Thank you for reading my article!

Please give me some ‘Applause’ ~If you found this article is not bad or useful.

References:

Using After Effects plug-in ‘Bodymovin’ for Airbnb ‘Lottie’

Lottie Animations in Xamarin Forms