Fill and stroke alpha value is ignored in Lottie-web

[karip]

Tell us about your environment Lottie-Preview (Mac/iOS) 3.0.4, Lottie-web 5.5.9.

• Browser and Browser Version: Safari 12.1.2, Firefox 69.0, Chrome 76.

• After Effects Version: N/A

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

1. Open the attached json file in Lottie-web.
2. Observe the results.

What did you expect to happen? There should be three semi-transparent boxes. There should be two semi-transparent strokes. (see the Lottie-Mac/iOS screenshot below). Some of the boxes and strokes have a color which has alpha set to 0.5 and 0.25. I expected Lottie-web to not ignore them.

What actually happened? Please include as much relevant detail as possible. There is only one semi-transparent box. There is only one semi-transparent stroke.

It seems that Lottie-web is ignoring the alpha value in stroke and fill values. Lottie-Mac/iOS renders the alpha values correctly. I have attached screenshots of them below.

Please provide a download link to the After Effects file that demonstrates the problem. Here's the json file.

fillstrokealpha.json.zip

[bodymovin]

Hi, can you share the .aep?

[karip]

Sorry, I don't have an .aep file. It was created in Keyshape.

I have attached another example. I wrote it manually in a text editor, so no .aep file. It might be easier to read than the previous example. I set the blue "Rectangle-alpha" rectangle's alpha value to 0.5.

fillalpha.json.zip

As you can see, Lottie-web ignores the alpha value, but Lottie-Mac/iOS renders it.

[bodymovin]

Indeed the web player doesn't support opacity as part of the c value, it has to be set in the o property of the same fill.

[karip]

Will a future version of the web player support opacity as part of the c value? Or should I try to avoid using that opacity in the c value?

[bodymovin]

I don't think it will be supported for now, but maybe in the future I'll take a look at it

[karip]

Great! I'll leave this issue open for that.