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

https://medium.com/airbnb-engineering/introducing-lottie-4ff4a0afac0e

by anp • 9 years ago

643 97 9 years ago

kunalslab2• 9 years ago

How does this compare to Keyframes, which Facebook released back in November? https://code.facebook.com/posts/354469174916519/keyframes-de...

dikaiosune• 9 years ago

There are libraries similar to Lottie, such as Marcus Eckert’s Squall and Facebook’s Keyframes, but our goals are slightly different. Facebook picked a small set of After Effects features to support, since they were focusing mainly on reactions, but we want to support as many as possible.

kunalslab2• 9 years ago

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

burntcookie90• 9 years ago

different license as well (Apache vs BSD + Patent grant)

buba44714• 9 years ago

This supports a larger number of after effects animation features, it also has support for native animated view controller transitions, support for react native, programmatically masking arbitrary views from after effects layers.

Check the readme on the github for each repo for more info :)

buba44714• 9 years ago

Author of the iOS side of things here. Feel Free to ask any questions!

hsavit15• 9 years ago

Which screens in the app are currently are using this?

hsavit15• 9 years ago

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

film42• 9 years ago

Off topic, but why is the iOS app so big? It's currently 130MB, which is almost 3x larger than the Android app and 10x larger than what I'd expect. Are you guys planning on slimming the app down? Is that 130MB mostly libraries you depend on, or is it mostly fonts, images and other assets? Thanks!

chris_7• 9 years ago

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.

buba44714• 9 years ago

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!

giarc• 9 years ago

Will this be available for swift?

buba44714• 9 years ago

It can already be used in swift :)

buba44714• 9 years ago

I have updated the readme with examples :)

hesdeadjim• 9 years ago

Fragile and tedious animation authoring is/has been a huge problem on these platforms, you are awesome, thank you.

72mena2• 9 years ago

My questions may be off-topic (maybe more fit for an AMA with the design/engineering Airbnb team).

First of all, thank you for making this an open-source project.

I've noticed Airbnb has been very open with the design community about the internal processes and tools, whereas most companies keep their employees under NDAs. So my 2 questions are:

1. Did your team have to advocate for budget to create these tools, to write blog posts and to share them for free, or did Airbnb already had a plan to support this kind of research? How does this "make sense" for the typical budget-oriented PMs?

2. Did your team approach Adobe to see if they were already working on a tool like this? How does the initial planning go for these kind of projects?

Lottie looks super interesting, but the first questions that pop up in my mind are all about the planning and research behind such amazing (side?)projects and the people behind them.

Thanks!

buba44714• 9 years ago

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.

jongold• 9 years ago

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...

bennyg2• 9 years ago

Are animations in react-native offloaded to the native renderer, or are they in JS?

buba44714• 9 years ago

For Lottie, they are offloaded to native Core Animation. :)

lrichardson7• 9 years ago

Great question. Right now playing the animation with the imperative API in React Native will be driven entirely on the main thread, but the declarative API with `Animated` will not be (yet).

I'm very interested in building the proper hooks natively to allow for usage with `useNativeDriver: true`. We are perfectly situated for this too, considering the author of the iOS side was also the engineer who introduced offloaded animations to React Native on the iOS side!

(Source: I made the Lottie RN bindings, and work on RN at Airbnb)

misiti3780• 9 years ago

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 ?

hsavit15• 9 years ago

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

bennyg2• 9 years ago

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.

gpeal3• 9 years ago

Author of the Android side of things here. Feel Free to ask any questions!

spbaar• 9 years ago

Are the frames drawn to a bitmap first or straight to a canvas? Can a single animation object display different parts of itself in different stages of that animation, or would a duplicate animation object be required?

gpeal3• 9 years ago

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.

kumarm• 9 years ago

Thanks for the nifty tool and Making it so small to avoid bulking up APK's.

kllrnohj2• 9 years ago

One of the main reasons Android's VectorDrawable is only a small subset of SVG is to stick to only the subset of path drawing that performs reasonably well.

How does Lottie deal with this? I know it calls to canvas directly when possible, but canvas.drawPath() is not exactly fast, either. What does the performance actually look like?

gpeal3• 9 years ago

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.

sandGorgon• 9 years ago

Is there any other way to generate/buy/get these json files ? Really want to try this out, but do not have access to After Effects.

joshwcomeau• 9 years ago

This is awesome! Thanks for releasing this open-source.

mxstbr• 9 years ago

This is huge. I did my first internship at a company that was half animators making huge TV ads you have seen, and half web devs/designers that made interactive (web) apps.[0] Lottie is, without a doubt, solving a huge problem in the industry.

Previously, engineers were often stuck bolting animations and transients onto static PSDs, or designers fighting to communicate what they wanted an animation to be like. This completely get rids of the problem!

