TweenService Tutorial: Smooth Animations for Beginners

Have you ever wondered how experienced developers make parts smoothly glide across the screen, doors elegantly swing open, or platforms gracefully rotate? The secret is TweenService! In this tutorial, you’ll learn how to create smooth animations that will make your Roblox games look polished and professional.

What is TweenService?

TweenService is Roblox’s built-in animation system that smoothly transitions an object’s properties from one value to another over time. Instead of instantly teleporting a part or abruptly changing its size, TweenService creates that smooth, animated effect you see in quality games.

Think of it like this: if you wanted to move a part 10 studs to the right, you could just change its position instantly. But with TweenService, the part smoothly glides from its starting position to the end position, making the movement look natural and appealing.

Your First Tween

Let’s start with a simple example that moves a part. First, insert a Part into your Workspace and name it “MovingPart”. Then, add a Script to ServerScriptService and follow along:

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

-- Define what we want to change
local tweenInfo = TweenInfo.new(2) -- 2 seconds duration

-- Define the end goal (where we want the part to be)
local goal = {}
goal.Position = part.Position + Vector3.new(10, 0, 0) -- Move 10 studs on X axis

-- Create and play the tween
local tween = TweenService:Create(part, tweenInfo, goal)
tween:Play()

Run your game, and you’ll see the part smoothly move 10 studs to the right over 2 seconds! Let’s break down what’s happening:

TweenService: We get the service that handles all tweening
TweenInfo: This tells the tween how to animate (duration, style, etc.)
goal: A table containing the properties we want to change and their final values
Create: Makes the tween with our specifications
Play: Starts the animation

Customizing Your Tweens with TweenInfo

The real power of TweenService comes from customizing how animations behave. TweenInfo accepts several parameters that control the animation:

local tweenInfo = TweenInfo.new(
    2,                           -- Time (seconds)
    Enum.EasingStyle.Quad,       -- Easing Style
    Enum.EasingDirection.Out,    -- Easing Direction
    0,                           -- Repeat Count (0 = no repeat, -1 = forever)
    false,                       -- Reverse (play backwards after finishing?)
    0                            -- Delay before starting
)

Easing styles control how the animation accelerates and decelerates. Here are some popular ones:

Linear: Constant speed (robotic feeling)
Quad: Gentle acceleration/deceleration (smooth and natural)
Bounce: Bounces at the end (playful effect)
Elastic: Overshoots and springs back (cartoony effect)

Try experimenting with different easing styles to see which feels best for your game!

Animating Multiple Properties

You can tween multiple properties at once! Let’s make a part that moves, rotates, and changes color simultaneously:

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

local tweenInfo = TweenInfo.new(
    3,
    Enum.EasingStyle.Quad,
    Enum.EasingDirection.InOut
)

local goal = {
    Position = part.Position + Vector3.new(0, 5, 0),
    Orientation = Vector3.new(0, 180, 0),
    Color = Color3.fromRGB(255, 0, 0),
    Transparency = 0.5
}

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

This creates a much more dynamic animation! The part rises 5 studs, rotates 180 degrees, turns red, and becomes semi-transparent—all smoothly over 3 seconds.

Detecting When Tweens Finish

Sometimes you need to know when an animation completes. Maybe you want to start another tween, or make something happen after the animation. Use the Completed event:

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

tween.Completed:Connect(function(playbackState)
    print("Tween finished!")
    -- Do something else here
end)

This is perfect for creating sequences of animations or triggering gameplay events.

Practical Example: Animated Door

Let’s put it all together with a door that opens when clicked:

local TweenService = game:GetService("TweenService")
local door = workspace.Door
local isOpen = false

local tweenInfo = TweenInfo.new(1, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)

local openGoal = {
    CFrame = door.CFrame * CFrame.Angles(0, math.rad(90), 0)
}

local closeGoal = {
    CFrame = door.CFrame
}

door.ClickDetector.MouseClick:Connect(function()
    if isOpen then
        local closeTween = TweenService:Create(door, tweenInfo, closeGoal)
        closeTween:Play()
    else
        local openTween = TweenService:Create(door, tweenInfo, openGoal)
        openTween:Play()
    end
    isOpen = not isOpen
end)

Quick Recap

You’ve learned how to use TweenService to create smooth animations! Remember: get TweenService, create TweenInfo to define how the animation behaves, set your goal properties, create the tween, and play it. Experiment with different easing styles and properties to discover what works best for your game.

What’s next? Try tweening GUI elements to create animated menus, or explore ModuleScripts to organize reusable tween functions. You could also learn about combining tweens with touch events to create interactive objects players can manipulate. Happy scripting!

Author

karlito1501