search

airbnb / lottie-web

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

Gradient rendering problem using BattleAxe Overlord and Bodymovin #1968

Closed firudenis closed 4 years ago

firudenis commented 4 years ago

Tell us about your environment

What did you do? Please explain the steps you took before you encountered the problem.

I am working on a project which involves gradients. I export the elements for the animation from Adobe Illustrator (Version 24.0.3) using BattleAxe Overlord. Everything seems to be exported fine, all the gradients look fine in the composition panel, but when I render them using Bodymovin, the gradients get mixed up.

What did you expect to happen?

I expected the result to be the same as the one in the composition view

Screen Shot 2020-01-31 at 18 32 15

What actually happened? Please include as much relevant detail as possible.

After the render is complete, I get this result in both, the browser and the render preview of the plugin. I have a lot more elements to add to the scene, but I got into this problem right in the beginning.

Screen Shot 2020-01-31 at 18 43 41

Please provide a download link to the After Effects file that demonstrates the problem. animation.zip

bodymovin commented 4 years ago

@firudenis Hi, this is happening because gradient data is read dirrctly from the AE file trying to parse the content. Try renaming the gradient properties on each group to more unique names and it should work fine. I'll try to improve this on the next release.

bodymovin commented 4 years ago

I just tried renaming the 5 groups from Layer 1 to GroupLayer1 1, GroupLayer1 2, etc and it was enough

firudenis commented 4 years ago

Thank you! I just tried what you suggested and it works.

meylinbayr commented 4 years ago

Hello, I have tried renaming the Gradience layers, however it renders them in Black&White. I also save each file before exports so it pulls the correct data on colours. Any solution for the black&white?

bodymovin commented 4 years ago

@meylinbayr hi, can you share the .aep?

meylinbayr commented 4 years ago

Sure thing @bodymovin attaching it here. This is before i applied any of the changes you suggested but you will see for yourself that renaming gradience is not really improving anything. Activities_background (1).aep.zip

bodymovin commented 4 years ago

@meylinbayr I exported it and everything seems to work fine. Is your AE or OS on different language than English? Can you share your exported json file?

meylinbayr commented 4 years ago

Hello, yes exports correctly, but the first frame the gradience should be dark blue, right now is purple, which is correlated to the purple of the mid frame. Unfortunately if you look closely in the first frame, it is not exported 1:1 with the AE file.

bodymovin commented 4 years ago

@meylinbayr I renamed the layer named "3" to "3a" and that layer seems to be fixed. Because of the way gradient data is retrieved, it might happen that if layers are named similarly, the data is incorrect. for example layer "3" can be mistaken by layer "33"

Storyteller-Adam commented 4 years ago

Im having a similar issue where im trying to import a gradient that has about 20 steps but only the first nine make it through

bodymovin commented 4 years ago

@Storyteller-Adam hi can you share the .aep?

Storyteller-Adam commented 4 years ago

@bodymovin im afraid i can't since it's under NDA, but you can recreate this by making a gradient in illustrator with over 10 steps and then import it to AE using Overlord

bodymovin commented 4 years ago

@Storyteller-Adam I don't have Overlord. Could you create a simple example that doesn't violate the NDA?

Storyteller-Adam commented 4 years ago

I could but the issue is with the plugin specifically

On Mon, May 25, 2020, 5:03 PM hernan notifications@github.com wrote:

@Storyteller-Adam https://github.com/Storyteller-Adam I don't have Overlord. Could you create a simple example that doesn't violate the NDA?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/airbnb/lottie-web/issues/1968#issuecomment-633588085, or unsubscribe https://github.com/notifications/unsubscribe-auth/APVKQCHJFXVZOMFJH3PNN4DRTJ3EHANCNFSM4KOKDWVA .