How to tween UIGradient transparency

Help and Feedback Scripting Support
#1

I am trying to tween a UIGradient transparency as you would with any other tween. However, it does not take a number. How would I do this?

Currently trying to do: tweenService:Create(uiGradient,tweenInfoFade,{Transparency=0})

4 Likes
Tweening a UIGradient through an offset?
#3

The reason it’s happening is because the “Transparency” property of any UIGradient is a NumberRange NumberSequence (same with beams and particle emitters) which can’t natively be tweened (as MrMoled said), so you have to use a clunky workaround using NumberValues.

local numberValue = Instance.new('NumberValue')
numberValue.Changed:Connect(function()
    uiGradient.Transparency = NumberSequence.new(numberValue.Value)
end)
tweenService:Create(numberValue, tweenInfoFade, {Value = 0})
4 Likes
#4

Ohh gotcha thanks {extra chars here}

1 Like
#5

You could also just lerp it
Tween service has its ups and downs

1 Like
#6

A UiGradient’s Transparency accepts a NumberSequence, not a NumberRange and the initial value of the Transparency property was not taken into consideration:

local numbervalue = Instance.new("NumberValue")
numbervalue.Value = UIGradient.Transparency.Keypoints[1].Value

local number_con = numbervalue.Changed:Connect(function()
    UIGradient.Transparency = NumberSequence.new(numbervalue.Value)
end)

local tw = tweenService:Create(numbervalue, tweenInfoFade, {Value = 0})
local tw_con; tw_con = tw.Completed:Connect(function()
    number_con:Disconnect()
    tw_con:Disconnect()
end)
9 Likes
#7

Long overdue, but I’m quite confused on how I could do this. I don’t know if it’s just me, or if I can’t figure it out even though it’s right there, but could you help me make mine work?

#8

How do you change two values instead of just one?

#10

Yes, you can use for loop to make this

Also keep in mind that the code was made by LunaticD0nutz (my friend) so blame her if smth doesn’t work lol

The function that checks the number value every heartbeat

function keepChecking(gradient, value1, value2, value3)
	runService.Heartbeat:Connect(function()
		gradient.Transparency = NumberSequence.new{
			NumberSequenceKeypoint.new(0, value1.Value),
			NumberSequenceKeypoint.new(0.5, value2.Value),
			NumberSequenceKeypoint.new(1, value3.Value)
		}
	end)
end

And here’s the main function:

--Applies the things for the gradient to work
	textLabel.BackgroundTransparency = 0
	gradient.Transparency = transparencySequence
	
	-- We get the keypoints from the gradient's transparency
	local keypoint1 = gradient.Transparency.Keypoints[1]
	local keypoint2 = gradient.Transparency.Keypoints[2]
	local keypoint3 = gradient.Transparency.Keypoints[3]
	
	-- We create those number values
	local numberValue1 = Instance.new("NumberValue")
	local numberValue2 = Instance.new("NumberValue")
	local numberValue3 = Instance.new("NumberValue")
	
	-- For Defualt, we apply the keypoint's values to each one
	numberValue1.Value = keypoint1.Value
	numberValue2.Value = keypoint2.Value
	numberValue3.Value = keypoint3.Value
	
	-- Creates the tween for numberValues, change tweeninfo and the values for your needs.
	local TWEEN_keypoint1 = game:GetService("TweenService"):Create(numberValue1, TweenInfo.new(2), {Value = 0})
	local TWEEN_keypoint2 = game:GetService("TweenService"):Create(numberValue2, TweenInfo.new(1.5), {Value = 0})
	local TWEEN_keypoint3 = game:GetService("TweenService"):Create(numberValue3, TweenInfo.new(2), {Value = 0})
	
	-- Launches the "keepChecking" function, if you don't know what task.spawn does, it's basically launching a function, and it just moves on without waiting for the function to finish.
	-- We make "local keepChecking" so then we can cancel the thread (function)

	local keepingChecking = task.spawn(keepChecking, gradient, numberValue1, numberValue2, numberValue3)
	
	--Playing the tweens
	TWEEN_keypoint1:Play()
	TWEEN_keypoint2:Play()
	TWEEN_keypoint3:Play()
	
	--When the last tween is completed, it canceles the thread (function)
	TWEEN_keypoint3.Completed:Connect(function()
		task.cancel(keepingChecking)
	end)