How would I make a Frame holding images/text fade away after a about 8 seconds

Help and Feedback Scripting Support
,
#1

Hello I was wondering how I could make my loading screen fade away after 8 seconds then it would start to fade.

The script I have rn simply just makes the frame not visible, id rather have it fade but also destroy it after.

sorry if this is asking for much but im a complete noob at scripting ;b

script.Parent.Parent.Enabled = true

wait(10)

script.Parent.Visible=false
#2

Use tween service to tween the transparency of the Ui

#3

you can do that? hm interesting

#4

Just like you tween anything else ui(s) can be tweened
These are the data types that can be tweened (Check it out on the devwiki)

image
image858Ă—440 22.7 KB

1 Like
#5

Look into TweenService. It is exactly what you want to achieve.

#6

Instead of making the loading screen fade away, I would personally make a black screen fade in and fade out instead since it gives out a better transition effect (personal opinion). If you would like to achieve this, then do as follows.

  1. Make a new Frame inside the ScreenGui
  2. Change its ZIndex to a high number to make sure it shows above the loading screen
  3. Set its Size to 1, 0, 1, 0 (make sure the ScreenGui’s property IgnoreGuiInset is true)
  4. Set its AnchorPoint to 0.5, 0.5
  5. Set its Position to 0.5, 0, 0.5, 0
  6. Set its BackgroundColor3 to 0, 0, 0
  7. Set its Visible to false (you will make it visible in the script)

Now you have successfully created a black screen!

To make it fade in and fade out, you will have to do it using TweenService, like this:
(Don’t forget to make a variable for the Black Frame)

local blackFrame = script.Parent.BlackFrame -- Reference the Black Frame that you just created
-- I assume that you know how to make variables... right?

local fadeInfo= TweenInfo.new(1) -- Change the number on how long you want fading to be

local fadeShow = game:GetService("TweenService"):Create(blackFrame, fadeInfo,{BackgroundTransparency = 0})
local fadeHide = game:GetService("TweenService"):Create(blackFrame, fadeInfo,{BackgroundTransparency = 1})

Now that you have created the TweenService variables, it’s time to make it fade when loading is done

-- Put this code AFTER loading is done
fadeShow:Play() -- This line will make the black frame fade in
repeat wait() until blackFrame.BackgroundTransparency <= 0

loadingFrame.Visible = false
-- Make the loading frame(s) invisible here, replace the 'loadingFrame' with your Loading Frame variable
-- DON'T destroy the ScreenGui since the black fading will disappear

wait(0.5)
fadeHide:Play()
repeat wait() until blackFrame.BackgroundTransparency >= 1


--This is where you can remove the whole loading screen by destroying the ScreenGui if you would like to (optional)

--now you can start your code here on what happens when the loading screen is gone

If this helped and it solved your question, please mark this post as a Solution, thanks!

2 Likes
#7

Why do repeat wait() until blackFrame.BackgroundTransparency <= 0 when you can simply use the .Completed event of a tween, like so: fadeShow.Completed:Wait()

1 Like
#8

Ah yes I completely forgot about that, sorry!

#9

So I’m not sure if your method would work with what I’m going for. I like the idea and ill try it out but i’ll show you what I’m dealing with

1

above is the GUI its self. inside the Frame is the script that makes it not visible.

2.PNG
2.PNG1649Ă—880 67.5 KB

Above is how the loading screen looks. but I’d like it to sort of fade y’know.

would your method still work? again I’m a complete idiot with this stuff so im sure it might but I think tween might work? idk LOL

(also I was not expecting you to write out a huge thing that was awesome of you!!!)

1 Like
#10

XD, well if you would like to fade out just the loading screen itself, then you would do this

local frame = script.Parent

local fadeInfo= TweenInfo.new(1) -- Change the number on how long you want fading to be

-- This is the format of the TweenService variables
local fadeExample =  game:GetService("TweenService"):Create(OBJECT_NAME, TWEEN_INFO,{PROPERTY_TO_CHANGE = 1})

-- And this is how it is used

-- if object is a frame:
local fadeHide1 = game:GetService("TweenService"):Create(frame, fadeInfo,{BackgroundTransparency = 1})

-- If object is an image:
local fadeHide2 = game:GetService("TweenService"):Create(imageLabel, fadeInfo,{ImageTransparency = 1})

-- If object is a text:
local fadeHide3 = game:GetService("TweenService"):Create(textLabel, fadeInfo,{TextTransparency = 1})

Basically, you will have to create TweenService variables for all of your loading screen items.

I think there is a more efficient way for this but I don’t have a huge experience of scripting yet so this is the way I would do it.

Then once you are done with the variables, simply play them when loading is done like this:

-- Change fadeHides' with the variable name of the TweenServices you created
fadeHide1:Play()
fadeHide2:Play()
fadeHide3:Play()
fadeHide4:Play()

-- Here you could either

-- 1: Use wait()
-- put the number inside of the number you put inside the fadeInfo
-- This will wait for (number) seconds
wait(1)

-- 2: Use repeat wait() until ...
-- This will wait until the frame's transparency is 1 or higher (basically when it's invisible)
-- you just have to detect one of them on being hidden since all of them are tweening at the same time with the same speed, so if one of them is hidden, all of them are hidden since we used the same TweenInfo for all of the tweens
repeat wait() until frame.BackgroundTransparency >= 1

