airbnb / lottie-web

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

Gradient Stroke width not consistent/ not rendering correctly #2834

Open jhughes696 opened 2 years ago

jhughes696 commented 2 years ago

For some reason, my Gradient Stroke weight is getting pinched and thinned out at the beginning of the animation , but it should be a consistent stroke width. This might be an issue with the Gradient Stroke, because when I change the Gradient stroke to a normal stroke, the stroke width looks correct. But when changed back to a Gradient Stroke, the stroke width is pinching/thinning out in an unintended way. So there seems to be an issue with how Gradient Strokes are rendered on Web. This issue does not happen on iOS or Android.

Tell us about your environment Using LottieFiles Web previewer. Not sure what version of Lottie they are running.

See LottieFiles Preview here: https://lottiefiles.com/share/thkvqxz3

What did you do? Please explain the steps you took before you encountered the problem. I'm using Trim Paths on a shape layer. The Trim Paths layer is also being matted out by an Inverted Alpha Matte

What did you expect to happen? Expected Behavior should look like this. Stroke weight is consistent and there is no "pinching" of the stroke weight: ExpectedBehavior

What actually happened? Please include as much relevant detail as possible. Actual Behavior: The stroke weight is not consistent. There is a pinching / thinning of the stroke weight that occurs at the beginning of the loop. Web_bug

Please provide a download link to the After Effects file that demonstrates the problem. https://www.dropbox.com/s/gwbvdo281s3dfno/TrimPathsBug_public.aep?dl=0

bodymovin commented 2 years ago

This is a glitch with how Google renders masks. If you add an extra path anywhere with two vertices, it should get fixed