Weird gradient display issue

Hello! I’m working on making this loading bar effect using a UIGradient. I don’t think the issue is with the script as it’s doing exactly what I tell it to. The only issue is with the way that it’s being displayed on top of an image. Rather than it updating to a certain percentage, it overshoots and then corrects itself. A bit difficult to explain in words, so please feel free to check the video I attached. Has anyone had this issue before? Any suggestions would be greatly appreciated. Thanks!

1 Like

Are you animating it by tweening the sequences’ keypoints? The error looks like it may be because internally you’re recalculating the full gradient each update. Have you tried tweening the UIGradient’s Offset vector to animate it?

1 Like

What exactly is that Offset property? I don’t really understand it. As it’s not possible to directly tween the Transparency property of a UIGradient, I really am recalculating the full gradient using this:

local function GetTransparencySequence(percentage)

	local Scale = percentage/100
	local Sequence
	Sequence = NumberSequence.new{
		NumberSequenceKeypoint.new(0, 0), 
		NumberSequenceKeypoint.new(math.max(0, Scale - 0.1), 0.5),
		NumberSequenceKeypoint.new(Scale, 1),
		NumberSequenceKeypoint.new(1, 1)
	}

	return Sequence
end

In combination with that, I’m tweening the value of a NumberValue (it updates the percentage) to simulate the tween effect on the UIGradient’s Transparency.

Playing around with the Offset property now and it definitely seems much better than setting the Transparency gradient. Can’t believe I hard-coded it ahh. Thank you so much!

1 Like

No problem! I was just about to whip up an example script but you beat me to it. In-case it’s confusing, the offset is a Vector2 as the Y component is used if you rotate the gradient say 90 degrees.

1 Like

Thank you @MP3Face, that helps a lot! It’s beautiful thanks to you. :sob:

1 Like