How to use TweenService in Simple Terms

Introduction

Hello! My name is LuckyEcho, and I am a scripter on roblox. I’ve been scripting on roblox for around 2 years. But anyway this tutorial is on how to use TweenService, which I think is one of the most important services.

What is TweenService?

TweenService is one of the many Services in Roblox Studio. TweenService helps you move parts or models around the workspace smoothly. It can be used to create a door. It could also be used to make something spin. Anything that moves, it probably uses TweenService.

How to use it.

To use TweenService, first in your script you need to get theservice. You can do this by typing it to a variable. Here is an example.

local TS = game:GetService("TweenService")

How to create a Tween.

First I will talk about creating Tweens. Tweens is what it’s called when you create something with TweenService. To create a Tween, first you need something called TweenInfo. This is basically a configuration for your tween. Set up a new variable called info, and make it equal to TweenInfo.new()
Here is an example script. Please notice the stuff inside of the parenthesis.



local TS = game:GetService("TweenService") --Gets the TweenService

local info = TweenInfo.new( --Creates the TweenInfo.
	
	1, --The first argument is the time it takes to complete the tween, here I have it set as 1 second.
	
	Enum.EasingStyle.Sine, --The second argument is the EasingStyle of the Tween. Here it is set to Sine.
	
	Enum.EasingDirection.InOut, --This is the force applied to the Tween for each half.
	
	0, --This is how many times it repeats. Set it to -1 for it to repeat forever.
	
	false --This is if the tween reverses once its done.
	
) 

Now I will explain the arguments. The first argument is the amount of time it takes to complete the tween in seconds. Here I have it set to 1, which means 1 second. This takes a number value.

The 2nd argument is the EasingStyle, you can find all the EasingStyles by typing Enum.EasingStyle, please also look at this video that Roblox has made, to see all the different types of EasingStyles. EasingStyles is the style of the tween when it’s moving. This takes a Enum.EasingStyle value.

The 3rd argument is the EasingDirection, “In” means all force is applied when it starts. “Out”, means it force is applied at the end, and “InOut”, means it’s half force applied in the beginning and half force applied in the end. This takes a Enum.EasingDirection value.

The 4th argument is how many times it repeats, set this to -1 for it to repeat forever. This takes a number value.

The 5th argument is if it reverses once it’s done. This takes a bool value.

Actually creating the tween.

Now once you have your variable that has your info. You can create a new variable named what ever you want. I named mine “tween”, and set it equal to TweenService:Create(). Here is an example.

--Remeber TS is my variable for TweenService.
local tween = TS:Create()

Now TS:Create() takes 3 arguments, first look at my example here then I will explain it.


local info = TweenInfo.new( --Creates the TweenInfo.
	1, --The first argument is the time it takes to complete the tween, here I have it set as 1 second.
	Enum.EasingStyle.Sine, --The second argument is the EasingStyle of the Tween. Here it is set to Sine.
	Enum.EasingDirection.InOut, --This is the force applied to the Tween for each half.
	0, --This is how many times it repeats. Set it to -1 for it to repeat forever.
	false --This is if the tween reverses once its done.
) 

--Remeber TS is the variable I made for TweenService.
--Remeber "info" is the variable I made for my tween info.
local tween = TS:Create(
	game.Workspace.PartToTween, --The object to tween.
	
	info, --The tween info, put in your variable for your tween info here.
	
	{Transparency = 1} --The property of the object you want to change.
)

Ok, now what do we have here? The first argument is the object you want to tween. If you want to tween a model, weld all of the other parts to one main part. Then tween that main part. So if you want to tween a part, type in the location of the part. It can be a variable that is equal to the part.

The 2nd argument is your TweenInfo, now I created a TweenInfo variable higher up in the script. Put your variable for your TweenInfo there.

The 3rd argument is the property you want to change. See how I chose a part. A part has all different kinds of property’s, Transparency, Position, Color. So what you do is make a table with brackets.(Not Parenthesis), and put the property you want to change, and what you want it to change to. See how I wrote transparency = 1. This means by the end of the tween, I want it’s transparency to be 1. If you where tweening a position. Change it to {Position = FinalPosition}. FinalPosition would be either a CFrame or Vector3.new().

Playing your tween.

You’re almost there! To play your tween, you have to type the name of the variable that is equal to your tween, and then add “:Play()” to it. Here is an example below.

local tween = TS:Create(
	game.Workspace.PartToTween, --The object to tween.
	
	info, --The tween info, put in your variable for your tween info here.
	
	{Transparency = 1} --The property of the object you want to change.
)

tween:Play() --Plays my tween.

That’s it, type “:Play()” to play your tween. But what if you want something to happen once it’s done?
Once you called Play(), then do tween.Completed, you can either connect a function to this, or use :Wait(). Here is an example.

--Remeber tween is the variable equal to my tween.

tween:Play()

tween.Completed:Wait()

tween.Completed:Connect(function()
	
end)

Both of these basically do the same thing.

Stopping a tween in the middle of it, or some time.

Just type the name of your tween, and then add “:Pause()” to it. Here is an example below.

tween:Play() --Plays my tween.

task.wait(5) --Wait 5 seconds.

tween:Pause()--Stops my tween.

Final Script



local TS = game:GetService("TweenService") --Gets the TweenService

local info = TweenInfo.new( --Creates the TweenInfo.
	12, --The first argument is the time it takes to complete the tween, here I have it set as 1 second.
	Enum.EasingStyle.Sine, --The second argument is the EasingStyle of the Tween. Here it is set to Sine.
	Enum.EasingDirection.InOut, --This is the force applied to the Tween for each half.
	0, --This is how many times it repeats. Set it to -1 for it to repeat forever.
	false --This is if the tween reverses once its done.
) 

local tween = TS:Create(
	game.Workspace.PartToTween, --The object to tween.
	
	info, --The tween info, put in your variable for your tween info here.
	
	{Transparency = 1} --The property of the object you want to change.
)


tween:Play()

task.wait(10)

tween:Pause()

End & Q&A

Q: Once I play my tween, does the script wait for it to be completed before continuing the script?

A: Once the tween starts, the script will keep continuing the script unless you add a tween.Completed:Wait()

Q: Can I play multiple tweens in the game at once, or from the same script?

A: Yes, just do tween1:Play(), then right after it do tween2:Play()

Bye

Thank you for reading my tutorial, I hope it helps explain TweenService to you. If you have any questions or feedback just say it below.

25 Likes

I never understood In, Out, InOut, etc. this tutorial helped me understand it better.

Also I love the video that shows how tweens are.

6 Likes