Meet Lottie, an Animation Library by Airbnb

• 3 minutes READ

In a surprising announcement, Airbnb, the travel industry giant, releasedLottie, an iOS, Android, and React Native library which renders After Effects animations in real-time. The tool is based on Hernan Toririsi open-source BodyMovin extension.

lottie library by airbnb logo

We Animations!

We all love animations. The human mind is set to favor motion. Our minds are easily stimulated by animations and our attention span is geared toward interactivity. That’s why the conversion rate of an animated sign-in or buy button is superior to that of a typical rectangular shaped button.

Animations are one of the most powerful elements of a compelling user interface. If used properly, it’s a true powerhouse for the designer or developer looking to stand out from the crowd without sacrificing utility and convenience. In addition to the fact that it makes your app or website look cool and fresh, animations can allow you to build an engaging user experience.

However, it’s much more complicated to work with animation than static files, so most of the time, developers use generic animations or are limiting the use of animation to a small subset of a user-interface.

Lottie Is a Universal Animation Library

That’s all about to change thanks to Lottie. After a year of in-house development and testing, Airbnb is launching a tool that will allow designers and developers to use animations, without having to fiddle with image files for countless screen sizes or thousands of hard to maintain code lines.

No-Code Email Template Builder

With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Free Email BuilderFree Email Templates

Lottie

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, says Brandon Withrow of Airbnb.

Well, at least if you are familiar with Adobe After Effects. The piece of software we all use to add Star Wars effects to our videos is about to get a lot more useful. Design your animation in After Effects, install the BodyMovin plugin and export the animation in JSON data format. Next, get the Lottie library for your favorite platform, and you are all set.

For now, Lottie supports solids, shape layers, trim paths, alpha mattes and masks. It’s more than enough for basic line art, character-based animations or dynamic logo animations. However, the team behind Lottie is looking to expand its capabilities beyond what they’ve packed in the initial release and what similar tools are capable of. For example, unlike Facebook’s Keyframe which is limited by to a small set of After Effects features, Lootie promises to cover many more features including support for Battle Axe’s RubberHose, gradient, type and image support.

Inspired By the Community

If you are a 9 Squares, Motion Corpse or Animography member, then you are a part of an incredible collaborative effort that shaped Lottie. Have a look at J.R. Canest’s animation on Motion Corpse, at Al Boardman’s animation from the 9 Squares project or at the animated keyboard crafted with Animography’s Mobilo animated typeface, and you’ll see the surprising result of combining art with engineering.

Get Lottie

Lottie is available to download on GitHub for iOS, Android and React Native. If you’ve got some ideas or suggestions, send a hint to the Lottie team at lottie@airbnb.com.

Doru Ciobanu

Doru is an old BMW lover with a big heart.

Posts by Doru Ciobanu
🍪

We use cookies to ensure that we give you the best experience on our website. Privacy Statement.

  • I disagree
  • I agree