Can’t wrap my head around TweenService

Good afternoon, Developers,

I am trying to wrap my head around the documentation of TweenService. I know what it does… I just can’t seem to understand it. If I could get recourses below other than the Roblox Dev Hub documentation on TweenService I would appreciate it. In the attempt to learn, I ask that you provide the essentials of where I need to start, as well as resources to better understand the service. Thanks!

1 Like

TweenService is actually pretty simple when you get the hang of it. I’ll explain.

I’ll start you off by showing you my function

function Tween(obj, totalTime, easingstyle, easingdirection, goal) -- Creates the tween function
    -- TweenInfo.New() is basically the second argument in tweening. It uses the following
    local tweenInfo = TweenInfo.new( 
        totalTime, -- The amount of time you want the tween to last
        Enum.EasingStyle[easingstyle], -- The style that you want when you tween
        Enum.EasingDirection[easingdirection] -- The direction, can be In, Out, or InOut
    )
    -- After you tween you have to set the goal, which is what you want the tweening to do, it can be color size, position, etc. It's pretty flexible.
    local tween = tweenService:Create(obj, tweenInfo, goal):Play() -- Ultimately, you do :Play() to start the tweening.
end

Those are pretty much the basics to tweening and it’s easy to use and they’re really useful to making things neat.

An example to that tween function would be

Tween(topFrame, 0.3, "Quart", "Out", {Size = UDim2.new(0, 0, 0, 0)})
-- The following tweens topframe, in 0.3 seconds to using the style "Quart" going "Out" and setting the size.

It’s really flexible, the more you experiment with it. The better you’ll get.

1 Like

Because you know what tween service does, I’ll just explain the concepts of it.
TweenInfo:

local TI = TweenInfo.new(1, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut)
                         1            2                        3
  1. The amount of time it takes to fininsh the tween
  2. The type of tween(Linear, Sine, Quart, Quint, Constant, etc.)
  3. The direction of the tween(In, Out, InOut)

Now that you have the tweeninfo ready, you are ready to create the tween:

local Part = -- The part to tween

local Tween = game:GetService("TweenService"):Create(Part, TI, {Position = Vector3.new(0, 0, 0)})
                                                       1    2      3                4
Tween:Play()
     5
  1. This parameter is for the object you want to tween
  2. This was the TweenInfo we created
  3. The attribute you want to change for the object
  4. What you want to change the attribute to
  5. Plays the Tween

Note:
When you want to change an attribute, you have to wrap it in {} brackets:

{Position = Vector3.new()} -- 3D object
{Position = UDim2.new()} -- UI
2 Likes

@Aldanium @VegetationBush Thank you for your input.

Say I have a part in midair and I want to change it’s position. The part is unanchored. If I use tweening service, will gravity affect the part or function more like CFrame?

1 Like

You should anchor the part before using tweenservice. Gravity will affect it.

1 Like

note that the goal section (the last parameter) is a table, and you can have more than one goal in it. For example:

local tweenService = game:GetService("TweenService")
local tweenInfo = TweenInfo.new(3, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, -1, false, 0)
-- note: when you're only using 1 TweenInfo it's good to save it like this
-- instead of remaking it again every time

local part = -- in this example, you're tweening properties of a part
local partColor = part.Color:ToHSV()

local endColorValue = math.clamp(partColor.v + 20, 0, 100)
-- make the part color slightly brighter

local goal = {
    Color = Color3.fromHSV(partColor.h, partColor.s, endColorValue);
    -- you can use multiple goals as i said earlier
    Size = part.Size * 2; -- make it twice as big
    Position = part.Position + Vector3.new(0, part.Size.Y / 2, 0);
    -- also tween its position to match the increasing size
    -- so it doesn't clip through the ground
}

local tween = tweenService:Create(part, tweenInfo, goal)
tween:Play()
tween.Completed:Wait()
-- you can use this final line to make the script wait until the tween is finished
-- before running the rest of the code in the script
1 Like

Awesome, thanks so much for your help! After experimenting I do realize how simple it is. You guys were of great help ⁧ ⁧ : D