Background

Meet Lottie, Airbnb's Open-Source Tool For Developer To Create Animations On Apps

Lottie logo - encrypt

Airbnb is an online marketplace and homestay network that enables people to list or rent lodging or residential properties. While it's moving inside the travel industry, it appears that it wants to assist developers to create better products.

On February 1st, 2017, Airbnb launched Lottie, an open-source tool to help developers in adding animations to native apps.

First appeared as a side project, Lottie is an iOS, Android and React Native library that uses an open-source After Effects plugin, Bodymovin, as its base. It enables the rendering of animations in real time.

"Lottie allows engineers to build richer animations without the painstaking overhead of re-writing them," wrote the team behind the project in a blog post. "With Lottie, digging through frameworks for reference, guessing durations, manually creating Bézier curves, and re-making animations with nothing more than a GIF for reference will be a thing of the past."

Lottie

Animations can be created from scratch using Lottie. And once they are done, they can be used on all platforms.

Lottie

In what appears to be in the popular 2D but eye-catchy design trend, animations have become an integral part of an app's design and user experience. Animations are seen to make static "dead" elements of design to appear alive and able to interact with.

They have been at the core of many popular app and web design that Google has also made them part of Material Design.

In its initial release, Lottie supports trim paths, dash patterns, masks, mattes, and more. It also features an optional caching mechanism to improve performance.

Lottie that is similar to other libraries such as Facebook's Keyframes, has a goal to help developers and animators to easily integrate animations into their apps in order to increase engagement. Airbnb itself has started to implement the technology into its own, including on its in-app notifications, full-frame animated illustrations and in the review flow.