Live data from Hacker News

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

medium.com

91–100 of 101 posts

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

#91

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!

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

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

#92
post #23

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 c…

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…

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

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

#93
post #90
post #65

Earlier quoted context omitted.

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 wr…

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 roa…

I helped out on design/animation side of things for Lottie. Just to add a little more clarification. When we first saw bodymovin we started working on Lottie very slowly. THEN Squall came out, and I basically begged Marcus Eckert to invite me to the private beta. He graciously did and I showed off Squall to all the engineers, we were very excited about it. But after vetting it and having lots of conversations about putting Squall in our app, we ended up continuing to make our own version so we could have more control in the end. After all, we had made so much progress already, we could see the light at the end of the tunnel and knew we only had a matter of weeks to get something usable. We still do use Squall for its dope After Effects preview app in our design work flow though.

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

#94
post #65
post #4

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

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 wr…

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

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

#95
post #67

Earlier quoted context omitted.

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?

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 f…

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?

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

#96
post #23

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 c…

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

If anything it reminds me of flash.

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

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

#97

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

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.

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

#99
post #94
post #65

Earlier quoted context omitted.

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 wr…

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: - I…

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.

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

#100

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

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!
Post reply on HN