A Guide to GUIs - Tweening Edition.
Written by Discgolftaco231.
This is 3 of 5 guides that will come out every week or on authors behalf.
Before we get started, I highly recommend reading the previous guide about guis; which can be found here. If you feel confident moving on without reading, go ahead!
Please note: You need to have some sort of understanding of coding in order to learn this correctly. If you do not know much coding and you want to get into it, this is not the subject to be starting on.
What is Tweening?
Tweening is when you apply a transition or an animation to an Instance in your game. There are two differnet types of tweening. GUI Tweening and Part Tweening. For today, we are going to stick with GUI Tweening.
Tweening can seem a little daunting at first, but once you break it down and analyze what each part means, it can get pretty easy. And guess what? Many times, you could just use a pre-written tween code snippet for all of the tweening you need to do! Tween codes are very cross-compatible, and you can easily use the same code for multiple different tweens!
So, how do I understand the code?
It is easy! Lets use this code snippet below.
local object = script.Parent
object.AnchorPoint = Vector2.new(0.5, 0.5)
object.MouseButton1Click:Connect(function()
object:TweenPosition(UDim2.new(0.5, 0, 0.5, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Quint)
end)
We are going to break down this code line-by-line.
Lets start with the 1st line:
local object = script.Parent
This should be pretty obvious. The “object” is going to be the GUI you want to tween. This LocalScript is placed inside of the GUI object you want to tween.
2nd line:
object.AnchorPoint = Vector2.new(0.5, 0.5)
What this line is doing is it is taking the object, and setting it’s AnchorPoint. The AnchorPoint is where the Tween will start from.
3rd line:
object.MouseButton1Click:Connect(function()
We are assuming that the object is a button, so whenever we press it, we want the tween to play. This could be changed to whatever fits your needs. Remember, you need some sort of coding knowledge to know how this works. You know who you are 
4th line:
object:TweenPosition(Udim.new(0.5, 0, 0.5, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Quint
Alright. So what this line is doing is it is actually making the tween. lets break this line down even further.
object:TweenPosition(Udim2.new(0.5, 0, 0.5, 0),
This snippet is telling the tween where to end the tween. As you can see, there are 4 numbers. You always want to make the second and fourth number 0 and the first and third number your desired position.
Enum.EasingDirection.Out,
This tells the code if you want the tween to play normal, or play in reverse. Now, keep in mind, this does not effect the ending position of the tween. Out means normal, and In means reverse. You should usually keep this as Out.
Enum.EasingStyle.Quint
This snippet is telling the tween how you want it move the GUI object. Quint, Quart, Sine, Bounce are the basic ones, and they do not take too much effort to edit. As a beginner, you should be starting out with Quint and Quart. When you change the type, replace the word “Quint” with the style you want. A menu should pop up with all the different types of styles.
5th line:
end)
This ends the function: “MouseButton1Click” from earlier.
And there we go! We just broken down a few lines of code and look at the results of it!
This is what would happen to the GUI object with the code above:
In addition to moving GUIs with tweening, you can also scale or change the size GUIs with tweening. There is a bit on how to do that here.
Take a look at this snippet of code:
local object = script.Parent
object.AnchorPoint = Vector2.new(0.5, 0.5)
object.Position = UDim2.new(0.5, 0, 0.5, 0)
--When the game starts, it will wait 2 seconds, then make the tween.
wait(2)
object:TweenSize(UDim2.new(0.4, 0, 0.4, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Quint)
All this code is doing is making the size of the original GUI larger (or smaller if it is larger than the size listed above). Use the skills we learned above to break down the code!
This is what would happen to the GUI object with the code above:
Is there anything else?
Of course! There is an infinite amount of combinations at designs for just GUIs alone! Of course, I am not going to go over every single one out there, but as you grow more comfortable with GUIs, you will find new, unique ways to work with GUIs!
Thank you!
Thank you for spending time to read this. This tutorial took a week and a half to figure out, and I am happy that it is finally done! Again, thanks for reading this, and have a great day!
Special Thanks to you!
Links used:
A Complete Guide to GUIs || Written by Discgolftaco231
GUI Animations
Photos from GUI Animations page from the Devhub
