
Introducing Lottie: Airbnb's tool for adding animations to native apps - dikaiosune
https://medium.com/airbnb-engineering/introducing-lottie-4ff4a0afac0e
======
mxstbr
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](https://animade.tv)

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

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

~~~
richforrester
Yes, it's been built towards motion graphics. Just as Photoshop has been
geared towards web design over the years.

It was originally a post processing tool. Hence the name. After Effects.

Which is why this whole thing seems so similar to me.

~~~
buba447
I see what ya mean! Its always felt like some weird mix of illustrator and
photoshop to me. Strange to how PHOTOshop moved the graphic way and the
lightroom became the defacto photo editor. Guess that's just software
evolution for ya :)

------
santaclaus
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
Aren't they part of Flash?

Nowadays the compiler also generates native code.

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

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

~~~
kllrnohj
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?

~~~
gpeal
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/](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.

~~~
kllrnohj
That's not an answer to how does it perform. For example if the hamburger goes
from 4ms/frame to 12ms/frame then lottie is crazy expensive, even though it's
still "60fps" in the test app.

What is the actual end-to-end cost? Have you measured it at all?

------
karlding
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](https://en.wikipedia.org/wiki/Lotte_Reiniger)

~~~
lrichardson
Indeed it is! See [https://github.com/airbnb/lottie-react-native#why-is-it-
call...](https://github.com/airbnb/lottie-react-native#why-is-it-called-
lottie)

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

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

~~~
72mena
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!

~~~
jongold
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/](http://airbnb.design/building-a-visual-language/)

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

~~~
72mena
buba447, therealsalih, jongold: Thank you for taking the time for the detailed
answers. The workflow and the mindset from your teams sounds inspiring.

I've been trying to create something like this but on a much smaller scale
within my team, however, most of the time the challenge ends up being
intimidating for designers, even experienced ones.

I'm sure the openness of Airbnb also helps to recruit top talent!

Good luck, and thanks for sharing, it's inspiring for the ones of us with the
ambition of designing the future tools designers will use.

------
kunalslab
How does this compare to Keyframes, which Facebook released back in November?
[https://code.facebook.com/posts/354469174916519/keyframes-
de...](https://code.facebook.com/posts/354469174916519/keyframes-delivering-
scalable-high-quality-animations-to-mobile-clients/)

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

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

~~~
buba447
I can! I built out the iOS side of the project. Aside from supporting as many
after effects features as possible we wanted push what could be done with
animation. One example in the current version is using exported after effects
files as animated transitions between view controllers. In the future we hope
to support more programmatic and interactive uses of animations built in after
effects.

~~~
hsavit1
So after effects is controlling the shared element transitions?

~~~
buba447
The animations built from After Effects are programmatically altered to build
the UIViewController transition.

------
Keyframe
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!

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

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

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

------
clay_to_n
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
The file format/After Effects exporter used is from:

[https://github.com/bodymovin/bodymovin](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.

------
hughes
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](https://news.ycombinator.com/item?id=13419665)

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

~~~
therealsalih
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!

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

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

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

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

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

~~~
lrichardson
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
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 ?

~~~
lrichardson
> What are you building with RN at airbnb?

Various flows in the Airbnb app are built with React Native. Our recently
launched "Experiences" platform is built mostly with React Native, and there
are many flows in the app that are built with React Native. Overall it's
probably about 10-20% of the app right now. The decision to use or not use
React Native for a new feature is a function of what the team building the
feature is familiar with, and whether or not we think we can deliver a good
user experience with the technology or not. The answers to those questions are
quickly evolving though as we build up more infrastructure around React
Native, and as the familiarity with the platform grows.

> What has been your experience?

Generally positive, but the difficulty of integrating React Native into an
existing mobile app with large existing native code bases should not be
understated. It's not plug and play. I'm giving a talk about this in detail at
React Conf in March. Make sure to check it out!

> If you were starting a mobile company now, would you start with RN ?

Yes.

Keep in mind that I was the main proponent of React Native being experimented
with and adopted at Airbnb. As a result, I have some bias and other people at
Airbnb might have different feelings / experiences.

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

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

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

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

~~~
buba447
Theres plenty! Googling 'after effects shape animation' returned all of these:
[https://www.skillshare.com/classes/design/The-Ultimate-
Guide...](https://www.skillshare.com/classes/design/The-Ultimate-Guide-to-
Shape-Layers-in-After-Effects/1814132356)

[https://helpx.adobe.com/after-effects/how-to/create-shape-
ve...](https://helpx.adobe.com/after-effects/how-to/create-shape-vector-
layers-animation.html)

[https://cgi.tutsplus.com/tutorials/how-to-create-a-fun-
and-d...](https://cgi.tutsplus.com/tutorials/how-to-create-a-fun-and-dynamic-
animation-shapes-part--ae-25245)

[https://www.lynda.com/After-Effects-tutorials/Mograph-
Techni...](https://www.lynda.com/After-Effects-tutorials/Mograph-Techniques-
Shape-Animation-After-Effects/155266-2.html)

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

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

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

~~~
radley
AE's primary duty is motion graphics.

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

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

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

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

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

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

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

~~~
lrichardson
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)

