Animation
How to Animate Roblox GUIs with TweenService
Static GUIs feel flat. TweenService interpolates properties like Position, Size and transparency over time, so a menu can slide in, a button can pop, and a notification can fade. This guide covers the three patterns behind almost every animated Roblox UI.
Open the Main Menu template →1. Slide a panel into place
Start the panel off-screen, then tween its Position to the final spot. TweenInfo controls duration and easing.
local TweenService = game:GetService("TweenService")
panel.Position = UDim2.fromScale(0.5, -0.5) -- start above the screen
local info = TweenInfo.new(0.4, Enum.EasingStyle.Back, Enum.EasingDirection.Out)
TweenService:Create(panel, info, { Position = UDim2.fromScale(0.5, 0.5) }):Play()2. Fade and pop with Size
Tween Size from small to full and BackgroundTransparency from 1 to 0 for a pop-in effect. Multiple properties can go in one tween.
panel.Size = UDim2.fromScale(0.2, 0.2)
panel.BackgroundTransparency = 1
TweenService:Create(panel, TweenInfo.new(0.3), {
Size = UDim2.fromScale(0.4, 0.6),
BackgroundTransparency = 0,
}):Play()3. Chain animations with Completed
Connect to a tween's Completed signal to start the next one — useful for an intro then a reveal.
local slide = TweenService:Create(panel, TweenInfo.new(0.4), { Position = UDim2.fromScale(0.5, 0.5) })
slide.Completed:Connect(function()
TweenService:Create(panel, TweenInfo.new(0.2), { BackgroundTransparency = 0 }):Play()
end)
slide:Play()FAQ
Can I tween TextColor3 or a color?
Yes — TweenService animates Color3 properties like TextColor3 and BackgroundColor3 the same way it animates Position.
How do I make an animation loop forever?
Set TweenInfo with Reverses = true and RepeatCount = -1, so the tween runs back and forth indefinitely.