search

airbnb / lottie-web

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

Optimizing for repeatedly-used elements #467

Closed cmalven closed 7 years ago

cmalven commented 7 years ago

I'm planning out a longer animation sequence using bodymovin, and there are many cases where an object will appear in the scene, then be out of the scene for awhile, and then return to the scene unchanged.

I'm very aware of trying to keep the total size of the output SVG as small as possible, and I assume that if a layer ends in After Effects, bodymovin will completely hide that "layer" in the output SVG to improve performance. But if I need that item to return to the scene, I can't unhide the same layer. I'd need to create a new identical layer, which would result in an additional set of elements being created in the output SVG. Right?

The Greensock Animation Platform has this really nice property called autoAlpha (in addition to the standard alpha property) which means that it will animate the alpha/opacity to a given value, and if that value ever hits 0 it will automatically hide the element. If the alpha ever rises above 0 it will automatically show the element.

This is critical for performance because it allows you to reuse elements throughout an animation, but also get the huge performance benefits of hiding unused elements to avoid rendering them.

Bodymovin doesn't do anything like this with zero opacity elements, does it? Any other tips for how to handle reused layers in after effects and still get the best performance possible?

Thanks!

bodymovin commented 7 years ago

Hiding elements with opacity 0 is an idea I've tried before. I removed it because I didn't want to overwrite user css settings. But adding it as part of the config is a good idea.

cmalven commented 7 years ago

@bodymovin adding it to a config makes sense. How difficult do you think this would be to add? Is it something that I could reasonably add as a PR or is it complicated enough that you would want to tackle it?

bodymovin commented 7 years ago

I think I need to take care of it. But it shouldn't be too hard. I'll try to do it this days.

cmalven commented 7 years ago

Thanks, that would be amazing, and very much appreciated.

bodymovin commented 7 years ago

done and uploaded :)

cmalven commented 7 years ago

Amazing! Thank you.