New Animation Features from Airbnb Team

Animation features have long made technological interfaces  more usable, engaging, and interactive. However, they’ve historically been notoriously difficult to integrate into existing platforms.

“Because of this, most apps weren’t using animation—despite it being a powerful tool for communicating ideas and creating compelling user experiences,” the Airbnb team wrote in a recent blog post. “One year ago, we set out to change that.”

“Lottie” is Airbnb’s answer to making animation significantly easier. When the hospitality industry mammoth isn’t changing the nature of travel as we know it, Airbnb engineers have been staying busy with this side project, intended to assist developers create animations. Lottie, an open-source library for iOS, Android, and React Native, renders After Effects animations in real time.

“In the past, building complex animations for Android, iOs, and React apps was a difficult and lengthy process,” the Airbnb team elaborated. They explain that, prior to Lottie, engineers had to either add bulky image files for each screen size, or write a thousand lines of complicated, hard-to-maintain code.

And with the introduction of Lottie, they believe they have succeeded. This tool allows engineers to build richer animations without the overhead of re-writing them. Rather, animations can be made once and used on all platforms.  Lottie will support many After Effects features that allow for more than simple icon animations, including basic line art, character-based animations, and dynamic logo animations with multiple angles and cuts.

Airbnb has already started shipping its Lottie animations on several screens, and plans to greatly expand its usage of animations in a fun, yet useful way moving forward. But they’re far from done. The company emphasizes that they have many ideas for the future, including mapping views to Lottie animations, controlling view transitions with Lottie, and much more.

“The hardest part is picking which features to tackle next,” the post adds.

What's next, indeed?