Introducing Lottie: Airbnb's tool for adding animations to native apps

I've always been quite proud of my ability to acquire at least a moderate mastery of most software (I can use both vi and emacs!), but I never managed this with AfterEffects. I don't know what it was, but I always seemed to end up in some interminable state that I could never get back out of without quitting the whole damn thing, or I could never make the timeline behave itself (I never had this problem with Flash), or... it was just endless misery for me.

I very much admire people who are adept with it, and sometimes when I watch the opening sequences in films, or certain types of adverts on television, I can even imagine how they might have achieved it with AE - but for me it was a great relief when I never had to use the damn thing again.

(I spent about a year maintaining a proprietary ActionScript library that would render AfterEffects animations - not dissimilar to Lottie, in fact, except almost certainly a whole lot worse, especially the bits I wrote given that there are probably some horses who understand AE better than I did.)

After Effects isn't a video manipulation tool. Video manipulation is one of its capabilities, it is also capable of motion graphics and animating vector shapes. This library works off the vector shape side of after effects.

I've had good luck with videocopilot.net, though it's more centered on vfx than motion graphics.

If anything it reminds me of flash.

It's a player for vector-based scriptable animations after all.

http://www.schoolofmotion.com/ is fantastic as well

Actually, Flash has a similar model for its HTML 5 export (I havent had time to look into Lottie though to see how similar it is).

The performance does definitely depend on the complexity of the animation. Small icons like the hamburger menu, wish list heart, hamburger arrow, etc run at 60fps. Even the main Lottie logo (http://airbnb.design/lottie/) that has pretty complex trim paths renders at ~60fps.

Masks and mattes are the feature that incur the largest performance hit because they require allocating a bitmap (8 bit for mattes and 32 bit for masks), rendering to them, then drawing them back to the canvas.

If there are no masks or mattes, the animation is drawn directly to the canvas and no bitmap allocations are necessary.

If there is a matte, an 8 bit bitmap will be created and if there is a mask, a 32 bit bitmap will be created and drawn to.

An animation can only be at one stage at a time but you can easily create multiple animations. If you want to have several copies of the same animation, there is a composition caching option that will prevent you from having to deserialize and parse the composition again.

I read through the blog post and skimmed the project site, but it never occurred to me to check the README. Thanks!

We also have a Design Tools team at Airbnb (source: I’m on it. hi.). Whilst Lottie was developed outside of our team, I think it’s representative of the kinds of projects we love.

There’s plenty of stuff we haven’t shown off yet, but I’d hope that almost everything will at least be written about, but ideally open sourced too.

My team is focused on building tooling every day. We think of our work in three buckets: - Integrated Toolchain — next-gen design software built around our Design System[1] (and componentized systems design as a whole), with a view to making our design & eng processes radically more efficient. Mostly proactive projects born from observing the cracks across the org. We just work on it; our experience is that external design software companies have little awareness of the challenges we actually face. Facebook's design tools team is a big inspiration here - they're doing really exciting things.

- Information Systems — there’s lots of knowledge spread out across the design org & Airbnb as a whole, and we like collaborating with other teams to solve their workflow needs. This is typically more difficult to release because it’s baked into internal systems. Airshots[2] is an example of this, and we’ll be sharing another system soon.

- Experiments — as hybrid designer-engineers we tend to get pulled into different prototyping projects across the org, typically for new initiatives with exotic tech that we can’t talk about just yet.

Regarding ‘releasing’ & writing about these things — they’re important for us as a design brand, and we have the full backing (& encouragement) of our design leadership to share this stuff.

As previously noted, we have a pretty legit open source policy and it was one of the reasons I joined.

Again I want to stress that Lottie isn’t one of our projects, but I hope that helps!

[1] http://airbnb.design/building-a-visual-language/

[2] http://airbnb.design/airshots-discovering-a-workflow-for-app...

Great questions! 1. Lottie started as a ios hackathon project with our motion designer and me. The idea was to just try and get something out of after effect and simply moving on screen. We ended up getting quite a bit further and wanted to keep working on it. For a while we were working on it in our spare time. Airbnb is a great place for open source. Open sourcing code is encouraged by the company. So we made a roadmap of what we wantsd to accomplish, a list of benefits and gains, along with a wish list of future possibilities for lottie and took it to our managers. Basically we pitched it. We also looped in a few product teams and found a handful of small places to use lottie. We also brought on an Abdroid engineer. After this we got approval to move forward with lottie in a 30/70 type fashion. Over all we spent nearly a year, from hackathin to release, on Lottie. We checked out what others were working on and reached out to bodymovin and squall. I cant remember if we reached out to adobe.

Actually this is perfectly ON-TOPIC :)

Some of this come from a mixture of architectures, and the fact we are using Swift+Objc, or just large asset files. Its something we are actively working on fixing. One of the things we did to make it better was build Lottie! Now we can replace PNG sequences and Gifs that can be several megabytes with simple JSON animation files which measure in the low kilobytes. One such example is the diamond animation found on our listing pages. To include this in the project before Lottie we had to package a PNG sequence for each screen resolution(@1x @2x @3x) with alpha these sequences would add around 4-5 megabytes to our app for a single, small, animation. With Lottie we package a single JSON file which measures around 2 kilobytes!

You can download the IPA itself and check (they're just zips). Spoiler alert is that the binary (unzipped) is 130mb, but I think this contains multiple architectures.

ahh I see - I should have looked at the demo gifs!

It can already be used in swift :)

I have updated the readme with examples :)

Interesting. Supporting more AE features is a good plus. Can you talk more about the other goals that are different?

Huge if true :D

Thank you for porting this to the web. Right now we use a combination of react-motion, GSAP, D3 interpolation and other dark magic. A strong contender in this space is most welcome, especially if it's at a higher abstraction level.

What are you building with RN at airbnb? What has been your experience? If you were starting a mobile company now, would you start with RN ?

Ahh ok, thanks for the response. JS animations are one of the biggest pain points I have had with RN so far, especially for all of the old Android devices out there.

Is your navigation lib taking advantage of this? Just wondering, seeing as how React Navigation uses the Animated API

Shape animation is the term I was looking for! Thanks.