Lottie-android: Gradient fill doesn't work in Lotti application

Created on 22 Jun 2017  Â·  11Comments  Â·  Source: airbnb/lottie-android

I made a simple shape layer for gradient fill for test and I exported it by bodymovin.
But, it didn't work properly what I expected about color.

It just showed black & white gradient.
So, I tried to change it with tint effect(map black to color, map white to color).

It also didn't work at Animation view in Lottie application as well.

How can I use it?

Most helpful comment

Hey guys, I know why it's black and white !!

I spent 2 hours playing with the json file.

which renders
"k":[0,1,1,1,1,1,1,1]
=> positionColor1,r,g,b,positionColor2,r,g,b

I replaced that using my RGB colors:

Taking R / 255, then G / 255 etc...
I got that:
"k":[0,0.85,0.27,0.98,1,0.26,0.93,0.99]
capture d ecran 2018-02-11 a 20 47 32

It worked...

=> Next step was understanding why ae/bodymovin output for my gradient was black&white

ANSWER:

In after effects, Go to your gradient colors and make sure you clicked RGB instead of TSL. Do a render again and you're all set. No more black and white!!

capture d ecran 2018-02-11 a 20 41 52

Hope that will help you :)

All 11 comments

@PeterKim87 Try saving your project before exporting it with bodymovin. Gradients only get picked up after saving.

@gpeal I exported my project after saving. But results are same..
I think gradient is fine. Because I can see the gradient with black and white color. The problem is color. I can't change black and white color to what I want.

I tried changing gradient color in shape layer, but didn't work. I tried appling tint effect that map black&white to other color, it didn't work, too.

Plus, I tried alpha matte for changing color using a layer with gradient wipe effected. It didn't work.

What else can I try to change the color?

ps. I'm using bodymovin 4.7.1(the lastest version).

Can you attach your aep file?

On Thu, Jun 22, 2017, 5:20 PM PeterKim87 notifications@github.com wrote:

@gpeal https://github.com/gpeal I think gradient is fine. Because I can
see the gradient with black and white color. The problem is color. I can't
change black and white color to what I want.

I tried changing gradient color in shape layer, but didn't work. I tried
appling tint effect that map black&white to other color, it didn't work,
too.

What else can I try to change the color?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/lottie-android/issues/344#issuecomment-310536909,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABP0YfWeP3sCHTbLXixUkQcac9sQWMU5ks5sGwTUgaJpZM4OB_fi
.

@PeterKim87 ^

lottie_2017.zip

Here it is..

It is nothing special indeed.. Very very simple project(I just made it for test).

Thanks

@PeterKim87 When I export your aep with bodymovin, it looks fine:
image
Gradient.json.zip

Dragging my json vs yours into lottiefiles.com which will render it with bodymovin yields the same, color for mine b&w for yours. This makes me thing that there is something about the way that you're exporting the json. Feel free to file a bug on the bodymovin repo but this doesn't seem like a lottie issue.

Hey guys, I know why it's black and white !!

I spent 2 hours playing with the json file.

which renders
"k":[0,1,1,1,1,1,1,1]
=> positionColor1,r,g,b,positionColor2,r,g,b

I replaced that using my RGB colors:

Taking R / 255, then G / 255 etc...
I got that:
"k":[0,0.85,0.27,0.98,1,0.26,0.93,0.99]
capture d ecran 2018-02-11 a 20 47 32

It worked...

=> Next step was understanding why ae/bodymovin output for my gradient was black&white

ANSWER:

In after effects, Go to your gradient colors and make sure you clicked RGB instead of TSL. Do a render again and you're all set. No more black and white!!

capture d ecran 2018-02-11 a 20 41 52

Hope that will help you :)

Ha, this really helped. I have been checking the json without saving the AE project file. After reading this, I saved the file and rendered a new json which renders gradient without any issue. Thanks a ton!!

Hey guys, I know why it's black and white !!

I spent 2 hours playing with the json file.

which renders
"k":[0,1,1,1,1,1,1,1]
=> positionColor1,r,g,b,positionColor2,r,g,b

I replaced that using my RGB colors:

Taking R / 255, then G / 255 etc...
I got that:
"k":[0,0.85,0.27,0.98,1,0.26,0.93,0.99]
capture d ecran 2018-02-11 a 20 47 32

It worked...

=> Next step was understanding why ae/bodymovin output for my gradient was black&white

ANSWER:

In after effects, Go to your gradient colors and make sure you clicked RGB instead of TSL. Do a render again and you're all set. No more black and white!!

capture d ecran 2018-02-11 a 20 41 52

Hope that will help you :)

Thank you so much MadGraph, Really appreciated 🙌

Hi, Guys.
Actually I resolved this issue few months ago without editing json files(among complicating characters!)
The way is.. changing computer's system locale to English (in my case)from Korean.

I hope this way helps your unexpected gradient fill problems(black & white)!

Hi, Guys.
Actually I resolved this issue few months ago without editing json files(among complicating characters!)
The way is.. changing computer's system locale to English (in my case)from Korean.

I hope this way helps your unexpected gradient fill problems(black & white)!

Yes, that's indeed a locale issue but I find it more tedious to change the system's locale for that if you don't want to have your system in english. That works fine though :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

hkchakladar picture hkchakladar  Â·  3Comments

nick1Jian picture nick1Jian  Â·  3Comments

mateusgrb picture mateusgrb  Â·  5Comments

AndroidDeveloperLB picture AndroidDeveloperLB  Â·  4Comments

Nabeel-khalid picture Nabeel-khalid  Â·  4Comments