search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.43k stars 2.87k forks source link

Are drop shadows (as layer style) supported? #281

Closed stenuto closed 7 years ago

stenuto commented 7 years ago

Is there a way to have drop shadows supported? Is there a work-around? I'm not concerned about performance.

Thank you!

SundancePioneer commented 7 years ago

One possible workaround could be to set an id for the object you want to have a drop-shadow, and use css to add the drop-shadow for that id in the browser.

bodymovin commented 7 years ago

as Sundande said, you can include it with css if you're not animating it's properties. But a basic drop shadow is on the roadmap.

Anthoni commented 7 years ago

When will you want implement it?

jpap commented 7 years ago

👍 for drop-shadow support. :D (My project uses a static shadow, but it is associated with objects that are being animated. The animation is simple, animating position and rotation.)

bodymovin commented 7 years ago

I've got a first version of drop shadow supported. But I can't upload it yet to github. If any of you want, I can send you a beta build with it.

jpap commented 7 years ago

I'd love to check it out! :D Perhaps use a feature branch for it? Otherwise happy to try it out-of-band. You move quickly, thank you!

bodymovin commented 7 years ago

here it is. New UI BTW :) bodymovin.zip rename it to bodymovin.zxp

jpap commented 7 years ago

Works perfectly! Thanks for your legwork on this. :D

Will drop-shadow be supported in the bodymovin_light player? I'm keen to link to the CDN version as soon it becomes available. Thanks again!

bodymovin commented 7 years ago

I don't think so. It needs the effects module to be supported. I'm thinking of adding a new build with all features supported but only the svg renderer. Not sure how much it will reduce filesize though.

jpap commented 7 years ago

A thin(ner) build just for SVG would be awesome. :D

I suppose that if I got desperate, I could use the light version and apply the drop-shadow via CSS? Currently I'm only just a bit ahead of including the entire animation as an optimized animated GIF. Of course, with the CDN version (and assuming clients may already have it cached) it's a clear winner.

bodymovin commented 7 years ago

@jpap do you have a file size limit? GIFs should be much larger than the full player + the animation. Even more if the json and player are gzipped.

jpap commented 7 years ago

Not really; just obsessed with minimizing the transfer size. :D

Including the full bm player, my animation is currently ~255kB (uncompressed) or 66kB if the client accepts deflate. The associated AGIF at acceptable quality is about 469kB. (OK, this is better than I alluded to earlier; my apologies.)

uri3000 commented 3 years ago

Is drop shadow supported on the Canvas renderer for web? Can't get it to work

bodymovin commented 3 years ago

@uri3000 unfortunately, they are not