I can't wait to try this out. Now I just need to learn After Effects...

[0] https://animade.tv

richforrester2• 9 years ago

Now I just need to learn After Effects

Kinda scares me that After Effects (video manipulation tool) will be used for web animation.

Photoshop all over again?

.ps: I'm in the same boat of having to learn AE. Or at least improve on my basic knowledge of it.

buba44714• 9 years ago

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.

bshimmin• 9 years ago

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.)

markestefanos• 9 years ago

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

andrei_says_• 9 years ago

If anything it reminds me of flash.

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

bitprior• 9 years ago

Hey, I think it's worth directing people to checkout Mt. Mograph[0] and from there looking of motions on Dribbler for inspiration.

I recently moved from working on media (largely motion graphics) into a more technical field of study. Mt. Mograph helped flesh out my after effects knowledge to improve my motion graphics.

(No affiliation whatsoever, I just find his videos great, first one is a bit long while he gets his bearings)

[0] https://YouTube.com/mtmograph

therealsalih5• 9 years ago

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

clay_to_n• 9 years ago

Any plan for a web React version? Or are CSS + JS in a good enough state where a new tool isn't necessary?

lee_a• 9 years ago

The file format/After Effects exporter used is from:

https://github.com/bodymovin/bodymovin

which was pretty simple to use.

I saw Lottie first, found bodymovin, and had an After Effects animation in our React app in about 15 minutes.

edit: I'm not affiliated with either project.

lrichardson7• 9 years ago

I plan on adding a React API for the bodymovin library in addition the react native library. They will likely have identical interfaces.

srikz• 9 years ago

Really cool! Will try it in a weekend project soon! :) This may give me a good incentive to learn using After Effects

Mizza• 9 years ago

This is cool - I can actually see a small cottage industry forming around people who specialize in exactly this kind of animation.

santaclaus• 9 years ago

I'm sort of surprised that Adobe isn't building these sorts of features into CC and that large corps like Airbnb are having to roll their own! Seems like a big market to ignore.

pjmlp• 9 years ago

Aren't they part of Flash?

Nowadays the compiler also generates native code.

mesh• 9 years ago

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).

JusticeJuice• 9 years ago

I wonder why they chose svg rendering over canvas for the react-native version.

lrichardson7• 9 years ago

I'm not sure what you mean by this? The react-native version does nothing but wrap the ios/android libraries (which are CoreAnimation and Canvas based, respectively)

pienight2• 9 years ago

Does anyone know a decent guide to generating these kind of things in After Effects, rather than standard video effects?

buba44714• 9 years ago

Theres plenty! Googling 'after effects shape animation' returned all of these: https://www.skillshare.com/classes/design/The-Ultimate-Guide...

https://helpx.adobe.com/after-effects/how-to/create-shape-ve...

https://cgi.tutsplus.com/tutorials/how-to-create-a-fun-and-d...

https://www.lynda.com/After-Effects-tutorials/Mograph-Techni...

pienight2• 9 years ago

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

foota• 9 years ago

This is really awesome, good work and congratulations to those that worked on this.

timhj• 9 years ago

Easier cross-device native animations puts a point in the 'app' column for the 'app v web-app' debate. nice one airbnb.

lrichardson7• 9 years ago

Stay tuned. It will work on the web as well :)

(Note that you can do this _already_ with bodymovin on the web if you want to)

e1g• 9 years ago

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.

buskila• 9 years ago

Can this be integrated into a Xamarin app? Is there anything similar for Xamarin?

koolkao• 9 years ago

Important question for me as well. As a solo amateur developer I don't have time to keep up with the constant development of all the different platforms.

I love the idea of this tool.

This came just at the right time. I'm putting together a series of animations for patient education. In trying to make things cross-platform I had to resort to AE and non-interactive video. Lottie looks like it will enable me to string together something nicer, using native drawing functionality, and can incorporate more interactivity.

therealsalih5• 9 years ago

in less than 48 hours Martijn van Dijk made this: https://github.com/martijn00/LottieXamarin Check it out!

sorenjan• 9 years ago

Is it possible to use any other programs than After Effects?

therealsalih5• 9 years ago

No, Lottie uses json files from an After Effects exetension called bodymovin. Maybe in the future someone will write an exporter for another program that can plugin!

karlding2• 9 years ago

Was the name was inspired by Charlotte "Lotte" Reiniger [1], one of the pioneers of silhouette animation? If not, that's one happy coincidence!

[1] https://en.wikipedia.org/wiki/Lotte_Reiniger

lrichardson7• 9 years ago

Indeed it is! See https://github.com/airbnb/lottie-react-native#why-is-it-call...

karlding2• 9 years ago

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

