This is a quick but detailed guide on the absolute basics of TweenService in Roblox Studio!
Short Breakdown
TweenService lets you smoothly animate properties of instances over time.
Great for making parts move, change color, size, transparency, and more, with nice smooth transitions!
We’ll cover:
- What TweenService is
- How to create a Tween
- Understanding TweenInfo parameters
- Playing and stopping Tweens
What is TweenService?
TweenService is a built-in Roblox service used to create “tweens.”
A tween is an animation that changes properties of an object gradually instead of instantly.
For example, moving a part from point A to B smoothly instead of teleporting it.
It can change many properties: Position, Size, Color, Transparency, and even GUI properties!
How to Create a Tween
To create a tween, you need three things:
- The instance you want to animate (like a Part or GUI element)
- TweenInfo — which defines how the animation behaves
- A table of properties you want to change and their target values
Example:
local TweenService = game:GetService("TweenService")
local part = workspace:WaitForChild("MyPart")
-- Define TweenInfo
local tweenInfo = TweenInfo.new(
2, -- Time in seconds (how long the tween lasts) [Default 1 Second]
Enum.EasingStyle.Quad, -- Easing style (how the animation speeds up/slows down) [Default: Enum.EasingStyle.Quad]
Enum.EasingDirection.Out, -- Easing direction (animation flow) [Default: Enum.EasingDirection.Out]
0, -- Repeat count (0 means no repeats) [Default: 0]
false, -- Reverses (tween goes back and forth) [Default: false]
0 -- Delay time before tween starts in seconds [Default: 0]
)
-- Define properties to tween
local goal = {}
goal.Position = Vector3.new(0, 10, 0) -- Move the part up to Y=10
-- Create the tween
local tween = TweenService:Create(part, tweenInfo, goal)
Understanding TweenInfo Parameters
TweenInfo.new(time, easingStyle, easingDirection, repeatCount, reverses, delayTime)
time
: Duration in seconds for the tween to complete.
easingStyle
: Controls the speed curve of the animation. Examples: Linear, Quad, Bounce, Elastic, Sine.
easingDirection
: Controls whether the animation eases In (starts slow), Out (ends slow), or InOut (both).
repeatCount
: How many times to repeat the tween. 0 means no repeats, -1 means infinite loop.
reverses
: If true, the tween plays backward after finishing (ping-pong effect).
delayTime
: Time in seconds to wait before starting the tween.
Example:
local tweenInfo = TweenInfo.new(3, Enum.EasingStyle.Bounce, Enum.EasingDirection.InOut, 2, true, 1)
This tween lasts 3 seconds, bounces easing in and out, repeats twice, reverses back and forth, and waits 1 second before starting.
Playing and Stopping Tweens
Once you create a tween, you have to play it for the animation to start:
tween:Play()
If needed, you can pause or cancel the tween:
tween:Pause() -- Pause the tween mid-animation
tween:Cancel() -- Stop the tween and reset it immediately
You can also listen for events:
tween.Completed: Fires when the tween finishes or is cancelled.
Example:
tween.Completed:Connect(function(status)
if status == Enum.PlaybackState.Completed then
print("Tween finished successfully!")
else
print("Tween was cancelled or interrupted.")
end
end)
Putting It All Together
Here’s a simple full example script you can put in a Script or LocalScript to see TweenService in action:
local TweenService = game:GetService("TweenService")
local part = workspace:WaitForChild("MyPart")
local tweenInfo = TweenInfo.new(
2,
Enum.EasingStyle.Quad,
Enum.EasingDirection.Out,
0,
false,
0
)
local goal = {Position = Vector3.new(0, 10, 0)}
local tween = TweenService:Create(part, tweenInfo, goal)
tween:Play()
tween.Completed:Connect(function(status)
if status == Enum.PlaybackState.Completed then
print("Tween finished!")
end
end)
Summary
TweenService creates smooth animations by changing properties over time
Use TweenInfo to customize how the animation plays (speed, easing, repeats, etc.)
Create the tween with :Create(), then start it with :Play()
Listen to .Completed for when it finishes
Tweens can animate almost any property, making them super useful for effects and UI
TweenService is powerful and simple once you get the hang of it! Play with different easing styles and properties to see what cool effects you can make.
Thank you for reading, and please drop me a follow on Roblox!