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

Creative Director, Designer, Brand Builder, Speaker, Podcaster, Crazy One. As a designer, I have 20+ years experience creating the strategy, concepts, and designs for award-winning integrated global advertising campaigns, building multiple global Fortune 500 brands and creating innovative digital experiences. As a leader, I have 15+ years transforming agency and client-side teams using a mix of creativity, business strategy, process and political skill to create innovative, world-class work and cultures that change industries and companies. My clients have included American Airlines, W Hotels, Disney, Citi, ExxonMobil, Acura, Old Navy, Nationwide Insurance, Verizon, Subaru and many others. My work has received over 150 international awards, my app designs have been named as one of the World’s 100 Greatest Apps, Apple has featured my work in 9 keynotes, 4 TV commercials and more.

Follow me on Twitter

Copyright © 2015 Stephen Gates