Roblox Forum • Roblox TweenService: smooth animations for parts, cameras, and UI

Page 1 of 1

Roblox TweenService: smooth animations for parts, cameras, and UI

Posted: Sun Oct 18, 2026 5:31 am

by ice

Roblox TweenService: smooth animations for parts, cameras, and UI

If you have ever wanted a door to swing open smoothly instead of snapping into place, or a health bar to drain gradually rather than disappearing in one frame, TweenService is the tool you need. It is a built-in Roblox service that interpolates properties of any Instance from a starting value to an ending value over a set amount of time.

Creating a basic tween

Every tween follows the same three step pattern: get the service, define a TweenInfo, and pass a goal table to

Code: Select all

TweenService:Create()

.

Code: Select all

local TweenService = game:GetService("TweenService")

local part = workspace.Part
local goal = {Position = Vector3.new(10, 5, 0)}
local tweenInfo = TweenInfo.new(2)

local tween = TweenService:Create(part, tweenInfo, goal)
tween:Play()

The goal table uses string keys that match property names. You can tween multiple properties at once by adding more keys to the table, as long as each property is different.

TweenInfo properties

TweenInfo.new() accepts up to six parameters:

Code: Select all
```
Time
```
(number, default 1): duration in seconds.
Code: Select all
```
EasingStyle
```
(Enum.EasingStyle, default Quad): the curve of the motion. Options include Linear, Sine, Back, Bounce, Elastic, and several polynomial variants like Cubic, Quart, and Quint. Each style produces a distinctly different feel.
Code: Select all
```
EasingDirection
```
(Enum.EasingDirection, default Out): controls whether the easing is applied forward (In), backward (Out), or both halves (InOut).
Code: Select all
```
RepeatCount
```
(number, default 0): how many times the tween repeats. Set to -1 for an infinite loop.
Code: Select all
```
Reverses
```
(boolean, default false): whether the tween reverses back to the starting value after reaching its goal.
Code: Select all
```
DelayTime
```
(number, default 0): seconds to wait before the tween begins.

A practical example that loops a part back and forth forever:

Code: Select all

local tweenInfo = TweenInfo.new(
    2,
    Enum.EasingStyle.Sine,
    Enum.EasingDirection.InOut,
    -1,
    true,
    0
)

Tweening UI elements vs 3D parts

The same TweenService works on both 3D world objects and 2D GUI objects, but the properties you target differ.

For 3D parts you typically tween

Code: Select all

CFrame

,

Code: Select all

Position

,

Code: Select all

Color

, or

Code: Select all

Transparency

. For UI elements such as Frame, TextLabel, or ImageLabel you tween

Code: Select all

Position

(UDim2),

Code: Select all

Size

(UDim2),

Code: Select all

Rotation

, or transparency properties like

Code: Select all

BackgroundTransparency

and

Code: Select all

TextTransparency

.

One UI-specific tip: set

Code: Select all

AnchorPoint = Vector2.new(0.5, 0.5)

before tweening position so the element moves relative to its center. To fade an entire UI hierarchy at once, parent everything inside a CanvasGroup and tween

Code: Select all

GroupTransparency

.

Chaining tweens

The

Code: Select all

Completed

event fires when a tween finishes. You can use it to play the next tween in a sequence:

Code: Select all

local positionTween = TweenService:Create(uiObject, tweenInfo, {Position = targetPos})
local rotationTween = TweenService:Create(uiObject, tweenInfo, {Rotation = 45})

positionTween.Completed:Connect(function()
    rotationTween:Play()
end)

positionTween:Play()

Practical use cases

Smooth doors: tween the CFrame of a door part around a hinge rather than teleporting it. Use EasingStyle.Quad with EasingDirection.Out for a natural swing.
Camera transitions: tween
Code: Select all
```
Camera.CFrame
```
or
Code: Select all
```
CameraType
```
properties for cinematic pans. Many open cutscene systems chain CFrame tweens with the Completed event to build multi-shot sequences.
HUD animations: slide health bars, damage numbers, and minimap panels with UDim2 tweens. A common pattern is tweening
Code: Select all
```
BackgroundTransparency
```
from 1 to 0 for a fade-in effect on UI panels.
Proximity prompts: tween a button's Position or a part's Color when a player interacts, giving immediate visual feedback.

Things to watch for

Two tweens targeting the same property on the same object will conflict. The newer tween cancels the older one.
Tween objects are not configurable after creation. If you need different goals, create a new Tween.
For infinite loops, always use
Code: Select all
```
RepeatCount = -1
```
. Do not substitute
Code: Select all
```
math.huge
```
or a large number; the engine treats negative values as the correct loop signal.
TweenService operates on a single object. For models with multiple parts, tween each part individually or use a ModelTween approach with
Code: Select all
```
SetPrimaryPartCFrame
```
.

Sources