Post Reply
User avatar
ice
Site Admin
Roblox TweenService: smooth animations for parts, cameras, and UI
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
Post Reply

Return to “Scripting”