GUI Animations

5 min

In animation, tweening is an abbreviation for “in-betweening,” the process of generating intermediate frames between two key points in a sequence. When designing a user interface, tweening can be used to transition a GUI smoothly from one position/state to another, for instance:

Smoothly increasing the size of a “selected” button in a series of related option buttons.
Sliding GUI menus in and out from the screen edges.
Gradually animating a health bar between two widths when a health boost is received.

Basic Tweening

In the articles/Intro to GUIs|Intro to GUIs and articles/Creating GUI Buttons|Creating GUI Buttons articles, you learned how to create basic text labels and interactive buttons. These and other GUIs like Frame and ScrollingFrame can all be tweened via a script attached directly to the object.

In the Explorer window, hover over the StarterGui object, click on the circle button, and insert a ScreenGui object.
Select the new ScreenGui object and, in a similar manner, insert a TextButton.
Select the new TextButton and insert a new LocalScript.

Copy and paste the following code into the script:

				
					Expected Output
				
					Expand
					
			local object = script.Parent
object.AnchorPoint = Vector2.new(0.5, 0.5)
		
				Copy Code
			
				Light Theme

With these variables in place, you can now tween the GUI with built-in methods of its base GuiObject class.

Position

The GUI position can be tweened using the GuiObject/TweenPosition|GuiObject:TweenPosition() method. In its most basic form, this method requires an end position (datatype/UDim2) for the object’s destination:

				
					Expected Output
				
					Expand
					
			local object = script.Parent
object.AnchorPoint = Vector2.new(0.5, 0.5)
object.Position = UDim2.new(0.1, 0, 0.5, 0)

wait(2)

object:TweenPosition(UDim2.new(0.5, 0, 0.5, 0))
		
				Copy Code
			
				Light Theme

Note that this tween uses the scale parameters of datatype/UDim2 versus the positional offset values. This ensures that the GUI tweens to the center of the screen, no matter the screen's size or orientation.

Alternatively, you can make the GUI start off the left edge of the screen by offsetting the object’s starting position by its width:

				
					Expected Output
				
					Expand
					
			local object = script.Parent
object.AnchorPoint = Vector2.new(0.5, 0.5)
object.Position = UDim2.new(0, -object.Size.X.Offset, 0.5, 0)

wait(2)

object:TweenPosition(UDim2.new(0.5, 0, 0.5, 0))
		
				Copy Code
			
				Light Theme

Size

A GUI’s size can be tweened using the GuiObject/TweenSize|GuiObject:TweenSize() method which accepts a datatype/UDim2 for the object’s final size:

				
					Expected Output
				
					Expand
					
			local object = script.Parent
object.AnchorPoint = Vector2.new(0.5, 0.5)
object.Position = UDim2.new(0.5, 0, 0.5, 0)

wait(2)

object:TweenSize(UDim2.new(0.4, 0, 0.4, 0))
		
				Copy Code
			
				Light Theme

The above example uses the scale parameters of datatype/UDim2, but you can also resize the GUI using explicit size parameters:

				
					Expected Output
				
					Expand
					
			local object = script.Parent
object.AnchorPoint = Vector2.new(0.5, 0.5)
object.Position = UDim2.new(0.5, 0, 0.5, 0)

wait(2)

object:TweenSize(UDim2.new(0, 400, 0, 100))
		
				Copy Code
			
				Light Theme

Position and Size

To tween both the position and size of a GUI in one command, use the GuiObject/TweenSizeAndPosition|GuiObject:TweenSizeAndPosition() method. This requires a datatype/UDim2 for both the final size and position of the GUI:

				
					Expected Output
				
					Expand
					
			local object = script.Parent
object.AnchorPoint = Vector2.new(0.5, 0.5)
object.Position = UDim2.new(0, -object.Size.X.Offset, 0.5, 0)

wait(2)

object:TweenSizeAndPosition(UDim2.new(0.4, 0, 0.4, 0), UDim2.new(0.5, 0, 0.5, 0))
		
				Copy Code
			
				Light Theme

Additional Options

All of the above methods accept additional options which can fine-tune or provide more control over GUI animations.

Animation Easing

Animation easing defines a “direction” and style in which the tween will occur.

Direction	Description
In	The tween will have less speed at its beginning and more speed toward its end.
Out	The tween will have more speed at its beginning and less speed toward its end.
InOut	In and Out on the same tween, with In at the beginning and Out taking effect halfway through.

Style	Description
Linear	Moves at a constant speed.
Sine	Movement speed is determined by a sine wave.
Back	Tween movement backs into or out of place.
Quad	Eases in or out with quadratic interpolation.
Quart	Similar to Quad but with a more emphasized start and/or finish.
Quint	Similar to Quad but with an even more emphasized start and/or finish.
Bounce	Moves as if the start or end position of the tween is bouncy.
Elastic	Moves as if the object is attached to a rubber band.

