Roblox Forum

Roblox TweenService: How to Create Smooth UI Animations

TweenService is the built-in Roblox service that lets you animate properties of any instance smoothly over time. Instead of having UI elements pop in instantly, you can slide them in, fade them out, or scale them with controlled easing. This guide covers the basics of TweenService and how to use it for common UI animations.

What TweenService Does

TweenService creates tweens that interpolate properties of instances. A tween takes a target object, a set of properties to change, and a TweenInfo that describes how the animation should play. You can tween position, size, rotation, transparency, color, and many other properties.

Creating a Basic Tween

Every tween needs three things: the object to animate, a TweenInfo, and a goal table with the properties you want to change.
This moves an ImageLabel to the exact center of the screen over 2 seconds.

TweenInfo Parameters

TweenInfo controls how the tween behaves:

• Time: Duration in seconds
• EasingStyle: The curve of the animation (Linear, Sine, Quad, Cubic, Back, Bounce, etc.)
• EasingDirection: How the easing applies (In, Out, InOut)
• RepeatCount: How many times to repeat (-1 for infinite)
• Reverses: Whether to reverse after reaching the goal
• DelayTime: Seconds to wait before starting
  [/code]
  
  Easing Styles
  
  The easing style determines the feel of the animation:
  • Linear: Constant speed from start to end
  • Sine: Gentle easing based on a sine wave
  • Quad: Slightly sharper curve than Sine
  • Cubic: Even sharper curve
  • Back: Slightly overshoots the target, then backs into place
  • Bounce: Bounces into the target
  The default is Quad with Out direction. For most UI animations, Sine or Quad with InOut gives a natural feel.
  
  Chaining Tweens
  
  You can chain animations to play one after another using the Completed event:
  

  Code: Select all

  local positionTween = TweenService:Create(object, tweenInfo, {Position = targetPosition})
  local rotationTween = TweenService:Create(object, tweenInfo, {Rotation = 45})
  
  positionTween:Play()
  positionTween.Completed:Connect(function()
      rotationTween:Play()
  end)

  Multi-Property Tweens
  
  You can combine multiple properties in a single tween:
  

  Code: Select all

  local tween = TweenService:Create(object, tweenInfo, {
      Position = targetPosition,
      Rotation = 45
  })
  tween:Play()

  Common UI Patterns
  
  Sliding a Menu In
  Set the object's position off-screen, then tween it to the final position with a Sine easing style.
  
  Fading In a Frame
  Tween BackgroundTransparency from 1 to 0. For multiple objects, place them in a CanvasGroup and tween GroupTransparency.
  
  Button Hover Effect
  On MouseEnter, tween the button size slightly larger. On MouseLeave, tween it back to the original size.
  
  Looping Animation
  Set RepeatCount to -1 and Reverses to true for a continuous back-and-forth animation. Avoid using large numbers or math.huge as a substitute, as this is unstable.
  
  Source
  [1] UI animation/tweens — Roblox Creator Hub
  [2] Class: TweenService — Roblox Creator Hub