How to make a Tweening GUI!

Resources Community Tutorials
, , ,
#1

Hey everyone, this is my first community tutorial and I can’t wait to show you it, I am going to show you how to tween your GUI to make it go in and out with a smooth movement!

tutorial
First of all do what is in the image above and customize the UI to how you want!

Next in the “Local Script” which is in your Open button, copy out the script below.
I would recommend opening a notepad and typing the position of your Frame now which you can find by going into the properties of your Frame and finding “Position”, then copy what it says there and paste it into your notepad.

After that move your Frame to where you want it to come from when you click the open button, then copy the position of your Frame when it is there and paste it in your notepad again.

tutorial2
tutorial2109×675 38.5 KB

I put mine to the side of my screen because that’s where I want it to come from when I open it.
After that copy out the script below. Put this script in the Local Script in the Open button.

-- Where it says "Position", put the position of your Frame when it is open, also remove the "{}" or it won't work

local Frame = script.Parent.Parent.Frame

script.Parent.MouseButton1Click:Connect(function()
	Frame:TweenPosition(UDim2.new(Position))
end)

Next go into your Local Script in the Close button and type he following:

-- Where it says "Position", put the position of your Frame when it is open, also remove the "{}" or it won't work

local Frame = script.Parent.Parent

script.Parent.MouseButton1Click:Connect(function()
	Frame:TweenPosition(UDim2.new(Position))
end)

Now go into your game and test it out by clicking the open button.
If this does not work, please reply to this post saying it doesn’t so I can fix it, although it should work since I have tested it myself.

14 Likes
#2 
local Frame = --location
local Close_Btn =--location
local Open_Btn =--location
local Opening_Frame_Position = --numbers here for example: 2,5,6,6 without the "{}"
local Closing_Frame_Position = --numbers here for example: 2,5,6,6 without the "{}"

Open_Btn.MouseButton1Click:Connect(function()
  Frame:TweenPosition(Udim2.new(Opening_Frame_Position),Enum.EasingDirection.In, Enum.EasingStyle.Sine, 0.6, true)

Close_Btn.MouseButton1Click:Connect(function()
  Frame:TweenPosition(Udim2.new(Closing_Frame_Position),Enum.EasingDirection.In, Enum.EasingStyle.Sine, 0.6, true)
end)
end)
6 Likes
#3

This isn’t accurate, you haven’t put in the other details such the EasingDirection, EasingStyle, and all those other things, basically the script the person above me put.

It would also be good if you explained this more, such as what the scripts you included does, and how you can implement more functions such as :TweenSize and :TweenSizeAndPosition, as well as the final result.

5 Likes
#4

This is a good tutorial for beginners but I would recommend using talking more about what it does, its better to learn something by understanding how it works. Like @Adrxaline said you could take about the other functions, and possibly get into using TweenService as that would be a much better method.

1 Like