Tweens are simple: Set an Instance, their tweening information, and the target. We’ll get to that later.
Say we have a Frame which the user does not see, as Visible = false and Transparency = 1. How would we make it visible smoothly?
Hint: Not this way.
while Frame.Transparency ~= 0 do
Frame.Transparency -= 0.01
wait(0.01)
end
-- or this way
Frame.Transparency = 0.99
wait(0.01)
Frame.Transparency = 0.98
wait(0.01)
-- ...
First of all, we want to include a Tween Information. As stated before, it lets the tween know how to tween the property to the target, essentially its behaviour. Note that after creation, you cannot modify it. You can store TweenInfos in a variable:
local Info = TweenInfo.new()
The .new() constructor takes these parameters:
-
Time
{number}: The time it takes to play the tween.
-
EasingStyle
{Enum}: How the tween is played. Example: Linear will tween the property continuously in a straight line, and Exponential will start quickly, and ending slowly.
-
EasingDirection
{Enum}: The direction to play EasingStyle.
-
RepeatCount
{number}: How many times to replay the tween after playing it once.
-
Reverses
{boolean}: If true, plays the tween in reverse after completion, essentially back to its original position.
-
DelayTime
{number}: How long to delay the tween before playing.
A complete TweenInfo would look like this:
local Info = TweenInfo.new(
0.2, -- Time
Enum.EasingStyle.Exponential, -- EasingStyle
Enum.EasingStyle.In, -- EasingDirection
0, -- RepeatCount
false, -- Reverses
0 -- DelayTime
)
Now that we have the TweenInfo complete, let’s get to tweening our Frame.
First, we want to create the tween using TweenService’s :Create() method:
local TweenService = game:GetService("TweenService")
local Tween = TweenService:Create()
This method takes the following parameters:
-
Instance
{Instance}: The object you want to tween.
-
TweenInfo
{TweenInfo}
-
PropertyTable
{Table}: The target property or properties after tweening. If the instance provided does not have the properties stated here, it will error.
This would be a Tween after we create it:
local TweenService = game:GetService("TweenService")
local Info = TweenInfo.new(
0.2, -- Time
Enum.EasingStyle.Exponential, -- EasingStyle
Enum.EasingStyle.In, -- EasingDirection
0, -- RepeatCount
false, -- Reverses
0 -- DelayTime
)
local Tween = TweenService:Create(
script.Parent, -- Instance, for example, the frame
Info, -- TweenInfo
{ -- Properties
Transparency = 0
-- As long as the property exists, it will be tweened
-- If not, it will error.
}
)
To play a tween we can call the :Play() method.
Tween:Play()
That’s the basics of tweening! You can always learn more from the documentation: TweenInfo, and TweenService.