Live data from Hacker News

Lottie for Android, iOS, React Native, and Web

airbnb.io

11–20 of 20 posts

Re: Lottie for Android, iOS, React Native, and Web

#11
post #6
post #2

I wished their sample animations were not GIFs but actual live renders. I couldn't find a web based "live example", but if it can do what they say, it looks pretty cool.

Webflow's Ecommerce landing page uses Lottie Web, for example: https://webflow.com/ecommerce > Let us know what you think of the intro hero animation. That was the part built in Lottie. [1] From the tooltip on the page: > This site was built entirely with Webflow — minus most of the hero introduction, which we built in After Effects and integrated on the page using Lottie. We wrote custom code to sync the Lottie play…

Still ain't Flash (^_^;)

Re: Lottie for Android, iOS, React Native, and Web

#12
post #7

>Animated Vector Drawable (Android only). More performant because it runs on the RenderThread instead of the main thread. Supports only a subset of Lottie features. Progress can't be manually set. Doesn't support text or dynamic colors. Can't be loaded programatically or over the internet. The real long term alternative on Android is that Bodymovin now has a plugin to directly export an animation to the VectorDrawabl…

Author of Lottie Android here. The bodymovin to avd plugin is extremely beta and only supports a sublet of after effects features and none of the lottie features such as manually setting progress or dynamic properties.

Thank you for your amazing work! It would be great to document that supported subset for Bodymovin to AVD — the Lottie supported features[1] matrix is awesome, and it would really create a ton of value to also document AVD support for Bodymovin in the same way. It's so black box right now, troubleshooting involves tweaking path nesting, exporting, diff xml, tweak, export, repeat.

[1] http://airbnb.io/lottie/supported-features.html

Re: Lottie for Android, iOS, React Native, and Web

#13
post #6
post #2

I wished their sample animations were not GIFs but actual live renders. I couldn't find a web based "live example", but if it can do what they say, it looks pretty cool.

Webflow's Ecommerce landing page uses Lottie Web, for example: https://webflow.com/ecommerce > Let us know what you think of the intro hero animation. That was the part built in Lottie. [1] From the tooltip on the page: > This site was built entirely with Webflow — minus most of the hero introduction, which we built in After Effects and integrated on the page using Lottie. We wrote custom code to sync the Lottie play…

Lags quite a bit on my i3 6th gen laptop.

Re: Lottie for Android, iOS, React Native, and Web

#14
post #13
post #6

Earlier quoted context omitted.

Webflow's Ecommerce landing page uses Lottie Web, for example: https://webflow.com/ecommerce > Let us know what you think of the intro hero animation. That was the part built in Lottie. [1] From the tooltip on the page: > This site was built entirely with Webflow — minus most of the hero introduction, which we built in After Effects and integrated on the page using Lottie. We wrote custom code to sync the Lottie play…

Lags quite a bit on my i3 6th gen laptop.

No lag at all on my iPhone in Safari.

Re: Lottie for Android, iOS, React Native, and Web

#15
Using it right now on a project. Seeing the same animation on Android having transparency where iOS doesn’t. But it’s a great tool as we use Android, iOS and web views and it just works on all three of them. Plus our graphics artist knows how to make and export them.

Re: Lottie for Android, iOS, React Native, and Web

#16
post #2

I wished their sample animations were not GIFs but actual live renders. I couldn't find a web based "live example", but if it can do what they say, it looks pretty cool.

For what it is worth, it is often used on mobile and works pretty well there, I guess it is the same on web. The only downside I can think of : - you really need to sit down with your animators and explain to them which effects they can use and which ones they need to avoid. Some manipulations will allocate a bitmap at each frame, it ends up very choppy - some lottie json can take a while to read. In some cases we ju…

Regarding the first downside you listed, would you say all the performance pitfalls are covered in the project’s documentation, elsewhere online, or did you become aware of them through trial and error?

Re: Lottie for Android, iOS, React Native, and Web

#18
post #6
post #2

I wished their sample animations were not GIFs but actual live renders. I couldn't find a web based "live example", but if it can do what they say, it looks pretty cool.

Webflow's Ecommerce landing page uses Lottie Web, for example: https://webflow.com/ecommerce > Let us know what you think of the intro hero animation. That was the part built in Lottie. [1] From the tooltip on the page: > This site was built entirely with Webflow — minus most of the hero introduction, which we built in After Effects and integrated on the page using Lottie. We wrote custom code to sync the Lottie play…

Absolutely beautiful. Very smooth on the scrolling!

Re: Lottie for Android, iOS, React Native, and Web

#19
post #7

>Animated Vector Drawable (Android only). More performant because it runs on the RenderThread instead of the main thread. Supports only a subset of Lottie features. Progress can't be manually set. Doesn't support text or dynamic colors. Can't be loaded programatically or over the internet. The real long term alternative on Android is that Bodymovin now has a plugin to directly export an animation to the VectorDrawabl…

Author of Lottie Android here. The bodymovin to avd plugin is extremely beta and only supports a sublet of after effects features and none of the lottie features such as manually setting progress or dynamic properties.

op here. That's why I mentioned long term^^

Of course there are other options .. If Google were to open up a RenderThread api, lottie could potentially be just as efficient (although I fear how some devs will abuse this api). Or maybe AVD will get dynamic properties and progress setting.

No matter who does it first, the future is bright !

Re: Lottie for Android, iOS, React Native, and Web

#20
post #16

Earlier quoted context omitted.

For what it is worth, it is often used on mobile and works pretty well there, I guess it is the same on web. The only downside I can think of : - you really need to sit down with your animators and explain to them which effects they can use and which ones they need to avoid. Some manipulations will allocate a bitmap at each frame, it ends up very choppy - some lottie json can take a while to read. In some cases we ju…

Regarding the first downside you listed, would you say all the performance pitfalls are covered in the project’s documentation, elsewhere online, or did you become aware of them through trial and error?

They are mostly listed in the project documentation but if I remember correctly, you still needed to sit around with the animator and review the animation for the effects that would translate into something costly.

Some are also trial and errors. Sometimes simple animations create jsons that take ages to load. If you can't preload them you might need to randomly tune the animation or go into the json yourself in order to end up with something more svelte.

Post reply on HN