How to Use TweenService in Roblox Studio

TweenService Basics

TweenService is one of the best ways to add smooth animations to your Roblox game – without needing to manually update properties every frame. Whether you want to move parts, fade UI elements, or scale objects, it is all posible with TweenService

Tweening is short for “in-betweening” – it means smoothly changing a property from one value to another over time.

TweenService lets you animate properties like:

  • .Position
  • .Size
  • .Transparency
  • .Color
  • etc.

You just tell it what you want to change, how long it should take.

To create a new tween we start by getting the service itself, where we then after can call the :Create() function on the service. We often store this part inside a variable so we can play the animation later.

TweenService:Create() takes:

  • The object you want to tween
  • A TweenInfo object (explained below)
  • A table of goal values – what you want to animate toward
local TweenService = game:GetService("TweenService")
local tweenInfo = TweenInfo.new(1)

local goal = { Transparency = 0.5 }

local tween = TweenService:Create(someObject, tweenInfo, goal)

To play the tween we can use tween:Play(), and to stop it again use tween:Stop(). Note when the tween is finished it will automatically stop.

local TweenService = game:GetService("TweenService")
local tweenInfo = TweenInfo.new(1)

local goal = { Transparency = 0.5 }

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

TweenInfo

TweenInfo controls how the animation behaves. It is used to set the length of the animation, the easing style and direction, repeat count, if it should reverse and delay time.

Below you can see how it is structured:

TweenInfo.new(
    1, -- time, how long the tween lasts (in seconds)
    Enum.EasingStyle.Sine, -- how the motion feels (e.g. smooth, bouncy)
    Enum.EasingDirection,InOut, -- in/out/inOut
    0, -- how many times to repeat (0 = no repeat)
    false, -- true to reverse after finishing
    0 -- delay before starting
)

You can use different easing styles like

Enum.EasingStyle.Bounce

Enum.EasingStyle.Linear

Enum.EasingStyle.Sine

Examples

local TweenService = game:GetService("TweenService")
local part = workspace.Part

local goal = {}
goal.Position = part.Position + Vector3.new(0, 10, 0)

local tweenInfo = TweenInfo.new(1.5, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)
local tween = TweenService:Create(part, tweenInfo, goal)

tween:Play()
local frame = script.Parent:WaitForChild("Frame")

local goal = { BackgroundTransparency = 1 }

local info = TweenInfo.new(1)
local tween = TweenService:Create(frame, info, goal)
tween:Play()

If you’re new to scripting, TweenService is a great tool to learn – and it’s used in almost every game on Roblox.

Latest Posts

Chattz: A New European Alternative to Discord and Facebook

Chattz is a new European social platform that combines...

LEAVE A REPLY

Please enter your comment!
Please enter your name here