TweenSize broken-down

Tweening is what I just would like to call interpolating. Interpolating isn't that hard - let's see some basic linear interpolation:

Let's say you have a row for "box" and a row for "apples"

Box: 1, 2, 4 Apples: 4, 8, 16

Now you say: Hrm? But how much apples go in 3 boxes? Well, as you can imagine, this is 12. This is called interpolation: you have a start value (field (2,8)) and an end value (field (4,16)) and you basically "calculate" the value between those - note the word "between" - this is something you could say is a synonym for "inter". We also have extrapolation which basically means that you want to find the value for a box outside the values already provided (for instance, Box 8).

We can create an interpolation function for this set:

function InterpolateBox(box)
return box * 4
end
for i = 1, 8 do
print(InterpolateBox("Box number: "..i.." can hold: "..InterpolateBox(i).. " apples!"))
end

Interpolation is something you want to do often in roblox. For instance, when you want to interpolate the size of a GUI between two sizes to make it look "cool" and "smooth". Note "between" - this means interpolating.

We need a start size - we just define this as the size of the Gui object. In your code, that's just Frame.Size. We also want a size where we end the frame. This is the first argument of the TweenSize method!

What we also would like to know is HOW we want to interpolate. This is defined by the second, third and fourth argument. The second argument defines if the tweening goes "in", "out", or "inout". This basically means:

Out: Start with 0 velocity In: End with 0 velocity InOut: Start and End with zero velocity.

We also would like to know a style. This is defined by an interpolation function. I don't know how the internal code works, but if I would create it I would define this by a function between x = 0, x = 1 and between y = 0, y = 1. Let's look at an example for the "linear" style. This function returns the size on a certain portion of the time it has to take. Time is the fourth argument. In your example it takes 20 seconds to travel.

function GetNewSize(StartSize, EndSize, Portion) 
local Difference = EndSize - StartSize
-- If we are at the end, we can add the Difference to the StartSize, because:
-- NewPosition = StartSize + Difference = StartSize + EndSize - StartSize= EndSize
-- If we are at the half portion, at the half of difference!
-- So the formulae is: StartSize + Portion * Difference
return StartSize + EndSize * Portion
end

local Gui = script.Parent
local StartSize = Gui.Size
local EndSize = StartSize + UDim2.new(0, 0, 0,100) -- resize it 100 down
for i = 1, 30 do
    Gui.Size = GetNewSize(StartSize, EndSize, i/30) -- Note: i's range is [0,1]
    wait()
end

This uses a linear function. What you could do is mutate the "Portion" value, for instance, by multiplying it by (Portion ^ 2). If Portion = 0, then the "new portion" is also 0. If Portion = 1, the "new portion" is 1 (1 * 1 = 1).

This is important, because if it would be bigger than one the GUI will shoot further than you want it!

The fifth argument is if you can start tweening the GUI while it is already tweening. If you "spam tween" things and have set this to false, you won't notice any strange behaviors, while if you set it to true it will spas out. I recommend setting it to true though, as you then are sure that if you call Tween it will at least start tweening.

The last argument is the callback. Have any function to run if the tweening is done? You could decide to delete the Frame for example - then you could set the function to;

function() Frame:Destroy() end.

That will immediately destroy the frame after it has done tweening.

I hope this helped you a little bit!