Estimated read time: 7 minutes

👋 Hello Friends 👋

Surprisingly, there are no Tweening Guis tutorial as of yet. Even though it is really easy! So I’m going to show you just how easy it is ☺️

Introduction

Tweening Guis can bring aesthetics to your game unlike anything else. You can turn static, plain Guis into dynamic fun experiences for the player! And today I’m going to show you exactly how that’s done!

Getting Started

First, let’s setup our Gui. This applies to all sorts of Guis, but for this tutorial we are going to use a TextButton. With a bit of polish, yours should look something like this:

img|10x5

img|5x2.5

In this tutorial, I will be using the scaled properties of Gui Size and Position, but you can use Offsets for your purposes as well.

If you would like to know about Scaled and Offsets, you can read CeaselessQuokka’s tutorial titled What is Scale and Offset?

For this Gui button, the properties that will affect the behavior of our tween will be: AnchorPoint, Position, and Size.

If you’d like to follow along, my properties are: AnchorPoint: .5,.5 Position: .5,0,.5,0 Size: .2,0,.1,0

Now when you play your game, the TextButton is static and does not do anything. Well this is where we tween it and give it some personality 😎

Insert a LocalScript into your TextButton. This will make it really easy to reference the button like so:

local button = script.Parent

Events and Tweening

Next we are going to make it so that when the mouse hovers over the button, the button will get slightly bigger. And then go back to its original size when the mouse leaves the button. This is where we’ll be using Gui Tweening ☺️

First, we are going to set up our MouseEnter and MouseLeave events. These events trigger when the mouse enters the Gui and leaves the Gui respectively.

button.MouseEnter:Connect(function()

end)

button.MouseLeave:Connect(function()

end)

Now, let’s get into the grit of this tutorial. We are going to use the TweenSize function of Guis to smoothly resize our button. The function is described like so:

TweenSize ( UDim2 endSize, EasingDirection easingDirection (default Out), EasingStyle easingStyle (default Quad), float time (default 1), bool override (default false), Function callback (default nil) ) An in-depth explanation of each of these arguments is discussed in the More section at the end of this tutorial.

The TweenPosition function is the exact same, but rather than endSize it’s endPosition.

You can also tween both Size and Position in one function. It’s called TweenSizeAndPosition and has a similar format. It just requires the endSize first and then endPosition. Like this:

TweenSizeAndPosition ( UDim2 endSize, UDim2 endPosition, EasingDirection easingDirection (default Out), EasingStyle easingStyle (default Quad), float time (default 1), bool override (default false), Function callback (default nil) )

More Scripting!

Now that we have the knowledge in our minds, let’s get to the scripting! We are going to create some variables so our Guis will be easily adjustable to our liking and consistent with one another.

local originalSize = button.Size -- Store our original size in a variable
local t = .25 -- How quickly we want the Tweens to play
local factor = 1.25 -- This will be our multiplier to increase the size
by
local style = Enum.EasingStyle.Sine
local direction = Enum.EasingDirection.Out

🥁 Drum Roll Please 🥁

The Final Script

local button = script.Parent

local originalSize = button.Size -- Store our original size in a variable
local t = .25 -- How quickly we want the Tweens to play
local factor = 1.25 -- This will be our multiplier to increase the size
local style = Enum.EasingStyle.Sine
local direction = Enum.EasingDirection.Out

-- When the mouse enters the Gui, increase its scaled size by our factor
button.MouseEnter:Connect(function()
    button:TweenSize(UDim2.new(originalSize.X.Scale * factor, 0, originalSize.Y.Scale * factor, 0),
        direction, style, t, true)
end)

-- When the mouse leaves the Gui, revert back to its original size
button.MouseLeave:Connect(function()
    button:TweenSize(originalSize, direction, style, t, true)
end)

Test it!

Now every time your mouse hovers over the Gui, it will get bigger and change back to its original size when the mouse leaves!

Conclusion

I hope you’ve enjoyed this tutorial and implement this aesthetic style into your own Guis. Make your Guis fun and engaging with Tweening! 😁

Thank you for reading and don’t forget to ⭐ leave a comment and rating! ⭐

So the arguments of these Gui tween functions can be daunting at first glance. So let’s go more in-depth about these arguments and what they mean:

UDim2 endSize: The end size, of type UDim2, of the Gui being tweened.

UDim2 endPosition: The end position, of type UDim2, of the Gui being tweened.

EasingDirection easingDirection (default Out): EasingStyle easingStyle (default Quad): These are difficult to explain in words. Thankfully, the developer hub has animations and descriptions of all of these ☺️ https://developer.roblox.com/en-us/api-reference/enum/EasingDirection

float time (default 1): How long, in seconds, the tween will play for.

bool override (default false): A boolean describing whether or not that this tween should override an in-progress tween on the object.

Function callback (default nil): The function to call when the tween is finished.

Tweening Guis

The Easy way of Tweening Gui Size and Position

by lnsertYourself