Tweening & Animation

Create smooth animations and transitions using TweenService.

TweenServiceEasing StylesAnimation Chains

1
Introduction to TweenService

TweenService smoothly animates property changes over time.

Basic Tween

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

-- Tween info (duration, easing style, easing direction)
local tweenInfo = TweenInfo.new(
  2,  -- Duration in seconds
  Enum.EasingStyle.Quad,  -- Easing style
  Enum.EasingDirection.Out  -- Easing direction
)

-- What to animate
local goal = {
  Position = Vector3.new(0, 10, 0),
  Transparency = 0.5
}

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

TweenService smoothly transitions properties from current to goal values.

2
Easing Styles

Different easing styles create different animation feels.

Common Easing Styles

-- Linear - constant speed
Enum.EasingStyle.Linear

-- Quad - smooth acceleration
Enum.EasingStyle.Quad

-- Elastic - bouncy
Enum.EasingStyle.Elastic

-- Bounce - bounces at the end
Enum.EasingStyle.Bounce

-- Back - overshoots then settles
Enum.EasingStyle.Back

Experiment with different styles to find the right feel for your animation.

3
Tween Events

React when tweens complete or get cancelled.

Listening to Tween Events

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

tween.Completed:Connect(function(playbackState)
  if playbackState == Enum.PlaybackState.Completed then
    print("Tween finished!")
    part:Destroy()
  end
end)

tween:Play()

Use Completed event to chain animations or trigger effects.

Animation Chain

local function animateSequence()
  local tween1 = TweenService:Create(part, info, {Position = Vector3.new(10, 5, 0)})
  
  tween1.Completed:Connect(function()
    local tween2 = TweenService:Create(part, info, {Size = Vector3.new(8, 8, 8)})
    tween2:Play()
  end)
  
  tween1:Play()
end

animateSequence()

Chain multiple tweens to create complex animations.

💡 Tips:

• Use TweenService instead of manual loops for smooth animations
• Tween can animate most numeric properties
• Cancel tweens with :Cancel() if needed

Practice Exercises

Exercise 1: Moving Platform

Create a platform that tweens back and forth.

Starter Code:

local TweenService = game:GetService("TweenService")
local platform = workspace.Platform

-- Create your tween here

Show Solution

local TweenService = game:GetService("TweenService")
local platform = workspace.Platform

local info = TweenInfo.new(3, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, -1, true)
local goal = {Position = platform.Position + Vector3.new(20, 0, 0)}

local tween = TweenService:Create(platform, info, goal)
tween:Play()

Ready for more?

Continue your learning journey