-- 3: Use tween.Completed:Wait()
-- This waits for the tween to be finished
-- You can just wait for 1 tween to complete like before since on our case, "if one of them is hidden, all of them are hidden"
fadeShow1.Completed:Wait()

-- Only use 1 of the methods btw

--Now you put here your code when the fade is done!

Put this code AFTER the wait(10) but BEFORE the code where you make it invisible. Basically, put it in between the wait(10) and the frame.Visible = false.

1 Like
#11

Am I taking the right path here? or somewhat close :sweat_smile:

script.Parent.Parent.Enabled = true

local frame = script.Parent

local fadeInfo= TweenInfo.new(1) -- Change the number on how long you want fading to be

-- This is the format of the TweenService variables

local fadeExample = game:GetService("TweenService"):Create(frame, TWEEN_INFO,{PROPERTY_TO_CHANGE = 1})

-- And this is how it is used

-- if object is a frame:

local fadeHide1 = game:GetService("TweenService"):Create(frame, fadeInfo,{BackgroundTransparency = 1})

-- If object is an image:

local fadeHide2 = game:GetService("TweenService"):Create(GameTitle, fadeInfo,{ImageTransparency = 1})

local fadeHide3 = game:GetService("TweenService"):Create(MapLogo, fadeInfo,{ImageTransparency = 1})

-- If object is a text:

local fadeHide4 = game:GetService("TweenService"):Create(Community, fadeInfo,{TextTransparency = 1})

local fadeHide5 = game:GetService("TweenService"):Create(Description, fadeInfo,{TextTransparency = 1})

local fadeHide6 = game:GetService("TweenService"):Create(MapName, fadeInfo,{TextTransparency = 1})

wait(10)

-- Change fadeHides' with the variable name of the TweenServices you created

fadeHide1:Play()

fadeHide2:Play()

fadeHide3:Play()

fadeHide4:Play()

fadeHide5:Play()

fadeHide6:Play()

wait(1)

script.Parent.Visible=false

2

Ima have to learn these tween things more :joy: :joy:

sorry for bothering you… I’m also gonna have to get to bed cause it 2:30 AM

1 Like
#12

Might as well do this

for i = 100, 0, -1 do
     frame.BackgroundTransparency -= 0.01
     wait(0.01)
end

Easiest way in my opinion.

1 Like
#13

Hahah, you are taking the right path, but you just need to define the object variables first (also you didn’t delete the format which is just an example). Anyways, here is the full code since teaching variables is kinda hard xD (although you would need to know how to use variables since it is commonly used in scripts)

Before doing the script, make sure to rename the Descriptions to different names (“Description1” and the other is “Description2”) so that the script will work

Also will you also tween the Gradient? (since you didn’t put a tween for the Gradient frame)

script.Parent.Parent.Enabled = true

local frame = script.Parent
local Gradient = frame.Gradient
local GameTitle = frame.GameTitle
local MapLogo = frame.MapLogo
local Community = frame.Community
local Description1 = frame.Description1
local Description2 = frame.Description2
local MapName = frame.MapName

local fadeInfo= TweenInfo.new(1) -- Change the number on how long you want fading to be

-- Frame
local fadeHide1 = game:GetService("TweenService"):Create(frame, fadeInfo,{BackgroundTransparency = 1})

-- GameTitle
local fadeHide2 = game:GetService("TweenService"):Create(GameTitle, fadeInfo,{ImageTransparency = 1})

-- MapLogo
local fadeHide3 = game:GetService("TweenService"):Create(MapLogo, fadeInfo,{ImageTransparency = 1})

-- Community
local fadeHide4 = game:GetService("TweenService"):Create(Community, fadeInfo,{TextTransparency = 1})

-- Description1
local fadeHide5 = game:GetService("TweenService"):Create(Description1, fadeInfo,{TextTransparency = 1})

-- Description2
local fadeHide6 = game:GetService("TweenService"):Create(Description2, fadeInfo,{TextTransparency = 1})

-- MapName
local fadeHide7 = game:GetService("TweenService"):Create(MapName, fadeInfo,{TextTransparency = 1})

-- IF you will tween "Gradient", then just insert another tween here for "Gradient", make sure to use tweens for frame fading. Then insert a fadeHide8:Play() on where it belongs.

wait(10)

fadeHide1:Play()

fadeHide2:Play()

fadeHide3:Play()

fadeHide4:Play()

fadeHide5:Play()

fadeHide6:Play()

fadeHide7:Play()

wait(1)

script.Parent.Visible = false
1 Like
#14

That can also work, but using TweenService is smoother and using for loops will yield, so I personally prefer tweening instead.

#15

Bro I love you

but not actually in a love way y’know?
XD

no but holy crap that’s a lot more simple than I would of thought. I’m gonna defiantly be learning more from this because I really wanna learn more about Tweening so this has helped so much.

thank you for being such an amazing person and helping me out and getting this to work EXACTLY like how I was wanting it too!! :grin:

now I know what I have to do when i add more into it!

1 Like