To Top

Lottie, a native app animation tool from AirBnB Design

Yesterday AirBnb Design had a very interesting annoucement when they introduced Lottie which is an iOS, Android, and React Native library that renders After Effects animations in real time. That is a fancy way of saying that it allows native apps to use animations as easily as they use static assets which is a huge thing to help improve the polish and personality of your app design. It currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. AirBnB Deisgn has said that they will be adding new features on a regular basis. I also love that you can manipulate your animation any way you want including going forward, backward, and — most importantly — you can program your animation to respond to any interaction.

The technical under the hood process is that Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin. The extension is bundled with a JavaScript player that can render the animations on the web. Since February of 2015, Bodymovin’s creator, Hernan Torrisi, has built a solid foundation by adding features and improvements to the plugin on a monthly basis.

The advtange of working this way is that you get very smooth, complex animation with small file sizes because it will bundle vector animations within your app without having to worry about multiple dimensions or large file sizes. It is something I am looking forward to playing around with more and I love seeing in-house design teams  You can read all about Lottie and the behind the scenes work that went into making it here.

You must be logged in to post a comment Login

More in Great resource