Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

medium.com

Post reply on HN
Print view View original

61–70 of 101 posts

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

#61

Post by bennyg »

lrichardson wrote: post #13
bennyg wrote: post #9

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

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

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.

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

#62

Post by stuckagain »

karlding wrote: post #53

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

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

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

#65

Post by 72mena »

buba447 wrote: 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 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!

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

#66

Post by mesh »

pjmlp wrote: post #41
santaclaus wrote: post #33

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.

Aren't they part of Flash? Nowadays the compiler also generates native code.

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

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

#67

Post by gpeal »

kllrnohj wrote: post #54
gpeal wrote: post #11

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

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 for masks), rendering to them, then drawing them back to the canvas.

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

#68

Post by bshimmin »

richforrester wrote: post #58
mxstbr wrote: 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.

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

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

#70

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