How to make a GUI fade in roblox studio?

Question

Hello roblox studio scripters,

I'm a intermediate scripter-builder and need some help with the gui for my game.

I have a start screen with a play button like this:

I'm trying to fade out the gui when the button is clicked, but none of the tutorials worked. This is my script for the button:

local button = script.Parent
local gui = script.Parent.Parent.Parent

button.MouseButton1Down:Connect(function()
    gui.Enabled = false
end)

I don't know how to do the changing, would it be BackgroundTransparency? How would you change the transparency from 0 to 1 in 0.01 increments?

I tried to make the gui fade with a for loop, changing the BackgroundTransparency but that didn't work, this is that code:

local button = script.Parent
local gui = script.Parent.Parent.Parent

button.MouseButton1Down:Connect(function()
    for i = 0, 100, 1 do
        gui.Frame.BackgroundTransparency + 0.01
        wait(0.01)
        gui.Enabled = false
    end
end)

I don't know why it isn't working. If I have a typo or something, please tell me. Thanks!

Answer 1

The loop solution has a few typos, here it is fixed:

local button = script.Parent
local gui = script.Parent.Parent.Parent

button.MouseButton1Down:Connect(function()
    for i = 0, 100 do
        gui.Frame.BackgroundTransparency += 0.01 -- += adds 0.01 each time
        task.wait(0.01) -- better than wait(0.01)
    end
    gui.Enabled = false
end)

However, this is not an ideal solution. A better system would use Roblox's TweenService to change the gui's transparency. Tweens are less jittery, are easier to modify, and have lots of customisation properties including repeating, changing length of time, and style of easing (e.g. going faster at first, then slower near the end; see Easing Styles on the Roblox docs).

local TweenService = game:GetService("TweenService")

local button = script.Parent
local gui = script.Parent.Parent.Parent

local tweenInfo = TweenInfo.new(
    2, -- Time
    Enum.EasingStyle.Linear, -- Easing Style
    Enum.EasingDirection.Out -- Easing Direction
    -- See https://create.roblox.com/docs/reference/engine/datatypes/TweenInfo for more available properties
)

local tween = TweenService:Create(
    gui.Frame, -- Instance to tween
    tweenInfo, -- TweenInfo
    { Transparency = 1 } -- What we want to change
)

button.MouseButton1Down:Connect(function()
    tween:Play()
    tween.Completed:Wait() -- Wait until tween is complete
    gui.Enabled = false
end)

Though both of these solutions change only the transparency of the background, so the child elements, such as the Playbutton, will stay visible until the gui is disabled. You may wish to replace the Frame with a CanvasGroup, which also changes the transparency of its children when its GroupTransparency property is changed.

local tween = TweenService:Create(
    gui.CanvasGroup, -- Instance to tween
    tweenInfo, -- TweenInfo
    { GroupTransparency = 1 } -- What we want to change
)