How to make this

Hello developers! I just want to make GUI fading in order like this


also thank you 7kayoh for reference

1 Like

Put them under the same parent loop through the parent and tween each of them and add a small delay between them if you want(you can add them to a table and sort them to the order your like)

1 Like

It looks like a sequence of events, frame/button 1, 2, 3, and 4 tween exclusively. When the menu is activated you’ll notice it slides in the buttons in order, with the tween/ vector2s!

-- menu activates before this quote however you have it begin
-- we create 4 tweens for the buttons after the menu activates below.
local info =,Enum.EasingStyle.Linear) -- every button's animation duration
local tween1 = game:GetService("TweenService"):Create(button1,info,{Vector2 =}
local tween2 = game:GetService("TweenService"):Create(button2,info,{Vector2 =}
local tween3 = game:GetService("TweenService"):Create(button3,info,{Vector2 =}
local tween4 = game:GetService("TweenService"):Create(button4,info,{Vector2 =}
-- this can be a function, since the tween code is repetitive!
1 Like

Can you give me some examples of it in coding form, I’m still new about this kind of thing.

1 Like

Something like this would be how you could go around it.

local TweenService 		= game:GetService("TweenService")
for index,element in pairs (locationoftheuis:Getchildren()) do
TweenService:Create(element,, Enum.EasingStyle.Quart, Enum.EasingDirection.Out, 0, false, 0), {Transparency = 0)})	:Play()

Ui has to be transparency 1 beforehand to tween it in.

1 Like

I edited my comment to cover the basics of going in order by buttons, one by one. @Da_Fr0st covered the transparency portion, you’d be creating two tweens for each button, one for the translation, and one for the fade. Then you’d be playing both tweens at the same time, for each button respectively.