How to Tween a Gui (Position, Size, and Both)

EDIT: USE TweenService | Documentation - Roblox Creator Hub, NOT THIS!

Here’s a very good one: How to use TweenService in Simple Terms

Hello Developers!

Today, I will be showing you how to Tween a Gui (Position, Size, and Both)

First, this is how my Gui is set up:

image

What it looks like:

TweenSize(endSize, easingDirection, easingStyle, time, override, callback)
Developer Hub

The simple way: (You can not change any other settings)

All you need to get TweenSize() to work is the “endSize”.

So, this is what I did:

script.Parent.TestText:TweenSize(UDim2.new(0.549, 0, 0.117, 0))

Outcome:

The Advance way:

Here is a example from the Developer Hub:

local willTween = guiObject:TweenSize(
	UDim2.new(0.5, 0, 0.5, 0),  -- endSize (required)
	Enum.EasingDirection.In,    -- easingDirection (default Out)
	Enum.EasingStyle.Sine,      -- easingStyle (default Quad)
	2,                          -- time (default: 1)
	true,                       -- should this tween override ones in-progress? (default: false)
	callback                    -- a function to call when the tween completes (default: nil)
)

This is what I did:

function GuiDone()
	script.Parent.TestText.Text = 'Done Tweening'
end

script.Parent.TestText:TweenSize(UDim2.new(0.549, 0, 0.117, 0),
	Enum.EasingDirection.Out,    -- I set it to Default (Out)
	Enum.EasingStyle.Elastic,      -- I set it to Elastic
	5,                          -- I set it to 5 for a long tween
	true,                       -- I set it just incase there is another tween happening
	GuiDone                    -- Tells me if the tween is done
)

What it looks like after it stopped:

TweenPosition(endPosition, easingDirection, easingStyle, time, override, callback)
Developer Hub

The simple way: (You can not change any other settings)

You only need endPosition for it to work.

So, this is what I did:

script.Parent.TestText:TweenPosition(UDim2.new(0.383, 0, 0.859, 0))

Outcome :

The Advance way:
Here is a example from the Developer Hub:

local willPlay = guiObject:TweenPosition(
	GOAL_POSITION,           -- Final position the tween should reach
	Enum.EasingDirection.In, -- Direction of the easing
	Enum.EasingStyle.Sine,   -- Kind of easing to apply
	2,                       -- Duration of the tween in seconds
	true,                    -- Whether in-progress tweens are interrupted
	callback                 -- Function to be callled when on completion/cancelation
)

This is what I did:

function GuiDone()
	script.Parent.TestText.Text = 'Done Tweening'
end

script.Parent.TestText:TweenPosition(UDim2.new(0.383, 0, 0.859, 0),
	Enum.EasingDirection.In, -- Set mine to In
	Enum.EasingStyle.Elastic,   -- Set it to Elastic
	5,                       -- I set it to 5 for a long tween
	true,                    -- I set it just incase there is another tween happening
	GuiDone                 -- Tells me if the tween is done
)

What it looks like after it stopped:

** TweenSizeAndPosition(endSize, endPosition, easingDirection, easingStyle, time, override, callback)**
Developer Hub

The simple way: (You can not change any other settings)

You only need endSize and endPosition for it to work.

So, this is what I did:

script.Parent.TestText:TweenSizeAndPosition(UDim2.new(0.549, 0, 0.117, 0), UDim2.new(0.225, 0, 0.857, 0))

Outcome :

The Advance way:
Here is a example and what I did:

function GuiDone()
	script.Parent.TestText.Text = 'Done Tweening'
end

script.Parent.TestText:TweenSizeAndPosition(
	UDim2.new(0.549, 0, 0.117, 0), -- Size
	UDim2.new(0.225, 0, 0.857, 0), -- Position
	Enum.EasingDirection.In, -- I set this to In
	Enum.EasingStyle.Elastic, -- I set this to Elastic
	5, -- I set it to 5 for a long tween
	true, -- I set it just incase there is another tween happening
	GuiDone -- Tells me if the tween is done
)

Outcome :

I hope this helps someone :slight_smile:

40 Likes

Nice tutorial! However if you wish to tween more than just the position and size, (such as color) you should use TweenService. It also provides a wider range of customization.

3 Likes

I thought TweenService was for Tweening parts, not Guis.

1 Like

TweenService is used to tween any instance’s property that is compatible with the service.

5 Likes

Great Tutorial man, Thanks very much.

Please use TweenService instead…! These builtin UI tween methods are deprecated and are no longer used.

1 Like

unfortunately I wasnt able to find any decent tween service tutorial to actually change the sizes of the uis

if you are able please send me the code or just a decent tutorial

GUI stuff uses UDim2 so you just tween using UDim2 for position and scale.

local TweenService = game:GetService("TweenService")

local Frame = script.Parent
TweenService:Create(Frame, TweenInfo.new(1), { Size = UDim2.fromScale(1, 1) }):Play()
1 Like

Thank you so much I was looking for this for so long.