Help with fading gui

Help and Feedback Scripting Support
#1

I’m trying to make a fading transition into my game. The player presses the play button, and there is a gui that fades in and out to transition into the game. The problem is that the script is not working. I’m not getting any errors but the gui doesn’t show anything.
This is the script:

local fadeScreen = starterGui.Fade
local playButton = script.Parent

playButton.MouseButton1Down:Connect(function()
	
	repeat
		fadeScreen.Frame.BackgroundTransparency = fadeScreen.Frame.BackgroundTransparency - 0.05;
		wait(0.05);
	until fadeScreen.Frame.BackgroundTransparency <= 0;	
	
	wait(1)
	
	repeat
		fadeScreen.Frame.BackgroundTransparency = fadeScreen.Frame.BackgroundTransparency + 0.05;
		wait(0.05);
	until fadeScreen.Frame.BackgroundTransparency >= 0;
	
	--chat and leaderboard is avaliable again
	local starterGui = game.StarterGui
	starterGui:SetCoreGuiEnabled("Chat",true)
	starterGui:SetCoreGuiEnabled("PlayerList",true)
end)
1 Like
#2

Why are you using a “repeat” loop to make the fadeout? Just use TweenService, it grants a smoother fade out and it’s more better than having to use a repeat loop, which is not really good for this situation.

Here is an example:

-------------
--- INDEX ---
-------------

-- SERVICES
local Players = game:GetService("Players");
local TweenService = game:GetService("TweenService");

-- VARIABLES/DECLARABLES
local TI = TweenInfo.new(
      0.2, --time it takes for the tween to complete its goal
     Enum.EasingStyle.Quad, --EasingStyle
     Enum.EasingDirection.Out, --EasingDirection
     0, --how many times it will repeat back and forth. set to -1 if you want it to loop forever
     false, --if set to true, the changes the tween made will be reverted once the tween is completed
     0, --delay time
);

local goal = { BackgroundTransparency = 0; }
--get PlayerGui, not StarterGui
local client = Players.LocalPlayer;
local PlayerGui = client:FindFirstChild("PlayerGui");
local fadeScreen = PlayerGui.Fade;
local playButton = script.Parent;

--// TWEEN
local TweenFade = TweenService:Create(fadeScreen, TweenInfo, goal);

playButton.MouseButton1Down:Connect(function();
    TweenFade:Play(); --play the tween and apply the effects
end)

There is also an event called Tween.Completed which will fire once a specified tween has completed.

2 Likes
#3

I’m guessing you have your gui’s Transparency set at 1 to begin with?
Your second repeat loop should probably be until Transparency >=1

#4

I’ve tried multiple different ways to make it fade, and none of them worked. This is just the most recent one I tried.

#5

TweenService should work for this one, the main issue is that you’re trying to change the GUI transparency through StarterGUI, and not PlayerGui.

Making GUI changes in-game like making them appear etc. etc. should be done on the GUI in PlayerGui, which is located inside a Player in the Players service.

Try using my script and it should work.

#6

It’s saying that Fade is not a valid member of PlayerGui even though it’s in there when the game runs…

#7

try calling :WaitForChild() on it

#8

Gui sometimes load slower and you should do as @xxIamInevitable said

#9

I mostly use this fading script. (It will be in startercharacterscripts)

local TweenService = game:GetService("TweenService")
local player = game.Players.LocalPlayer
local ScreenGui = player.PlayerGui.ScreenGui
local Button = ScreenGui.TextButton
local Transition2 = ScreenGui.Transition

Button.MouseButton1Click:Connect(function(timer)
	local goal_start = {}
	local goal_end = {}
    goal_start.BackgroundTransparency = 0
	goal_end.BackgroundTransparency = 1
	local tweenInfo = TweenInfo.new(2) -- add N time
    local tween_start = TweenService:Create(Transition2, tweenInfo, goal_start)
    local tween_end = TweenService:Create(Transition2, tweenInfo, goal_end)
	tween_start:Play()
    wait(4) -- seconds
	tween_end:Play()
end)

Here’s a fixed version since this was happens when you put TweenInfo instead of TI:
image
-------------

--- INDEX ---

-------------

-- SERVICES

local Players = game:GetService("Players");
local TweenService = game:GetService("TweenService");

-- VARIABLES/DECLARABLES

local TI = TweenInfo.new(
0.2, --time it takes for the tween to complete its goal
Enum.EasingStyle.Quad, --EasingStyle
Enum.EasingDirection.Out, --EasingDirection
0, --how many times it will repeat back and forth. set to -1 if you want it to loop forever
false, --if set to true, the changes the tween made will be reverted once the tween is completed
0 --delay time
);

local goal = { BackgroundTransparency = 0; }
--get PlayerGui, not StarterGui
local client = Players.LocalPlayer;
local PlayerGui = client:FindFirstChild("PlayerGui");
local fadeScreen = PlayerGui:WaitForChild("Fade")
local FadeFrame = fadeScreen.Frame
local playButton = script.Parent;

--// TWEEN

local TweenFade = TweenService:Create(FadeFrame, TI, goal)

playButton.MouseButton1Down:Connect(function()
TweenFade:Play(); --play the tween and apply the effects
end)
#10

Judging from what their former script is, OP wants a smoother fade out transition, and a slightly faster one. Just providing time for a tween isn’t really what I’d recommend. (2 also takes a lot of time)

#11

You should use TweenService instead of having a repeat loop. Here’s an example:

local TweenService = game:GetService("TweenService")
local Tween_Info = TweenInfo.new(3, Enum.EasingStyle.Linear, Enum.EasingDirection.In, 0, false, 0)

TweenService:Create(yourGUIhere, Tween_Info, {Trasparency = 0}):Play()