Meet Lottie, an Animation Library by Airbnb

  •  3 Comments

In a surprising announcement, Airbnb, the travel industry giant, released Lottie, 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.

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.

Newsletter

3 Comments
  1. Deyge Falanai Feb 8, 12:17 am

    I’ve tried using Lottie a few times with a Dev that I work with. Admittedly, I’m not an AE pro, but when I exported we got a few mixed results. Like the trim paths beggings/endings (which were animated) were off, one of the animations didn’t work at all. Does anybody know what all animation properties are supported? And what practices you should avoid (like nesting compositions).

    • Riaan Myburgh Feb 13, 11:48 am

      Hey Deyge,
      Bodymovin effectively converts your AE animation to svg graphics, that being said svg has its own inherent limitations.. I don’t know if there is any specific reference library that shows what animation style does and doesnt work. I think a VERY recent update solves some trim path issues – but the issue may be caused by something else effecting on the layer that is trimming? for example – I animated a trim paths, and then animated stroke width and it glitched out bad. The trim worked fine but stroke width messed it up. I think trial and error – and avoid using effects as much as possible. Try also use only shape layers- even if you have to convert all your ai files.

  2. Zaid Mar 20, 3:37 pm

    How can I integrate Lottie in my Android Studio?

Leave a Reply

*
* Minimum length: 20 characters