Fading Image label using UI gradient

Help and Feedback Scripting Support
, ,
#1

Hello! Im attempting to use UI gradient, and change the Offset value in a loop (like, with tweenservice) so that the gradient fades through the ImageLabel. (This is for an icon hovering over an NPC’s head.)
Image: Icon - Album on Imgur

My plan was to use TweenService to make it look like a smooth transition.
My issue is I have no experience with this, and my script is a mess and doesnt work. I have no idea how to make something like this work. I was trying to make it cycle through different offsets using a script, however it seems to not work

Heres my code, which is a complete mess

local TweenService = game:GetService("TweenService")
local Tween

function Fade()
	Object.Offset = {0.1, 0.1}
	wait(1)
	Object.Offset = {0.2, 0.2}
	wait(1)
	Object.Offset = {0.3, 0.3}
	wait(1)
	Object.Offset = {0.4, 0.4}
	wait(1)
	Object.Offset = {0.5, 0.5}	
	wait(1)
	Object.Offset = {0.6, 0.6} 
	wait(1)
	Object.Offset = {0.7, 0.7}
	wait(1)
	Object.Offset = {0.8, 0.8}
	wait(1)
	Object.Offset = {0.9, 0.9}
	wait(1)
	Object.Offset = {1, 1}	
	wait(1)
	Object.Offset = {-0.9, -0.9}
	wait(1)
	Object.Offset = {-0.8, -0.8}
	wait(1)
	Object.Offset = {-0.7, -0.7}
	wait(1)
	Object.Offset = {-0.6, -0.6}
	wait(1)
	Object.Offset = {-0.5, -0.5}
	wait(1)
	Object.Offset = {-0.4, -0.4}
	wait(1)
	Object.Offset = {-0.3, -0.3}
	wait(1)
	Object.Offset = {-0.2, -0.2}
	wait(1)
	Object.Offset = {-0.1, -0.1}
end

Fade()

If anyone knows how I could go about fixing this or making this work let me know, tysm :slight_smile:
Maybe theres a more efficient way to go about this, that im not aware of

#2

I just ran into a similar question mere minutes ago. So basically, UIGradients’ properties can’t be tweened natively so you have to create a number value, then tween the number value’s Value property instead (I’m making the assumption that you’re trying to tween the transparency, if you’re trying to tween the colour let me know and I’ll help with that instead)

local numberValue = Instance.new('NumberValue')
numberValue.Changed:Connect(function()
    uiGradient.Transparency = NumberRange.new(numberValue.Value)
end)
tweenService:Create(numberValue, TweenInfo.new(1), {Value = 0})

But to address your code, you can use a standard for loop to shorten it significantly:

for i = 0,1,0.1 do
    Object.Offset = {i, i}
    wait(1)
end
for i = 1,0,-0.1 do
    Object.Offset = {i, i}
end
#3

Hello! Thanks for the reply.

The effect i was going for was something like out of some mobile games, where you have a UI effect of a bar passing through the button, in a loop.
Like this: fade - Album on Imgur

#4

Ah okay.

It’s a little bit different since we’re working with colour sequences but here’s what I was able to come up with:

local tweenService = game:GetService('TweenService')

local numberValue = Instance.new('NumberValue')

local uiGradient = script.Parent.UIGradient

numberValue.Changed:Connect(function()
		local colorSequenceKeypoints = {
			ColorSequenceKeypoint.new(0, Color3.new(1,1,1));
			ColorSequenceKeypoint.new(math.clamp(numberValue.Value, 0.001, 0.999), Color3.new()); -- clamping because sometimes it flickers b/c it assigns 2 colours to 1 number
			ColorSequenceKeypoint.new(1,Color3.new(1,1,1))
		}
		uiGradient.Color = ColorSequence.new(colorSequenceKeypoints)
end)

tweenService:Create(numberValue, TweenInfo.new(0.5, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true), {['Value'] = 1}):Play()
1 Like
#5

Amazing! Thanks so much. Is there a way to add a delay or slow it down? Thanks so much for the help with this

#6

Yeah you can slow it down with the first argument of the TweenInfo, however adding a delay is a bit harder because we have to wrap it in a loop:

local tweenService = game:GetService('TweenService')

local numberValue = Instance.new('NumberValue')

local uiGradient = script.Parent.UIGradient

numberValue.Changed:Connect(function()
	local colorSequenceKeypoints = {
		ColorSequenceKeypoint.new(0, Color3.new(1,1,1));
		ColorSequenceKeypoint.new(math.clamp(numberValue.Value, 0.001, 0.999), Color3.new());
		ColorSequenceKeypoint.new(1,Color3.new(1,1,1))
	}
	uiGradient.Color = ColorSequence.new(colorSequenceKeypoints)
end)
local tweenInfo = TweenInfo.new(0.5) -- change this to make it slower
while true do
	for i = 0,1 do
		print('ok')
		local tween = tweenService:Create(numberValue, tweenInfo, {['Value'] = i})
		tween:Play()
		tween.Completed:Wait()
		task.wait(1)
	end
end

2 Likes
#7

Awesome tysm bro, lifesaver fr :slight_smile:

1 Like