Gradient GUI Progression

https://i.gyazo.com/d654b4c3aa4d37f114cbd874e1f59645.mp4

As you can see here, when the button is pressed, the “WARPING” text slowly fills up.

However, you can see it’s a bit jumpy and glitchy when it goes back and fourth.

How do I fix this?

local grey = Color3.fromRGB(180,180,180)
local white = Color3.fromRGB(255,255,255)


script.Parent.Parent.TextLabel.UIGradient.Color = ColorSequence.new{
	ColorSequenceKeypoint.new(0, white),
	ColorSequenceKeypoint.new(.01, grey),
	ColorSequenceKeypoint.new(1, grey)
}


script.Parent.MouseButton1Down:Connect(function()	
	for i = 1,99 do
		print(i/100)
		script.Parent.Parent.TextLabel.UIGradient.Color = ColorSequence.new{
			ColorSequenceKeypoint.new(0, white),
			ColorSequenceKeypoint.new(i/100, white),
			ColorSequenceKeypoint.new((i/100)+0.0001, grey),
			ColorSequenceKeypoint.new(1, grey)
		}
		wait()
	end
end)
1 Like

Use TweenService, if possible, not sure. It should be, but I’m not sure

1 Like

It’ll error and say “this property cannot be tweened”

1 Like

Try tweening i to 100.

How would I also update the UIGradient to sync to i?

You already have this,

Yes I know but would I use a while loop to keep updating it?

1 Like

In conjunction with RunService and TweenService:GetValue() you could tween it

2 Likes

I lost to reading, you could just tween the offset of the UiGradient. Make the darker gray at a super small increment like:

script.Parent.Parent.TextLabel.UIGradient.Color = ColorSequence.new{
			ColorSequenceKeypoint.new(0, white),
			ColorSequenceKeypoint.new(0.01, white),
			ColorSequenceKeypoint.new(0.02, grey),
			ColorSequenceKeypoint.new(1, grey)
		}

then push it to the right with the x value of the Offset using tween