How can I make a GUI That fades in?

Help and Feedback Scripting Support
,
#1

Hey Developers!
I am making a story game…
In the lobby, just before the player teleports, a black gui appears, saying Teleporting.

screen12
screen121344×681 17.7 KB

And the script I’m using is this:

wait(0.7)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.1)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.5)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(0.5)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
wait(2)
script.Parent.BackgroundTransparency = script.Parent.BackgroundTransparency - 0.025
script.Parent.Label.Visible = true

It works fine, but the gui doesn’t appear smoothely.
I have looked at the other posts, but they don’t make sense to me…
So How can I make it fade in smoothly?

4 Likes
#2

You should use TweenService. It’s a lot easier and you don’t need to type so much. Try this -

 local tweenservice = game:GetService("TweenService")
local tweenduration = 1
local info = TweenInfo.new( tweenduration , Enum.EasingStyle.Linear , Enum.EasingDirection.InOut , 0 , false , 0 )

local tween = tweenservice:Create( script.Parent , info , { BackgroundTransparency = 1 } )
tween:Play()
5 Likes
#3

@ROCKs1333 that code is super messy. I highly suggest formatting it properly, but you’re on the right track.

--//Services

local TweenService = game:GetService("TweenService")

--//Variables

local Info = TweenInfo.new(
   1,  -- How long you want the tween to last
   Enum.EasingStyle.Linear, 
   Enum.EasingDirection.InOut, 
   0, 
   false, 
   0
)
local GUI = nil -- What is your GUI? Define it.

--//Functions

--you need 2 tweens to fade in and out

local function FadeGUI(TheGUI)
   local Tween1 = TweenService:Create(TheGUI, Info , { BackgroundTransparency = 1 })
   local Tween2 = TweenService:Create(TheGUI, Info , { BackgroundTransparency = 0 })
   Tween1:Play() -- the Tween to fade disappear
   Tween1.Completed:Wait()
   Tween2:Play() -- the Tween to fade in
end

--//Events

-- ?

--//Main

FadeGUI(GUI) -- the function needs you to define which GUI you want to Fade too.

In the function

local function FadeGUI(TheGUI)
	local Tween1 = TweenService:Create(TheGUI, Info , { BackgroundTransparency = 1 })
	local Tween2 = TweenService:Create(TheGUI, Info , { BackgroundTransparency = 0 })
	Tween1:Play() -- the Tween to fade disappear
	Tween1.Completed:Wait()
	Tween2:Play() -- the Tween to fade in
end

To use it, you need to call the function and define which UI you want to fade. If you want to make an effect that fades disappear, and then in, you need 2 tweens for this like shown. If not, then you delete the “Tween2:Play()” and then your function will look like this

local function FadeGUI(TheGUI)
	local Tween1 = TweenService:Create(TheGUI, Info , { BackgroundTransparency = 1 })
	Tween1:Play() -- the Tween to fade out ( or make GUI disappear)
end

Hope this helped!

8 Likes
#4

I don’t like making scripts unnecessarily long like yours.

3 Likes
#5

yes and that is why local exists

#6

Just some more info on tweening.

local Tween_Service = game:GetService( "TweenService")

local My_Tween_Info = TweenInfo.new(
1 -- How long the tween should last
Enum.EasingStyle.Linear -- the style you want it to tween with. Examples: Bounce, Quad, Linear, Quart. You can test what they all look like on your own.
Enum.EasingDirection.InOut -- I'm actually not really sure what this means, but do InOut.
0 -- How many times it should repeat.
false --Whether it should reverse back to the original transparency after it finishes.
0 -- If you did make it repeat, how many seconds do you want it to wait between each repition.
)

local Tween = TweenService:Create( The instance you want it to tween, the tween info you want it to use, the property you want it it change to. Put it in {} )
Tween:Play()

print( "Tween is playing")

Tween.Completed:Wait()

print(" The tween is finished")
2 Likes