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.
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.
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.
Third: Now we can see the demo in 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…
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: