Connect
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 Instagram

 Nice collaboration between @joeiurato and @rubin415 at @wellingcourtmuralproject #wellingtoncourtmurals #wellingtoncourtmuralproject #streetartnyc #streetartofficial #streetartist #streetart  Kraken mural from @beaustanton at @thebushwickcollective #streetartnyc #streetartofficial #streetartist #streetart #thebushwickcollective #bushwickstreetart #bushwickcollective  You can't miss the color and patterns of @davidjunelouf #bushwickcollective #bushwickstreetart #streetartnyc #streetartofficial #streetartist #streetart  I need to start collecting @findac because I LOVE his work every time I see it. #bushwickstreetart #streetartist #streetartofficial #streetartnyc #streetart #findac #bushwickstreetart #bushwickcollective  One more flashback to the @dface_official egg original hiding spot in the Lower East Side #dface #bigegghunt #bigegghuntny #streetart #streetartist #streetartofficial #streetartnyc
 Love this piece from Kaffeine at @thebushwickcollective #streetartnyc #streetartofficial #streetartist #streetart #thebushwickcollective #bushwickstreetart #bushwickcollective  Colorful piece from @joeiurato #streetartnyc #streetartofficial #streetartist #streetart #bushwickstreetart #bushwickcollective #thebushwickcollective #joeiurato  Also loved the work I found from @li_hill #streetart #streetartist #streetartofficial #streetartnyc #bushwickstreetart #bushwickcollective  Spent the morning @thebushwickcollective seeing what was new and good. The massive @dface_official was an easy place to start. #dface #streerart #streetartist #streetartnyc #bushwickstreetart #bushwickcollective  Flashback to the @dface_official #bigegghunt egg on display at Rockefeller Center in NYC. #dface #bigegghuntny #streetart #streetartist #streetartofficial #streetartnyc #easter #easteregg
 One more part of the Kraken mural from @beaustanton at @thebushwickcollective #streetartnyc #streetartofficial #streetartist #streetart #thebushwickcollective #bushwickstreetart #bushwickcollective  Also went to Queens today to check out the @wellingcourtmuralproject which is small but has some great work from artists like @eelcovirus #streetart #streetartist #streetartofficial #streetartnyc #wellingtoncourtmuralproject #wellingtoncourtmurals  One of my two favorite new artists I saw today was @owendippie with his 'Radiant Madonna' with the Virgin Mary holding holding a Keith Haring child suggesting Hering is god. #bushwickcollective #streetartnyc #streetartofficial #streetartist #streetart #owendippie #owendippieart  Thanks to @invaderwashere for the postcard set from his show at @museeenherbe - I think this was literally the only thing I didn't have from the show. #invader #invaderwalls #spaceinvader #spaceinvaderparis #streerart #streetartist #streetartofficial  Happy Easter with our @dface_official egg from the NYC #bigegghunt - it's always great to see all the posts and love this piece gets today. #dface #streetart #streetartist #streetartofficial #streetartnyc #easter #easteregg #bigegghuntnyc #bigegghuntny

Follow me on Twitter

Copyright © 2015 Stephen Gates