Hello Developers!
Today, I will be showing you how to Tween a Gui (Position, Size, and Both)
First, this is how my Gui is set up:
What it looks like:
TweenSize(endSize, easingDirection, easingStyle, time, override, callback)
Developer Hub
The simple way: (You can not change any other settings)
All you need to get TweenSize() to work is the “endSize”.
So, this is what I did:
script.Parent.TestText:TweenSize(UDim2.new(0.549, 0, 0.117, 0))
Outcome:
The Advance way:
Here is a example from the Developer Hub:
local willTween = guiObject:TweenSize(
UDim2.new(0.5, 0, 0.5, 0), -- endSize (required)
Enum.EasingDirection.In, -- easingDirection (default Out)
Enum.EasingStyle.Sine, -- easingStyle (default Quad)
2, -- time (default: 1)
true, -- should this tween override ones in-progress? (default: false)
callback -- a function to call when the tween completes (default: nil)
)
This is what I did:
function GuiDone()
script.Parent.TestText.Text = 'Done Tweening'
end
script.Parent.TestText:TweenSize(UDim2.new(0.549, 0, 0.117, 0),
Enum.EasingDirection.Out, -- I set it to Default (Out)
Enum.EasingStyle.Elastic, -- I set it to Elastic
5, -- I set it to 5 for a long tween
true, -- I set it just incase there is another tween happening
GuiDone -- Tells me if the tween is done
)
What it looks like after it stopped:
TweenPosition(endPosition, easingDirection, easingStyle, time, override, callback)
Developer Hub
The simple way: (You can not change any other settings)
You only need endPosition for it to work.
So, this is what I did:
script.Parent.TestText:TweenPosition(UDim2.new(0.383, 0, 0.859, 0))
Outcome :
The Advance way:
Here is a example from the Developer Hub:
local willPlay = guiObject:TweenPosition(
GOAL_POSITION, -- Final position the tween should reach
Enum.EasingDirection.In, -- Direction of the easing
Enum.EasingStyle.Sine, -- Kind of easing to apply
2, -- Duration of the tween in seconds
true, -- Whether in-progress tweens are interrupted
callback -- Function to be callled when on completion/cancelation
)
This is what I did:
function GuiDone()
script.Parent.TestText.Text = 'Done Tweening'
end
script.Parent.TestText:TweenPosition(UDim2.new(0.383, 0, 0.859, 0),
Enum.EasingDirection.In, -- Set mine to In
Enum.EasingStyle.Elastic, -- Set it to Elastic
5, -- I set it to 5 for a long tween
true, -- I set it just incase there is another tween happening
GuiDone -- Tells me if the tween is done
)
What it looks like after it stopped:
** TweenSizeAndPosition(endSize, endPosition, easingDirection, easingStyle, time, override, callback)**
Developer Hub
The simple way: (You can not change any other settings)
You only need endSize and endPosition for it to work.
So, this is what I did:
script.Parent.TestText:TweenSizeAndPosition(UDim2.new(0.549, 0, 0.117, 0), UDim2.new(0.225, 0, 0.857, 0))
Outcome :
The Advance way:
Here is a example and what I did:
function GuiDone()
script.Parent.TestText.Text = 'Done Tweening'
end
script.Parent.TestText:TweenSizeAndPosition(
UDim2.new(0.549, 0, 0.117, 0), -- Size
UDim2.new(0.225, 0, 0.857, 0), -- Position
Enum.EasingDirection.In, -- I set this to In
Enum.EasingStyle.Elastic, -- I set this to Elastic
5, -- I set it to 5 for a long tween
true, -- I set it just incase there is another tween happening
GuiDone -- Tells me if the tween is done
)
Outcome :
I hope this helps someone 