Most Efficient Way To Make A Frame Fade Out

Help and Feedback Scripting Support
, ,
#1

Hey everyone! I’ve been recently wondering what the most efficient way is to make a frame fade out. Now, we obviously know that we can utilize the TweenService for this, but what about all of the UI elements inside the frame? They won’t be fading out, only the background frame will.

You could just use a for loop and get the frame’s children/descendants, though yet again, you’re gonna have to go through the process of if statements to check what type of object it is (ImageLabel, TextLabel, Frame, TextButton, etc).

So what’s the most efficient way to do this?

4 Likes
#2

What I do to achieve this is creating a transparent frame for all my Buttons, Labels, etc. And have another frame that is separate for the background that isn’t transparent. There is probably other more efficient ways to go about this but this is what works for me.

1 Like
#3

I don’t exactly understand, could you try explaining a bit better for me?

1 Like
#4

I might be reading this wrong, do you mean an opacity fade out? Of what? Just the background?

#5

Yes, I do mean an opacity fade out of the entire frame including the UI elements inside, all at the same time.

#6

I thought you wanted the background only to fade out. Okay, in this case use :GetChildren()

#7

Since I’m not a good scripter, I just reference my frame, set the frame transparency by .1 each time, until it fades out

example but not full script:

MyFrame = game.Players.LocalPlayer:WaitForChild("PlayerGui").MyFrame.Frame

MyFrame.BackgroundTransparency = 0
wait()
MyFrame.BackgroundTransparency = 0.1
wait()
MyFrame.BackgroundTransparency = 0.2

and then it just continues until 1. I know it’s not THAT efficient, and there’s probably a much better way to do it with tweening*, but for someone who isn’t that good at scripting, it works just fine for me. The same can be done with text labels, image labels, etc. Let me know if you’d like me to reply with an example of what the script does*. ^^

-Void_Xiety :white_heart:

#8

don’t do this, this is bad, neither smooth…
Do this;

game:GetService("TweenService"):Create(Frame,TweenInfo.new(1),BackgroundTransparency = {1}):Play()
#9

Hmm, interesting way of making your UI element fade out. xD

Though, I’m trying to make ALL of the UI elements inside the background frame fade out too, not just the background itself.

Though, here’s a more efficient thing for you if you wish to try it out:

local tweenService = game:GetService("TweenService")
local MyFrame = game:GetService("Players").LocalPlayer:WaitForChild("PlayerGui").MyFrame.Frame

tweenService:Create(MyFrame, TweenInfo.new(0.5), {BackgroundTransparency = 1}):Play()
1 Like
#10

See? I told you there would be a much better way. Like I mentioned, I’m not a full blown scripter, but it works perfectly fine for me, and is actually quite smooth. At least it fades out smoothly anyways. I’ll test this out though! This could also help OP.

#11

Well uh, yeah this could help people like me, and others as well! And with the uhm… interesting script I posted you can do the same with any amount of UI you like. Only, it might reach 100 lines of script VERY fast. :confused:

#12

You may wanna read this part of my post. :joy:

#13

Yeah so with the script I posted I did this with it, but I decided to leave the frame in the background alone because I got lazy. However I did this effect with the text. It’s smooth IMO, but might not to better developers than me. So in case you’re curious, here’s the video.

It also fades back out, but Gyazo only records 6 seconds for non premium users.

1 Like
#14

Not sure if this has been answered but TweenService for every single descendant. It can be easily done with an iterating loop and a basic function that handles tween info.

#15

You asked for efficiency, none of the answers here have been optimized except for @Vyntrick’s, but that one isn’t too beautiful.

local frame = -- Reference Frame here.
local frameWait = game:GetService("RunService").RenderStepped;
local descendants = frame:GetDescendants(); -- Optimization, no need to re-find descendants.

for i = 0, 1, 0.05 do -- Adjust last number for step. This will go 20 times until it reaches transparency of 1.
  frame.Transparency = i;
  for _, currObj in pairs(descendants) do
    if currObj:IsA("GuiObject") then -- GuiObject inheritance of "Transparency" hidden property.
      currObj.Transparency = i;
    end;
  end;
  frameWait:Wait();
end;

This should work, tell me if it doesn’t.

2 Likes
#16

I tried this with the TweenService instead of an iteration and it works, though the only problem being that it sets the BackgroundTransparency of TextLabels to 0, which I do not want. (I was doing fade in and out.)

#17

If you used my version, you could add another if/elseif checking if textlabel/textbutton and then only modifying TextTransparency property.

#18

May I ask why you care so much about optimization? It really doesn’t matter unless you’re running the code every frame or something, which would be a little crazy for something like tweening. I would recommend just looping through each element checking if they belong to a super class with transparency or image transparency. Feel free to ask me for some api about that.

#19

I ended up with this function that works for me quite well.

local function tweenThingy(frame, transparency)
	tweenService:Create(frame, TweenInfo.new(0.5), {Transparency = transparency}):Play()

	for _, v in pairs(frame:GetDescendants()) do
		if v:IsA("GuiObject") then
			if v:IsA("TextLabel") then
				tweenService:Create(v, TweenInfo.new(0.5), {TextTransparency = transparency}):Play()
			else
				tweenService:Create(v, TweenInfo.new(0.5), {Transparency = transparency}):Play()
			end	
		end
	end
end

Don’t ask why the function is named like that. xD

3 Likes
#20

Does this work in both Local Script, AND Scripts? Just a quick question. Thanks :slight_smile: