Hassle-Free Animations: Lottie Takes the Grunt Work out of Animations for Native Apps and the Web
A step by step guide for how to use the open-source animation tool Lottie, and what you can do with it
Animation is one of the most powerful tools for product designers. When design elements dance, spin, jump, and move, they instantly create a more delightful experience for the user, and they can also call attention to key sections of a page, like a shopping cart or timer. Despite their effectiveness, however, the process of getting animations implemented into multiple platforms has been anything but easy. In fact, usually it’s quite time consuming.
I’ve recently discovered a tool that solves that problem: it’s called Lottie and was developed by Airbnb. 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 converts After Effects animations into JSON files through an extension called Bodymovin, and it comes with a Java Script player that helps render these animations on the web. This removes the overhead of re-writing your animations for each platform, and makes implementing complex animations into your native apps or websites extremely easy.
Better still, Lottie is free and easy to use once you set it up — though there is a set-up process you need to go through before you can get started. Simply follow the steps below and you’ll be ready to use the plugin for your next project in no time:
- Designers, download the BodyMovin plugin for After Effects — and developers, get the Lottie library for either Android, iOS or React Native.
2. Proceed to download the ZXP Installer.
3. Open the bodymovin.zxp file with the Installer. You’ll find the file in the folder build / extensions.
4. Now let’s get down to work and create an animation in After Effects. Lottie supports solids, shape layers, masks, alpha mattes, trim paths, and dash patterns — so you can pretty much do anything you like.
5. In After Effects, go to Window > Extensions > Bodymovin and open the Bodymovin plugin.
6. Then select a Comp by clicking on the small circle.
7. Now click on the Overflow menu to select a destination for your file.
8. Click on the Settings icon to select one of the following options, depending on what you need. I usually use “Glyphs” to convert fonts to shapes or “Standalone” to export animations and players bundled into a single file.
9. Finally, click Render — and voila, you made it!
10. Once rendered, you’ll get a JSON file that you can hand off to your developers. The best part is that it can be used for the web, iOS, or Android.
You might be excited to use Lottie at this point but what if you don’t know how to animate or are just too busy? If that’s the case, check out the lottiefiles website with pre-built animations to download as JSON files.
After all, animations shouldn’t just be a delight for users, they should be fun experiences for the designer to create as well.
I found that the work always shows if you had a good time designing it or not, which is why Lottie is a great tool. It solves the hard, nitty-gritty technical problems of the process, allowing you to focus on playing around and creating your best work.
