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.
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.
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.