search

airbnb / lottie-web

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

Pre-comp layer not rendering properly #1705

Open AnishGG opened 5 years ago

AnishGG commented 5 years ago

Hello,

What did you do? Please explain the steps you took before you encountered the problem. My composition has solid layer with inverted mask. It is pre-composed into Main composition. Now I reduced the width and height of the Main composition.

What did you expect to happen? I expected to get the same result as in After Effects.

What actually happened? Please include as much relevant detail as possible. I get a broken animation with current AE file. But if I increase the size of the Main composition, then it works perfectly fine.

Please provide a download link to the After Effects file that demonstrates the problem. https://drive.google.com/open?id=1dSMFcbB5dXl9vExx4wRpqFTfKXIXuB4v

After Effects Screenshot after_effects

JSoN Screenshot lottie

AnishGG commented 5 years ago

Rendering is working fine on the browser when the mask is not inverted.

AnishGG commented 5 years ago

@bodymovin could you provide any alternative for this please. ^__^

bodymovin commented 5 years ago

@AnishGG unfortunately inverted masks have this problem when translated or rotated. For your case can you work with overlapping shapes that share a fill?

AnishGG commented 5 years ago

unfortunately inverted masks have this problem when translated or rotated.

Oh, I see. Should I expect this to be corrected any time soon?

For your case can you work with overlapping shapes that share a fill?

@bodymovin I didn't quite catch how this will be done. Could you explain more about this? Do you mean creating a shape layer, and then adding two shapes inside this and then creating a mask on them(this didn't work anyways)? Thanks 😃

bodymovin commented 5 years ago

If you create two shapes that share the same fill and the fill rule is set to Non Zero Winding, you'll see that one shape will act as an "inverted mask" of the other one. No need to use masks at all.