Murat Mutlu

Lottie by Airbnb - Easily add high-quality animation to any native app

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Add a comment

Replies

Best
Gabriel Lewis
Airbnb continues to set the standard for great design 👌
Kunal Bhatia
How does this compare to Keyframes, which Facebook released in November? https://code.facebook.com/posts/...
Kunal Bhatia
Seems like Airbnb is focused on supporting more AE features (things like solids, masks, dotted lines, trim paths, etc.). Nicely done.
Gabriel Peal
@kunalslab Keyframes was built primarily for reactions and includes the After Effects feature set that they needed for reactions. We set out to support as much of After Effects as possible. Currently Lottie supports trim paths, dash patterns, masks, mattes, more time interpolations, different kinds of shapes, and a few things that Keyframes doesn't. Keyframes currently supports gradients and Lottie doesn't. However, that's something we're looking at adding. We also have a laundry list of After Effects features that we'd like to support going forward. Both projects were started independently and in parallel. We started ours in 2015 and Facebook started to build Reactions. We think it's awesome that Facebook saw the same need as us and we're looking forward to learning from each other's discoveries and collaborating to make the entire ecosystem better. (I wrote the Android library)
Tyler Morgan
@gpeal8 How soon will you start supporting gradients? BTW...we are super excited to use this. We just started to use keyframes and have felt limited in our animations.
Gabriel Peal
@tymorgan11 We're going to try to gauge interest to know what to prioritize but if gradients are high on your list, we'll definitely make a note of that!
Murat Mutlu
Looks rad, more info here: http://airbnb.design/introducing... "In the past, building complex animations for Android, iOS, and React Native apps was a difficult and lengthy process. You either had to add bulky image files for each screen size or write a thousand lines of brittle, hard-to-maintain code. Because of this, most apps weren’t using animation — despite it being a powerful tool for communicating ideas and creating compelling user experiences. One year ago, we set out to change that. "
Sterling Bourne
The animations all look very Airbnb'ish, as one would expect. I wonder what sort of variety the library can offer...
Gabriel Peal
@bb8orr2d2 We currently support a decent number of After Effects features (listed on the github page). With those features, you can do anything you can dream of :) Here are some animations from the community rendered with Lottie:
Mark Justin Harvey
This is great for stand alone animations but there is still a disconnect to interaction. This is where Facebook Origami Studio really fills the void. Looking forward to seeing more tools to fill this space
Gabriel Peal
@markjharvey Great point. We've been experimenting with using Lottie for view animations. The iOS sample app has a view controller transition animation and the Android sample app has an example of an interactive app tutorial pager using Lottie. We also played around with attaching Lottie to a view to create a view animation but had trouble locking down an API that worked (relative vs absolute values for things like translation and scale). We're all ears for suggestions for improvements!
Gabriel Peal
@markjharvey In addition, you can manually control the progress of the animation to do some creative things. The app intro view pager uses the current scroll position to modify the progress of the animation for example. You could also have a segmented animation that animates between different ranges of the animation or in response to user gestures or behaviors.
André J
@gpeal8 @markjharvey Is it possible to manipulate the animation it with "live" interaction?
Gabriel Peal
@eonpilot @markjharvey Yes definitely. You can manually set the progress from 0 to 1 based on whatever heuristics you want. We're doing that in the Android sample app to demo a view pager in which the swiping is tied to the animation: https://github.com/airbnb/lottie...
Ghost Kitty
Comment Deleted
Brad Bitler
so awesome!!
Donna Kennett
This looks cool @tdrewk ...
N8
Airbnb design rocks!
Sergey Pirogov
It's fkng amazing! I've been waiting for such tool for years! Think, it can really change the mobile industry designs. Because previously it was really a pain to integrate cool animations inside app.
john keats
49s is the name of the company that organizes the UK 49s lottery. The 49s office is located in London and is played in UK and in South Africa. The site is being updated continuously with the latest UK49s Teatime Results and check for Today’s Teatime Results above. Check all the UK49 previous Teatime Results here. If you are in South Africa, the UK, and anywhere else and you think you need to write to us, you can do this easily on Contact Us page here. We’ll get back to you within 72 hours and feel free to subscribe to 49’ers group through above-right section of our page. Our Policy and Blog included. https://boxworm.co.za/
G G
Interesting how After Effects is used with this service and not Motion. I guess Apple Motion is being left by the way side and soon Apple will abandon it, shame. Writing has been on the wall I suppose.
G G
Will this work with HTML5 apps?
Gabriel Peal
@androidlove Bodymovin has a web player and renders the same json files as Lottie.
Daniel Nordmark
Would be really nice to see Lottie ported to Xamarin as well!
Gabriel Peal
@danielnordmark Fyi, Xamarin bindings have been built :) https://github.com/martijn00/Lot...
Francisco Varisco
It's awesome. I personally have used it and it works really well. For those who want to test it with React Native to build an app for iOS and Android I have created a theme to get started with animations... You can even change the speed of the animations :) Check it out -> http://animations.reactcentral.com/
Bryce Daniel
@therealsalih dude, this is so dope! But then,I expected nothing less from you 🤘🏽
Michael Boswell
This makes sooo much freaking sense. This is so overdue for the design community. Thank you!
Kal Freese
Really nice 👌🏻
Kim Døfler
This is brilliant 🙌