To start, I'd like to tell you what exactly the TweenService is. The TweenService can be used to smoothly turn one value into another. This value can be almost anything, A number, a Vector3 (position/orientation), a CFrame, a Color3, etc.
The TweenService offers amazing practical and easy use. For instance, if you wanted a number to go from 10 to 20 in 1 second, you can use a loop like this one:
for i = 10,20 do
number.Value = i
wait(.1)
end
Or instead, you can use one line by using the TweenService like this:
TweenService:Create(number,TweenInfo.new(1),{Value = 20}):Play()
Now this might look slightly complicated, so I will now explain, part by part, how to do this yourself.
First, you need to define the TweenService as a variable. This is really easy and can be done like this:
local ts = game:GetService("TweenService")
In this tutorial we will use the variable "ts" which is short for TweenService.
After defining the variable, we can start creating the tween. We can do this by simply typing :Create() behind our "ts". [ts:Create()]
A tween consists of server components. The first component is the instance that we will be changing. For this tutorial we will use a Vector3 value as our instance. Of course we need to have a Vector3 value for that, so we'll create one first.
local vector = Instance.new("Vector3Value")
Now that we have our value, we can insert it into the first component.
local ts = game:GetService("TweenService")
local vector = Instance.new("Vector3Value")
ts:Create(vector)
Now for this tutorial we are using a Vector3 value, but keep in mind, this "Target-Instance" that we are defining can be almost anything else.
The second component is a little bit more tricky. The second component is always inserted as TweenInfo.new(). This component has several components itself. To avoid any confusion, we will call these components within the TweenInfo "Subcomponents".
The first subcomponent of the TweenInfo is a time value (in seconds). All you have to do for this is just type a number like 1 or 192. This number will be the amount of seconds the tween will take to fully execute. This is the only required subcomponent of the TweenInfo.
The second subcomponent is EasingStyle. The EasingStyle determines in which kind of movement the tween will try to achieve the set goals. This might sound a little complicated, but it's about to get a lot easier. The EasingStyle is set to Quad by default. There are 11 different EasingStyles and I will copy each single one of them down below.
Linear
Sine
Back
Quad
Quart
Quint
Bounce
Elastic
Exponential
Circular
Cubic
Each of these EasingStyles can be aquired by typing: Enum.EasingStyle. and then the style itself, so, for instance with Linear: Enum.EasingStyle.Linear.
The third subcomponent is the EasingDirection. This one is much simpler. The EasingDirection
bascially just defines the direction that the EasingStyle is executed. The default EasingDirectionis set to Out. The EasingStyle called Bounce has a very visible effect, so we will take this one as an example. Normally, with the direction being Out, the tween will first reach the goal, then it will bounce back and forth between the goal itself, and a slight overshot. If the direction was In, the opposite, then the tween would first bounce and then move towards the goal. The last direction is InOut. This one will move inwards for the first half, and outwards for the second half of the tween.
The fourth subcomponent is the repeatCount. This is just a number like time, and represents the amount of times the tween will execute again. The default is set to 0.
The fifth subcomponent is the reverses subcomponent. This is a boolean value, so it's either true or false. The default value for this is false. If it is set to true, it will just to the opposite of what your tween would do (go from the goal towards the current state).
The sixth and final subcomponent is the delayTime. This is just a number again, and it represents the amount of seconds that elapse before the tween is executed. By default this value is 0.
So now we know what TweenInfo does. I will give a short example that covers all 6 components.
local info = TweenInfo.new(1,Enum.EasingStyle.Linear,Enum.EasingDirection.In,0,false,5)
-- first it waits 5 seconds, then in 1 second it will move towards the goal with a linear, inwards direction. It will repeat this 0 times.
The Third and final component of a tween is the list of goals. This list of goals is a table {} of all goals that you want to achieve and change for your instance.
In our case we have the Vector3 value, so it would be most logical to change the Value of our instance. To do this, we can use this code:
local goals = {
Value = Vector3.new(10,10,10)
}
In more complicated instances, you can define several goals within that same table. Just make sure to separate each goal with a comma.
##Final Steps Now lets put together all the code we have written so far into one script.
local ts = game:GetService("TweenService")
local vector = Instance.new("Vector3Value")
local info = TweenInfo.new(1,Enum.EasingStyle.Linear,Enum.EasingDirection.In,0,false,5)
-- first it waits 5 seconds, then in 1 second it will move towards the goal with a linear, inwards direction. It will repeat this 0 times.
local goals = {
Value = Vector3.new(10,10,10)
}
ts:Create(vector,info,goals)
Now that we have pieced together all our code into the same tween, we can activate it. Creating a tween isn't enough, you'll have to use the function :Play() to make it work. With this feature you can also define a tween as a variable to execute it at any time again. That would look something like this:
local ts = game:GetService("TweenService")
local vector = Instance.new("Vector3Value")
local info = TweenInfo.new(1,Enum.EasingStyle.Linear,Enum.EasingDirection.In,0,false,5)
-- first it waits 5 seconds, then in 1 second it will move towards the goal with a linear, inwards direction. It will repeat this 0 times.
local goals = {
Value = Vector3.new(10,10,10)
}
local tween = ts:Create(vector,info,goals)
tween:Play()
And that's it!
##Optional - Additional Practice
Now we know how the TweenService is used! Now that we know everything about it, we can start using it for a more practical purpose. Let's try to move a Part inside the workspace to (0,0,0), while it's slowly changing from white to black.
First, make sure there's a part named "Part" inside the workspace and move it somewhere random.
local part = Instance.new("Part",workspace)
part.Color = Color3.fromRGB(255,255,255)
part.Position = Vector3.new(30,65,-82)
If you want to challenge yourself, try to create the script for yourself first and then check back here to see if you did it right.
We'll start by defining the TweenService again.
local part = Instance.new("Part",workspace)
part.Color = Color3.fromRGB(255,255,255)
part.Position = Vector3.new(30,65,-82)
local ts = game:GetService("TweenService")
Let's continue by defining our goals.
local goals = {
Position = Vector3.new(0,0,0),
Color = Color3.fromRGB(0,0,0)
}
Now that we have our goals, let's assemble our tween and make it a variable.
local part = Instance.new("Part",workspace)
part.Color = Color3.fromRGB(255,255,255)
part.Position = Vector3.new(30,65,-82)
local ts = game:GetService("TweenService")
local goals = {
Position = Vector3.new(0,0,0),
Color = Color3.fromRGB(0,0,0)
}
local tween = ts:Create(part,TweenInfo.new( ),goals)
Of course we cannot forget about the TweenInfo. Since we want it to move without any aditional things, we'll set the easingstyle to Linear and set the time to 5 seconds.
local part = Instance.new("Part",workspace)
part.Color = Color3.fromRGB(255,255,255)
part.Position = Vector3.new(30,65,-82)
local ts = game:GetService("TweenService")
local goals = {
Position = Vector3.new(0,0,0),
Color = Color3.fromRGB(0,0,0)
}
local tween = ts:Create(part,TweenInfo.new(5,Enum.EasingStyle.Linear),goals)
Because we don't want to fire it immediately, we will also have it wait 5 seconds before it we play it.
local part = Instance.new("Part",workspace)
part.Color = Color3.fromRGB(255,255,255)
part.Position = Vector3.new(30,65,-82)
local ts = game:GetService("TweenService")
local goals = {
Position = Vector3.new(0,0,0),
Color = Color3.fromRGB(0,0,0)
}
local tween = ts:Create(part,TweenInfo.new(5,Enum.EasingStyle.Linear),goals)
wait(5)
tween:Play()
And that's it! Our part should now be done. You can try and see for yourself.
And that also concludes this tutorial. I hope it was useful for you :D