PcoWSkbVqDnWTu_dm2ix
We use cookies on this site to enhance your user experience

Add Fade to GUI Elements

Add Fade to GUI Elements

Jun 23 2018, 2:01 AM PST

Problem

You want to create a GUI that when you hover over it, it fades out, then when you hover out of it, it fades back in with a random color.

Solution

Use the MouseEnter and MouseLeave events.

local button = script.Parent
button.MouseEnter:connect(function()
	for i = 0, 1, .1 do
		button.BackgroundTransparency = i
		wait()
	end
end)
button.MouseLeave:connect(function()
	button.BackgroundColor3 = BrickColor.random().Color
	for i = 1, 0, -.1 do
		button.BackgroundTransparency = i
		wait()
	end
end)

Discussion

Since we’re using events we must put this code into a LocalScript which should be within a TextButton (which gives us these events unlike a Frame or TextLabel), and that TextButton should be in a ScreenGui (in order for it to be rendered), and then that should be inside of the StarterGui so once the game starts up, all players have this. Now you can feel free to change the properties of the TextButton as you wish.

Inside the script we first connect the MouseEnter event which fires when the player hovers over the GUI. We animate the button’s BackgroundTransparency so it fades out. Do note if you actually have Text in the TextButton set, if you want to fade out the Text as well, you need to add this line of code wherever you see BackgroundTransparency.

button.TextTransparency = i

You need this because a TextButton has two separate properties controlling the transparency of the background and text.

In the MouseLeave event where the player hovers off the GUI, we set the color of the background to a random color. We’ve used BrickColor before, but now we’re getting a random BrickColor and getting a Color3 from it (don’t worry this will be covered in depth later on). Then we just fade out the GUI.

Tags:
  • gui-effect