Whole Lottie Love

Cartoon of a girl passing a note to a boy. They are sitting at school desks.

Airbnb’s Lottie Gives Animation a Home on Mobile

Animation offers greater instructive potential than illustration and is certainly more engaging than text. Animation also provides a delightful sense of polish and attention to detail in any app. We designers customarily add animation to projects as PNG sequences. The explosion of device dimensions and resolutions, combined with the relatively large file size of PNGs, argues for natively-drawn, infinitely-scalable vector animation, but this has been a big technical challenge for designers. I’ve tried Quartz Composer and PaintCode on the iOS side and found them unwieldy, and until recently neither provided a solution for Android or web (PaintCode now does). Wouldn’t it be great if we could take the instruction set for an animation in After Effects and export it for use on iOS, Android, and Web.

Enter Bodymovin & Lottie

Bodymovin is an Adobe After Effects extension that converts scalable vector animation into executable code (JSON) for display in a browser. Developers at Airbnb have written libraries for iOS, Android, and React Native to execute these same drawing instructions natively on their respective platforms. If you can create your animation using only vectors in After Effects (you can import Illustrator files into AE), you can export a single file for use across all these platforms – no more exporting multiple PNG sequences at multiple resolutions!

Advantages include:

  • Vastly smaller file size
  • A single, vector asset serves multiple screen resolutions
  • Infinite scaling
  • The same file may be used for web, iOS, Android, and React Native products
  • Animations may be loaded from a server rather than baked-in at build-time

How to Use Bodymovin & Lottie

First, you need to have After Effects installed. I suggest downloading Bodymovin from Adobe rather than Github because it will install automatically if you have a Creative Cloud license: https://creative.adobe.com/addons/products/12557#.WLmQDLGZPOQ.

Once installed, you’ll find it in the After Effects main menu under Window/Extensions/Bodymovin.

In order to render animation using Bodymovin, you’ll probably need to change one thing in your After Effects Preferences – go to Preferences/General and check “Allow Scripts to Write Files and Access Network.”

Now, just create a delightful, vector-only animation in After Effects! You’re on your own for this part, but here’s a tip: you can create your assets in Illustrator and import them. Right-click on the Illustrator files in your timeline and then select “Create Shapes from Vector Layers” to make all your shapes editable.

When your animation is complete, go to Window/Extensions and select Bodymovin to launch the export panel.

Select the animated composition(s) you want to export from the list of all compositions in your After Effects project.

Check Settings for render options. I like to export a companion HTML file for easy previewing. Choose a destination in your directory for the rendered file(s). Click Render.

You’ll be able to view the animation just by clicking on the companion HTML file in your directory.

Preview in Xcode or Android Studio Simulators

Airbnb has created a project that will allow you to test your JSON file’s fidelity and performance. Because Bodymovin development is always a little ahead of Lottie, it’s especially important to test your Lottie animation on the appropriate platform. You just need to add your JSON file into the the folder of sample animations. If you have Xcode installed, clone the Github repository lottie-iOS and double click on the file lottie-ios.xcworkspace in the Finder.

When Xcode opens, you can drag your JSON file into Examples for lottie-ios/Supporting Files/Supporting Files and run. Then choose your file from the list of examples and watch it play.

If you have Android Studio installed, clone the Github repository lottie-android https://github.com/airbnb/lottie-android then add your JSON file to LottieSample/assets in the project and run. Choose your file from the list of examples and watch it play.

Additional Resources

  1. Airbnb has some nice samples in this blog posthttp://airbnb.design/introducing-lottie
  2. View and download sample files for free at http://www.lottiefiles.com
  3. The author’s profile https://www.lottiefiles.com/davecounts

Known Issues and Workarounds in After Effects

  1. Bodymovin does not support everything one can conceivably do with vector animation in After Effects. You’ll find the features and backlog here https://github.com/bodymovin/bodymovin/issues
  2. Lottie is limited to and may not support all features supported by Bodymovin. https://github.com/airbnb/lottie-ios/issues https://github.com/bodymovin/bodymovin/issues

Do you have a project in mind? We’d love to work with you. If you’d like an opportunity to work on projects with us, check out our Careers page. We’re hiring!

Leave a Comment