Roblox GUI Animation Tutorial: TweenService from Basics (2026)

TweenService basics: what a tween is

A tween animates a property of a GUI element from its current value to a target value over a set time. You call TweenService:Create with the element, a TweenInfo (time, easing style, direction), and a table of target properties, then call :Play(). The most common properties to animate are Size, Position, BackgroundTransparency, TextTransparency, and BackgroundColor3. The tween runs smoothly at 60fps and reverses or loops if you configure it to.

Easing styles: how the motion feels

Easing controls the acceleration curve of the animation. Linear moves at constant speed and looks robotic. Quad eases in or out gently and is the safest default. Back overshoots the target and bounces back, which feels playful and is great for menu pop-ins. Quint and Quart are smoother and more dramatic. For most UI, use Quad or Quint with Out direction - the animation starts fast and settles naturally, which reads as responsive without being bouncy.

1-- TweenService basics
2-- Place in: StarterGui (LocalScript)
3
4local TweenService = game:GetService("TweenService")
5local panel = script.Parent:WaitForChild("Panel")
6
7-- Slide a panel in from off-screen
8panel.Position = UDim2.new(0.5, 0, 1.5, 0) -- start below the screen
9panel.AnchorPoint = Vector2.new(0.5, 0.5)
10
11local slideIn = TweenService:Create(
12	panel,
13	TweenInfo.new(0.4, Enum.EasingStyle.Quint, Enum.EasingDirection.Out),
14	{ Position = UDim2.new(0.5, 0, 0.5, 0) }
15)
16slideIn:Play()
17
18-- Fade it out after 3 seconds
19task.delay(3, function()
20	local fadeOut = TweenService:Create(
21		panel,
22		TweenInfo.new(0.3, Enum.EasingStyle.Quad, Enum.EasingDirection.In),
23		{ BackgroundTransparency = 1 }
24	)
25	fadeOut:Play()
26end)

Chained tweens: sequencing animations

Complex animations are just simple tweens played in sequence. Use task.delay or tween.Completed to trigger the next tween when the current one finishes. For example, a reward panel might scale up (Back easing, 0.2s), hold, then fade out (Quad easing, 0.3s). Chain them with grow.Completed:Connect(function() shrink:Play() end) so the second tween starts the moment the first ends. This is how you build multi-step UI animations like countdowns, level-up sequences, and claim animations.

Button hover and press feedback

Interactive elements should respond to the player. On hover (MouseEnter), scale the button up slightly (1.05x) and brighten it; on leave (MouseLeave), return to normal. On press (MouseButton1Down), scale down briefly (0.95x), then bounce back. These micro-animations take a tenth of a second and make buttons feel tactile. Use short tween times (0.1-0.15s) so the feedback is snappy, and keep the scale change subtle - big jumps feel jarring.

1-- Button hover and press feedback
2local button = script.Parent:WaitForChild("PlayButton")
3local TweenService = game:GetService("TweenService")
4
5local function tweenScale(target)
6	TweenService:Create(
7		button,
8		TweenInfo.new(0.12, Enum.EasingStyle.Quad, Enum.EasingDirection.Out),
9		{ Size = target }
10	):Play()
11end
12
13button.MouseEnter:Connect(function()
14	tweenScale(button.Size + UDim2.fromOffset(8, 8))
15end)
16button.MouseLeave:Connect(function()
17	tweenScale(button.Size - UDim2.fromOffset(8, 8))
18end)
19button.MouseButton1Down:Connect(function()
20	tweenScale(button.Size - UDim2.fromOffset(4, 4))
21end)
22button.MouseButton1Up:Connect(function()
23	tweenScale(button.Size + UDim2.fromOffset(4, 4))
24end)

Frequently asked questions