buba44714• 9 years ago

It absolutely was! Theres s shout out to her and her amazing work on the github readme! Love her work! :)

stuckagain• 9 years ago

I was hoping it was named after the prolific murderess of Millhaven, in honor of what animations do to your battery life.

hughes• 9 years ago

Reminds me heavily of mo.js[1], but for native apps. I was pretty impressed with how smooth the mo.js demos were.

[1] https://news.ycombinator.com/item?id=13419665

lobster_johnson• 9 years ago

I associate AE with video production -- is it actually suitable for vector animation aimed at web/mobile?

radley• 9 years ago

AE's primary duty is motion graphics.

intoverflow22• 9 years ago

AE is a huge and extensive application, truly the lesser known gem of Adobe and what almost all non-3D animation is created with these days.

coldcode• 9 years ago

I wonder though whether users really want lots of fancy animations. Our apps have way too many that add absolutely nothing to the usability, and in fact take away from it as you have to wait until things are done sliding around the screen. It's not that some animation is a bad thing, but give people such easy ways to make everything move and dance and you wind up with a modern version of 1990's websites. Of course it's just a tool in the end, but knowing our design teams, we will get 5X more bouncy and 1/5 the usefulness.

tekklloneer• 9 years ago

I think every major action that results in a difference in presentation of information should have one, brief, direct animation. Any more, and it's horrifying.

ozaark• 9 years ago

It's especially beneficial to the UX when attention is driven towards the user task. It's easier to digest short, helpful animation than reading through a block of text.

No user wants a repeat of 90's animated gif obsession or the 00's overly dramatic Flash craze. Hopefully we don't regress because of more recent advanced animation capabilities.

rimantas• 9 years ago

Ther is a place for animations in UI. First, if you have to wait animations can reduce the percepted waiting time, i.e. it is not so boring to stare at the screen when something is happening there. Also, animations can guide your attention accross the changes in the UI where without them suddent change in the data/interface shown would be disorientating. Of course it is all about finding the right balance.

qq66• 9 years ago

Extremely skillful and judicious use of animations can make an UI 50% better, and hamfisted use of animations can make a UI 90% worse.

Keyframe• 9 years ago

This is exciting!

"Facebook picked a small set of After Effects features to support, since they were focusing mainly on reactions, but we want to support as many as possible."

Does that mean expressions as well? wiggle, wiggle!

buba44714• 9 years ago

No expressions yet! But we're kicking the idea around!

LeicaLatte• 9 years ago

Looks interesting. My current workflow is similar and uses Apple Motion to produce animations for iOS.

Kiro• 9 years ago

If you need After Effects anyway, why not just export a GIF or something? What's the benefit of rendering it in real-time?

enra• 9 years ago

Gifs work, but if you want to make them high frame rate and high resolution, they can get quite large in filesize, especially if you want to support transparency (and still it wont support alpha transparency). Just on an iOS app, you would have to export the animation gif in 1x, 2x, 3x resolutions.

Lottie uses json file that contains svgs and the animation, which can be compressed quite well, always display in the right resolution and whatever size you desire.

nthState• 9 years ago

I wonder how this will affect Marcus Eckert’s Squall. Squall, a paid plug-in vs a free library. I find it annoying when things like this happens, an independent developer works on something for ages and tries to make some money, then a large company releases something pretty much the same for free.

Note: I'm not taking anything away from either product, both are super amazing.

gah/ just my $0.02

skynode• 9 years ago

I'm currently facing the same dilemma as an indie developer working on a data analysis/data visualization product. Companies like Tableau and co can afford to squeeze the juice of indie developers by offering similar featured products for free. I try not to get discouraged though. I think the field is really large and there are quite a ton of ways to make inroads these days but I think it's also important to play in large enough markets, so better to play in the $120bn+ data analytics market than some $100m market with one well-nourished, fast moving white shark.

therealsalih5• 9 years ago

Yea I see what you're saying. We built on top of bodymovin which was an already open source. Hernan put a ton of work into it that we were able to stand on top of. We wouldn't have even started Lottie without his project.

Personally I think theres plenty of room for all three, Lottie, Squall and Keyframes.

We still use Squall here at Airbnb because Squall has some things to offer that Lottie doesn't. The After Effects preview app is really dope, and we'll never make one of those. We may not use it in our codebase, but to anyone wanting to seriously use Lottie I would recommend buying Squall so you can preview on your device so easy.

intoverflow22• 9 years ago

Pretty much remade what the original value proposition of Flash was before it became more of a dev environment.

samlittlewood• 9 years ago

I'm curious how easy it would be to export content from Synfig (an open source 2d vector animation tool) http://www.synfig.org - that would then be open source end to end.

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

Related Stories