How to use TweenServie and what does it do?

In basic, TweenService is a service that allows you to animate parts, GUIs, and properties.

The word "Tween" is short for "in-between", or interpolating positions to smoothly animation things.

I'll break down what it is, how to use it, and what requirements it needs.

If you plan on using tweenservice, you have to have a game:GetService() function at the top of your script.

local TweenService = game:GetService("TweenService")

Having this defines tweenservice and allows access to its usability!

TweenService has one major function. TweenService:Create(). Using this allows for tweens to be made!

the function ts:Create() has 3 things that you need to use it. (These are in order!)

target - The thing that you want to animate. Examples include Color properties, instanceValue.Value properties, and Position properties.

info- the TweenInfo table that tells the service how to animate the target.

destination - where you want the animation to end! (This is a table! This means you can have more than one property tweened at once!)

Example:

{Position = Vector3.new(1,2,3), Color = Color3.fromRGB(255,255,255)}

on the info argument, you need to use a TweenInfo.new() constructor.

-- Example TweenInfo constructor

local ti = TweenInfo.new(1, Enum.EasingStyle.Quad, Enum.EasingDirection.InOut, 0, false, 0)

This may look complicated. Let's break it down!

these are the 6 arguments for the TweenInfo constructor.

duration - How long the animation takes.

EasingStyle - The style of easing. Refer to this link on the dev hub for more info.

EasingDirection - The direction in which the EasingStyle is applied.

RepeatCount - the number of times you want the tween to repeat. If set to -1, it loops infinitely!

Reverses - Whether or not the animation reverses after it's done.

DelayTime - If the tween loops, this number in seconds acts as a delay between animations.

Here's what's cool: You don't even need to type some of these! RepeatCount, Reverses, and DelayTime are set to 0, false, and 0 respectively when they are not expressed!

Now, let's say we want to move a part from point A (at Vector3.new(0,0,0)), to point B (at Vector3.new(3,0,0)). Here's how it would be done!

local TweenService = game:GetService("TweenService")

local part = workspace.Part -- or whatever your part is

local ti = TweenInfo.new(3, Enum.EasingStyle.Quad, Enum.EasingDirection.InOut)

local tween = TweenService:Create(part, ti, {Position = Vector3.new(3,0,0)}

wait(3) -- to stop it from running instantly

tween:Play() -- runs the tween!

When this script is ran, after 3 seconds, the part should move smoothly from point A to point B!

Taking this in mind, you can use it on GUIs as well! Just use UDim2.new instead of Vector3.new and you can change size, position, transparency, and so much more!

TweenService is amazing, and I hope this helps you understand it better!

TweenService is a service featured by Roblox in order to move parts/GUIs. Here's an example script:

script.Parent.MouseButton1Click:Connect(function() -- check if the player clicked a gui
    gui.PlayFrame:TweenPosition(UDim2.new(0, 0,0, 0)) -- the UDim2 is how you tween GUIs.
    gui.MainFrame:TweenPosition(UDim2.new(-1, 0,0, 0))