Tutorial:Tween

Tutorial page

This article is an advanced tutorial.

Overview[]

Tweening is a way to interpolate a part or ScreenGui. In other words, to smoothly animate a Tween. You can change BrickColor, Position, Size and Orientation with Tweening. There are many times that you would want to animate a GUI or Part rather than using for loops, one reason being to make your game look more professional.

TweenService[]

First, insert a part into the Workspace and access the part by referencing it in a local variable.

TweenService is a service that manages tweens, but it is not in the Workspace, so you will need to use the GetService function.

local TweenPart = script.Parent
local TweenService = game:GetService("TweenService")

TweenInfo[]

Now we need to use TweenInfo. Set up a third local variable, and then enter the following.

local Info = TweenInfo.new()

In these brackets, you must enter the following information, separated by commas:

time: the amount of time used in the tween in seconds. So if the tween takes 5 seconds, you would enter the number 5.
EasingStyle: the style in which the part is Tweened. You can find distance/time graphs for each here. Enter the value as an Enum.
EasingDirection: the direction of the tween. You can find more here. Again, place it in an Enum.
repeatcount: The number of times a tween is repeated. Note that 0 means that the tween will be done once, 1 means the tween will be done twice, etc.
reverses: whether or not the tween will reverse to its original state after it is done each time. This is a boolean, so if you do want it to reverse, then enter true, otherwise put false.
delayTime: the time in seconds which the tween will wait until repeating.

The code should look something like this:

local Info = TweenInfo.new(
    4, --The Tween will take 4 seconds.
    Enum.EasingStyle.Sine, --The tween will use the "Sine" EasingStyle.
    Enum.EasingDirection.In, --The tween will use the "In" EasingDirection.
    5, --The tween will repeat 5 times, so it will perform 6 times in total.
    true, --The tween reverses.
    1 --The tween will delay for 1 second before repeating.
)

Dictionary of Properties[]

Lastly, you need a dictionary of properties you want to change. Simply list off the properties and their values like variables.

local TweenGoals = {
     Position = Vector3.new(1,1,1);
     Material = Enum.Material.Neon;
     Color3 = Color3.fromRGB(234,92,103)
}

The above tween will set its Position to (1,1,1), set its Material to Neon (the material that makes it glow), and its Color to (234, 92, 103) on the RGB scale, which would give a salmon-like hue.

Note that properties should be separated with semicolons (;) and the dictionary be surrounded with curly brackets.

Finishing the Tween[]

Now that you have the TweenService, the part, the TweenInfo data type, and the dictionary of properties, it's time to create the tween. Add another local variable, and use the Create function on TweenService to create a tween. Then, include the part you want to tween, the TweenInfo, and the dictionary of Properties as parameters.

local Tween = TweenService:Create(TweenPart,Info,Properties)

Now, the Tween is available at any time and is contained in the Tween variable. Finally, to play the tween at any time, use the Play() function on the Tween.

Tween:Play()

Congratulations, you just tweened your first part! Your final code should look something like this:

local TweenPart = script.Parent
local TweenService = game:GetService("TweenService")

local Info = TweenInfo.new(
    4,
    Enum.EasingStyle.Sine,
    Enum.EasingDirection.InOut,
    5,
    true,
    1
)

local TweenGoals = {
     Position = Vector3.new(1,1,1);
     Material = Enum.Material.Neon;
     Color = Color3.fromRGB(234,92,103)
}

local Tween = TweenService:Create(TweenPart,Info,TweenGoals)
Tween:Play()

Overview: Tweening Guis[]

There is a much simpler way to tween ScreenGuis. There are 3 types of Tweens for Guis:

TweenPosition: moves the gui
TweenSize: scales the gui
TweenSizeAndPosition: moves and scales gui synchronously

UDim2[]

Before we begin, we need to review UDim2. UDim2 is a data type that is similar to Vector3, only it takes four number values. UDim2 is reserved for Guis, as it manages 2-dimensional objects. The four values are the X scale, X offset, Y scale, and Y offset.

TweenPosition[]

TweenPosition is a function used to move a Gui. As parameters, you will need to provide the following:

endPosition: Ending position in UDim2.
easingDirection: Direction of tween. Use Enum.
easingStyle: Style of tween. Use Enum.
time: duration of tween in seconds.
override: Whether or not the tween will interrupt another tween. Boolean.
callback: function to be called after tween is complete. Nil by default.

The code should look something like this:

game.StarterGui.ScreenGui:TweenPosition(
    UDim2(0,0,0,0),
    Enum.EasingDirection.Out,
    Enum.EasingStyle.Linear,
    1,
    false,
    nil
)

TweenSize[]

TweenSize is very similar to TweenPosition, but instead of giving the endPosition, you would give the endSize.

game.StarterGui.ScreenGui:TweenSize(
    UDim2(1,2,1,2),
    Enum.EasingDirection.Out,
    Enum.EasingStyle.Linear,
    1,
    false,
    nil
)

TweenSizeAndPosition[]

To use the TweenSizeAndPosition function, you must include the endSize and the endPosition. Remember that the Size is given first.

function Callback()
    print("TweenComplete")
end

game.StarterGui.ScreenGui:TweenSizeAndPosition(
    UDim2(0.5,0,0.5,0),
    UDim2(0,300,0,300),
    Enum.EasingDirection.Out,
    Enum.EasingStyle.Linear,
    1,
    false,
    Callback
)

In this case, the Gui will move in a linear style to the point (300,300). (300 pixels to the right, 300 up). It will also scale down to one quarter of the screen, before calling the function Callback().

And that's all you need to know about tweening! Check out the example below.

Example[]

The below example would tween a frame to the top left of the parent's size and resize it down to 0.

local frame = script.Parent.Frame
frame:TweenSizeAndPosition(UDim2.new(0,0,0,0), UDim2.new(0,0,0,0))