Fading GUI script

Help and Feedback Scripting Support
,
#1

I’m currently doing a script where the GUI fades when you wait a certain amount of seconds but it won’t work. Here’s the script, (My brother made the script for me but I feel as if there’s a more advanced and easier way to do it).

wait(15)

local frame = script.Parent

frame.BackgroundTransparency = 0.1
wait(0.05)
frame.BackgroundTransparency = 0.2
wait(0.05)
frame.BackgroundTransparency = 0.3
wait(0.05)
frame.BackgroundTransparency = 0.4
wait(0.05)
frame.BackgroundTransparency = 0.5
wait(0.05)
frame.BackgroundTransparency = 0.6
wait(0.05)
frame.BackgroundTransparency = 0.7
wait(0.05)
frame.BackgroundTransparency = 0.8
wait(0.05)
frame.BackgroundTransparency = 0.9
wait(0.05)
frame.BackgroundTransparency = 1
wait(0.1)
frame.Visible = false

10 Likes
#2

There most definitely is, one way is using TweenService.

local TweenService = game:GetService('TweenService')
local Frame = script.Parent

TweenService:Create(
    Frame, -- UI object you're tweening, in this case it's Frame
    TweenInfo.new(2), -- Amount of seconds
    {BackgroundTransparency = 1} -- Goal
):Play() -- Plays your tween
35 Likes
ClickDetector GUI not working
#3

Woah there that’s expensive.
Use Tweening instead, it’ll make that much easier.

2 Likes
#4

Like @lluckvy says you should a tween.

#5

If you wish to make it fade very smoothly I suggest using TweeningService like @lluckvy did:

local TweenService = game:GetService('TweenService')
local Frame = script.Parent

wait(15)

TweenService:Create(
    Frame, -- UI object you're tweening, in this case it's Frame
    TweenInfo.new(2), -- Amount of seconds
    {BackgroundTransparency = 1} -- Goal
):Play() -- Plays your tween
-- Everything under here will immediately start playing. So we will have to wait until it has ended
tween.Completed:wait() -- Wait until the tween has been completed

wait(.1) -- extra wait you added
frame.Visible = false

Else you could use a for loop like so:

local Frame = script.Parent

wait(15)
-- The variable I will be equal to 0 at the start every time the for loop runs 0.1 will be added until it hits 1
for i = 0, 1, 0.1 do
   -- i = start, end, addition
   frame.BackgroundTransparency = i
   wait(.05)
end

-- Everything under here will run after the for loop has ended.
wait(0.1)
frame.Visible = false
3 Likes
#6

Much Easier way:

local frame = script.Parent
wait(15) 

for i = 0, 1, 0.1 do -- Starting at 0 transparency, ending at 1 transparency, adding 0.1 to the transparency
	frame.BackgroundTransparency = i
	wait(0.05)
end
4 Likes
#7

Hello! I can help you with this.

I will give a step by step guide as to not just give it away, instead help you learn.

The first thing we want to do is make a variable for the service. It will look something like this.

local tweenservice = game:GetService("TweenService")

Once we have done that, we want to make a few extra variables that hold information that we will use in the tween.

local tweenservice = game:GetService("TweenService")

local UI = script.Parent

local info = TweenInfo.new(
	3, -- Time it takes to fade
	Enum.EasingStyle.Linear -- Type of transition
)

local startpoint = {}
startpoint.BackgroundTransparency = (1)
startpoint.TextTransparency = (1) -- Only have this line if it is a TextLabel or a TextBox

local endPoint = {}
endPoint.BackgroundTransparency = (0)
endPoint.TextTransparency = (0) -- Only have this line if it is a TextLabel or a TextBox

Now that we have all the variables, it is time to write an event that will trigger the tween.

Something like this would work.

game.Players.LocalPlayer.Chatted:Connect(function(msg)
	if msg == "Fade" then
		--Code
	end
end)

Alright. Now we just need to call the tween.

game.Players.LocalPlayer.Chatted:Connect(function(msg)
	if msg == "Fade" then
		local fade = tweenservice:Create(UI, info, endPoint)
		fade:Play()
	end
end)

That should be it! Now lets put it all together.

local tweenservice = game:GetService("TweenService")

local UI = script.Parent

local info = TweenInfo.new(
	3, -- Time it takes to fade
	Enum.EasingStyle.Linear -- Type of transition
)

local startpoint = {}
startpoint.BackgroundTransparency = (1)


local endPoint = {}
endPoint.BackgroundTransparency = (0)


game.Players.LocalPlayer.Chatted:Connect(function(msg)
	if msg == "Fade" then
		local fade = tweenservice:Create(UI, info, endPoint)
		fade:Play()
	end
end)

Note: This must be a local script and the parent must be the UI. Hope this Helped!

11 Likes