Easing options can be defined as Enum/EasingDirection and Enum/EasingStyle enums after the size and/or position datatype/UDim2 values:

				
					Expected Output
				
					Expand
					
			local object = script.Parent
object.AnchorPoint = Vector2.new(0.5, 0.5)
object.Position = UDim2.new(0, 0, 0.5, 0)
 
wait(2)
 
object:TweenPosition(UDim2.new(0.5, 0, 0.5, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Quint)
		
				Copy Code
			
				Light Theme

Time

By default, a tween will occur in 1 second, but this can be adjusted by specifying a number of seconds following the easing options:

				
					Expected Output
				
					Expand
					
			local object = script.Parent
object.AnchorPoint = Vector2.new(0.5, 0.5)
object.Position = UDim2.new(0, 0, 0.5, 0)
 
wait(2)
 
object:TweenPosition(UDim2.new(0.5, 0, 0.5, 0), nil, nil, 3)
		
				Copy Code
			
				Light Theme

Note that nil can be used for either of the easing options if you don't need to change the default Enum/EasingDirection of Out or the default Enum/EasingStyle of Quad.

Advanced Tweening

The methods above are simple ways to tween a GUI’s position and size, but they cannot tween other aspects like rotation, color, or transparency. For these, you’ll need to use TweenService, a powerful tool which can tween almost any property or combination of properties.

Color Tween

Some animations require a tween of a datatype/Color3 property, for instance changing a health bar’s color from green to yellow if a player’s health falls below a certain percentage.

In the Explorer window, hover over the ScreenGui object you created earlier and insert a Frame.
Select the new frame object and insert a new LocalScript.
Copy and paste the following code into the script:

				
					Expected Output
				
					Expand
					
			local TweenService = game:GetService("TweenService")

local frame = script.Parent
frame.Position = UDim2.new(0, 20, 0, 20)
frame.BorderSizePixel = 0
frame.Size = UDim2.new(0, 400, 0, 30)
frame.BackgroundColor3 = Color3.fromRGB(0, 255, 75)

-- Declare target size and color values
local newSize = UDim2.new(0, frame.Size.X.Offset*0.5, 0, frame.Size.Y.Offset)
local newColor = Color3.fromRGB(255, 255, 50)

-- Set up tween
local tweenInfo = TweenInfo.new(1.5, Enum.EasingStyle.Quart, Enum.EasingDirection.Out)
local tween = TweenService:Create(frame, tweenInfo, {Size=newSize, BackgroundColor3=newColor})

wait(2)

tween:Play()
		
				Copy Code
			
				Light Theme

This code does the following:

On lines 4-7, sets the frame’s position, border, size, and background color (green).
On lines 10-11, declares a target size and background color.
On line 14, declares a new datatype/TweenInfo object for 1.5 seconds with Out easing.
On line 15, creates a new Tween which interpolates the frame’s GuiObject/Size|Size and GuiObject/BackgroundColor3|BackgroundColor3 to newSize and newColor respectively.
Plays the tween on line 19.

Sequential Tween

Some animations may benefit from a sequential setup, for example a rotation tween following a movement tween. This can be done by starting the second tween following the first tween’s TweenBase/Completed|Completed event:

				
					Expected Output
				
					Expand
					
			local TweenService = game:GetService("TweenService")

local frame = script.Parent
frame.AnchorPoint = Vector2.new(0.5, 0.5)
frame.Position = UDim2.new(0, 70, 0, 70)
frame.BorderSizePixel = 0
frame.Size = UDim2.new(0, 100, 0, 100)
frame.BackgroundColor3 = Color3.new(0, 0, 0)

-- Set up tweens
local tweenInfo1 = TweenInfo.new(1, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)
local tween1 = TweenService:Create(frame, tweenInfo1, {Position=UDim2.new(0.5, 0, 0.5, 0)})
local tweenInfo2 = TweenInfo.new(1.5, Enum.EasingStyle.Quart, Enum.EasingDirection.InOut)
local tween2 = TweenService:Create(frame, tweenInfo2, {Rotation=180})

tween1.Completed:Connect(function()
	tween2:Play()
end)

wait(2)

tween1:Play()
		
				Copy Code
			
				Light Theme

Tags:

gui
animation
tween

GUI Animations

GUI Animations

Basic Tweening

Position

Size

Position and Size

Additional Options

Animation Easing

Time

Advanced Tweening

Color Tween

Sequential Tween

RELATED ARTICLES

Intro to GUIs

Creating GUI Buttons