TweenService tutorial

This mini-lesson on TweenService in Roblox Studio.

  1. Create a part
  2. in the Explorer, select the created part and add a script to it
    3.Code:

1.adding a service to the game

--/Service/ --/it is not necessary to write it, since it is a designation/
local TweenService = game:GetService("TweenService")

2, we create a link to the part

--/Links/
local part = game.Workspace.Part --/link to a part (or to another object)/

3.Now we are writing a TweenInfo data type that stores parameters for TweenService:Create() to specify the animation behavior.

local Info = TweenInfo.new(1) --/The TweenInfo data type stores parameters for TweenService:Create() to specify the behavior of the tween/

4.Now we create a Target variable and create the size of the future part in it. (or other parameters that are specified in the Part)

local Target = {Size = Vector3.new(15,15,15)} --/choosing the size of the part, What would you like it to become --/in addition to size, you can choose other parameters that are in the part (Color, Transparency, Material, and so on)

5.Create a variable and list all the variables (Part, Info, Target) (Part is a part that will take dimensions. Info is a variable that will repeat the size animation if TweenInfo.new(1) is specified, then it will be once if TweenInfo.new(2), then it will show the Size animation twice. Target is the specified size that will be part.

local Tween = TweenService:Create(part, Info, Target) --/enumerations of all variables/

6.We write wait(10). Wait is the waiting time. If wait(10) then waits 10 seconds, if wait(5) then 5 seconds.

wait(10) --/Waiting time(the time can be whatever you want)/

7.the Tween variable lists other variables and using :Play(), the Tween variable triggers other variables that are listed in the Tween variable

Tween:Play()  --/Starts the Tween variable/

Full Code:

--/Service/
local TweenService = game:GetService("TweenService") --/TweenService adding/

--/Links/
local part = game.Workspace.Part --/link to a part (or to another object)/

local Info = TweenInfo.new(1) --/The TweenInfo data type stores parameters for TweenService:Create() to specify the behavior of the tween/

local Target = {Size = Vector3.new(15,15,15)} --/choosing the size of the part, What would you like it to become --/in addition to size, you can choose other parameters that are in the part (Color, Transparency, Material, and so on)

local Tween = TweenService:Create(part, Info, Target) --/enumerations of all variables/

wait(10) --/Waiting time(the time can be whatever you want)/

Tween:Play()  --/Starts the Tween variable/

Thank you so much for reading this topic! :heart:

16 Likes

This is good to start off with, but eventually I worked with a very simplified version:

game.TweenService:Create(instance, TweenInfo.new(0.4,Enum.EasingStyle.Quad,Enum.EasingDirection.Out,0,false,0), 
     {Position = UDim2.new(0.5,0,0.5,0}):Play()

I rarely ever save the tween to a variable, so I just play it directly without saving it somewhere.

4 Likes

I mean that works but making a tween function like this for me is considered as painful practice.

1 Like

I’ve wrote it so many times that I can do it in 4-8 seconds, and I can read it pretty easily. Making variables for the properties, tweeninfo, and tween, are not something I like to see.

1 Like

That is very bad practice, especially if you end up reusing them.

1 Like

I never end up reusing them. If you mean just calling them over and over again over time, I would rather recreate the tween every time so to not have a lot of tween memory always around.
Also I don’t want 50 variables for tweens.

1 Like

@filipinbro12332 To Add on here:


game.TweenService and game:GetService("TweenService") are both Valid Options, I would recommend using game.TweenService as you will be able to find more options., Events, etc

local Test = game.TweenService -- Valid
local AlsoTest = game:GetService("TweenService") -- Also Valid

Its also good to know the Proper way to fully set up a Tween with TweenInfo:

local Example = TweenInfo.new(
	
	1, -- Time Frame? (In Seconds, Time for Tween to Finish)
------------------------------/ Optional Stuff Below /------------------------------------------
	Enum.EasingStyle.Linear, -- The way the Tween is Controlled
	Enum.EasingDirection.InOut, -- The way the Tween Trasnitions
	0, -- Times Repeated? (-1 or math.huge = infinite)
	false, -- Reversable? (When the tween is done, can it reverse back to its orginal Position?)
	1 -- Time the Tween Is Delayed	
)

About EasingStyle and EasingDirection:

I would Recommend This Tweet to get an idea of that.


Instead of firing code after waiting for a wait() (Ikr, so lame), you can fire code by using Tween.Completed

local Tween = TweenService:Create(

Part, -- Object you want to Tween
TweenInfo, -- Provide TweenInfo for the Tween to be set up
{Size = Vector3.new(0,0,0), Transparency = 1} -- Table of Info Assigned for the Tween
)
Tween:Play() -- Plays Tween
Tween.Completed:Connect(function() -- Fires when Tween has Finished
    print("Tween Is Done!")
end)

But, You can wait for the Tween the Finish by doing Tween.Completed:Wait()

local Tween = TweenService:Create(

Instance?, -- Object you want to Tween
TweenInfo, -- Provide TweenInfo for the Tween to be set up
{Size = Vector3.new(0,0,0), Transparency = 1} -- Table of Info Assigned for the Tween
)
Tween:Play() -- Plays Tween
Tween.Completed:Wait() -- Yields code until Tween is Finished

However, if you want a more Linear Approach, You can also use CFrame:Lerp()


EasingStyle Documentation
EasingDirection Documentation


Video that may be helpful


I get it tho, mini tutorial, but still.


3 Likes

I don’t get why this would provide more options than game:GetService("TweenService"), but your method is worse than this one, as if a player renames their TweenService (for some reason), that line would error. The Code Editor is programmed to return the same options for both methods, but internally GetService is better.

1 Like

Its weird, Ik, It has happened for me which was weird, I usually use game.TweenService, works the same as game:GetService("TweenService") tho

What do you mean by this

1 Like

Your Studio is bugged, mine doesn’t have this problem.

Let’s say I name my TweenService Instance “TweenS”. Accessing TweenService using your method from, let’s say, an unedited script from the Toolbox would error, because game.TweenService doesn’t exist.

1 Like

Works for me, I have no issue with it.

1 Like

game.TweenService


game:GetService("TweenService")


See the difference?

1 Like

Works for me, Im not sure what you’re talking about

1 Like

Make sure you renamed TweenService using:

game.TweenService.Name = "TweenS"

However, let’s end it here. It really looks bad for the topic. If you still want to talk about it you can PM me.

1 Like

Why are you naming it? Thats what im wondering

Agreed

1 Like

Yes, technically if TweenService is renamed, game.TweenService won’t work. But, why in the world you would rename a service? And if there is a virus in your game that renames services, don’t use GetService to fix this, delete the virus to fix this. I only use GetService if the service isn’t called what it’s ClassName is, like UserInputService is called “Instance” in the explorer, so you need GetService.

2 Likes

Yeah, Pretty much, thanks.

2 Likes

it works but it’s harder to read, better to organize it especially if you working in a team as it’s much more efficient.

2 Likes

It’s realistically better practice to use game:GetService() even if game.ServiceName works just as fine.

Reason being as you stated, some services like UserInputService are labeled as “Instance”, often hidden away in the Explorer unless toggled on through the settings.

That way you won’t have this inconsistency where you’re using game:GetService() to get things, and then directly addressing it otherwise like game.ServiceName

Though, to be honest, it is really up to you on how you want to get the services and use them. At least for me I like to keep it consistent and use game:GetService() since I’m just used to that.


@filipinbro12332

Good tutorial, though I would probably explain snippets of your code on the Tutorial rather than just straight up giving it out. That it’s easier to digest the information, even if it’s a mini tutorial. Otherwise, it probably would belong elsewhere, or should be left to the numerous other topics on TweenService.

2 Likes

Thank you for your kind words, I will take it into consideration

2 Likes