Text "Fade-Out" Efeect Delay

Help and Feedback Scripting Support
, ,
#1

  1. What do you want to achieve? Keep it simple and clear!
    I want to make a fade-in and fade-out effect where when I hover my mouse over a button a text label appears and when I stop hovering my mouse over the button the text label dissapears.

  2. What is the issue? Include screenshots / videos if possible!
    The issue is that when I stop hovering my mouse over the button, the label “fades out” first before the text. Here is what I mean:

  1. What solutions have you tried so far? Did you look for solutions on the Developer Hub?
    I have tried adding a ‘wait(0.2)’ so that the text transparency happens in the same amount of time as the tween does but that has not worked.

Here is what I have scripted for this effect so far:

local tweenInfo = TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)

local function createTween(object, properties)
	return TweenService:Create(object, tweenInfo, properties)
end

for _, button in ipairs(Button) do
	local iconGlow = button:FindFirstChildOfClass("ImageLabel")
	local icon = iconGlow and iconGlow:FindFirstChildOfClass("ImageLabel")
	local label = button:FindFirstChildOfClass("TextLabel")

	if icon then
		button.MouseEnter:Connect(function()
			createTween(icon, {Size = UDim2.new(0, 35, 0, 35)}):Play()
			createTween(iconGlow, {Size = UDim2.new(0, 35, 0, 35), ImageTransparency = 0.75}):Play()

			label.Visible = true
			createTween(label, {Size = UDim2.new(0, 100, 0, 45)}):Play()
			wait(0.2)
			label.TextTransparency = 0.2
		end)

		button.MouseLeave:Connect(function()
			createTween(icon, {Size = UDim2.new(0, 30, 0, 30)}):Play()
			createTween(iconGlow, {Size = UDim2.new(0, 30, 0, 30), ImageTransparency = 1}):Play()

			label.TextTransparency = 1
			createTween(label, {Size = UDim2.new(0, 0, 0, 45)}):Play()
			wait(0.2)
			label.Visible = false
		end)
	end
end
#2

I would use a For Loop, here’s an example I have in my game,

local text = script.Parent.TextLabel

for i = 100, 0, -1 do
	text.Transparency = i / 100
	wait(0.05)
end

but you could also use tween service I believe but I feel like this way is a lot more simple

#3

I use the Tween.Completed function in my user interface.

Here’s an example Code of Tween.Completed:

local TweenService = game:GetService("TweenService")
local Example = script.Parent

local function CreateTween()
	local Info = TweenInfo.new(0.5, Enum.EasingStyle.Linear, Enum.EasingDirection.In)

	return TweenService:Create(Example, Info, {Size = UDim2.fromScale(0.5, 0.25)})
end

local Tween = CreateTween()

print("Start")
Tween:Play()

Tween.Completed:Wait()
print("End")
#4

You can either:

  1. Use a faster time value for the TextLabel. Tweak around the time values to get a good effect.
  2. Use a CanvasGroup and fade the GroupTransparency.