Lottie & After effects ♕
Designers are now finally able to make <devs-friendly> animations.
Based on my own experience building animations I’ve felt stuck for a long time with an issue, as a Digital Product Designer working on Mobile Products I’ve lacked of a tool to help me build complex animations for Android, iOS, and React Native apps as well as microinteractions.
Thanks to the airbnb design team we now have the solution we were looking for since a really long time to build solid animations without the need of adding bulky image files for each screen size or write a thousand lines of brittle, hard-to-maintain code.
Now my wish has come true somehow, designers can now do it all and deliver a simple HTML or JSON file ready to be implemented and 100% faithful to our designs.
How to use Lottie?
It’s important to clarify that Lottie only works if you use After Effects to produce your animations.
This open-source animation tool is based on Hernan Torrisi — BodyMovin extension.
First all you have to do is to download here the After Effects plug in for Lottie, there are quite a few methods to do this as listed on BodyMovin Github page but here is the easiest of them all:
- Download the Zip file from the link
- Extract content and get the .zxp file from ‘/build/extension
3. Download and Install ZXP installer from aescripts.com and run the extension file.
Now that you have everything you need it’s time you run After Effects.
- Open your AE project and select the bodymovin extension from Window > Extensions > bodymovin
2. 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 (Composition 1 in the example below shown). Select a Destination Folder and then click Render (Green CTA in Bodymoving window).
3. Look for the exported json file in the Destination Folder
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.
I’m sure that you are now as excited as I was when I first heard these news so I’ve uploaded a really easy After Effects animation demo for you to download and try this incredible open source tool following this guide before you start producing and rendering your own animations.
Are these great news or what? Try it out and let those animations start rolling!
Resources and other related interesting links:
Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders…airbnb.design
We have all heard of (or even used) Airbnb at some point - a giant that has dominated and revolutionized the travel…www.pixeldrop.in