Hello! This is my first tutorial so pardon me if I make any mistakes.
Introduction
If you do not know what tweening is, it is a way to animate GUIs and it can give your UI some motion instead of it just sitting there.
Tweening can be used to open and close GUIs smoothly without it popping up on the screen immediately. It can be used to indicate that you can press a button, an input, and etc. There are many things you can do with tweens, especially outside of GUIs. You can use tweens on parts too!
Prerequisites
- Have an intermediate understanding in Lua
- Have a basic understanding in GUIs
Chapters
Part 1 - Creating a Tween
To get started, create a ScreenGui under StarterGui. Then, create a Frame and a Localscript under ScreenGui
Creating a tween requires the TweenService
local ts = game:GetService("TweenService")
After that, you make a TweenInfo. A TweenInfo describes how the tween is going to execute. This goes from how long the tween lasts, the style, does it repeat, etc.
local tweenInfo = TweenInfo.new(0.3, Enum.EasingStyle.Linear)
There is a more in depth version of TweenInfo in Part 2 - TweenInfo
Next, we need to make a Goal. The goal lets the tween know what he needs to animate to. The goal is a table of properties with values.
local goal = {
BackgroundTransparency = 0.7
}
Note: The tween wonât work if it does not recognize the property from the GUI/Object you are tweening.
Now we have our TweenInfo and goal, we can make the actual tween like so:
local tween = ts:Create(object, tweenInfo, goal)
object is the GUI/Object that you want to animate/tween.
If you run the game, the animation wonât play. Just like animations, you have to use the Play method.
tween:Play()
And that is it! You made a tween!
Part 2 - TweenInfo
A more in-depth explanation can be found here.
There are a few parameters when creating TweenInfo (Some optional, Some required)
- Time - How long it takes for the tween to finish in seconds.
- EasingStyle - An Enum
- EasingDirection - An Enum
- RepeatCount - the amount of times it repeats.
- Reverses - if true, it will reverse and go back to its initial state.
- DelayTime - The amount of time before the tween starts in seconds.
Time
If you want your tween to be fast, make the time less
If you want your tween to be slow, make the time high
EasingStyle in a nutshell is how the tween acts. The following gyazo that I made in like 5 minutes shows the EasingStyles in action.
https://gyazo.com/8415f2ad51dd9ef6dcd1b57fa1ac63e4
The EasingDirection controls the direction of the tween. There are only 3 directions:
- In
- Out
- InOut
They all act differently in each EasingStyle. I advise you to play with them on your own. More information here.
Part 3 - When to use Tweens & Examples
It is important to know when to use Tweens in your game and some examples.
You usually use tweens when:
- A GUI appears.
- You close a GUI
- Indicating a button of some sort (making it bigger when you hover your mouse over)
- Button Actions (making the text translucent once selected)
Examples
Example 1 - Opening GUI
It is pretty easy to implement tweens into a shop gui, and etc. In a click of a button, you can create a tween that animates the GUI popping up out of nowhere.
From Center
Note: The Shop Frame must have an AnchorPoint of 0.5, 0.5
Demo: https://gyazo.com/48b08043a4e8ac80d2f2b66bb23d93f6
Setup:
-- Declaring Variables
local ts = game:GetService("TweenService")
local mainUI = script.Parent.Parent
local shopFrame = mainUI.ShopFrame
local shopBtn = mainUI.ShopBtn
-- the isOpen value is used to tell if the shop is open or not.
local isOpen = shopBtn.isOpen
-- We get the initial shop size for opening the shop frame.
local initialShopSize = shopFrame.Size
isOpen.Changed:Connect(function()
if isOpen.Value == true then
-- open
shopFrame.Visible = true
shopFrame.Size = UDim2.new(0,0,0,0)
local shopTweenInfo = TweenInfo.new(0.15, Enum.EasingStyle.Linear)
local shopTweenGoal = {
Size = initialShopSize
}
local shopTween = ts:Create(shopFrame, shopTweenInfo, shopTweenGoal)
shopTween:Play()
elseif isOpen.Value == false then
-- close
local shopTweenInfo = TweenInfo.new(0.15, Enum.EasingStyle.Linear)
local shopTweenGoal = {
Size = UDim2.new(0,0,0,0)
}
local shopTween = ts:Create(shopFrame, shopTweenInfo, shopTweenGoal)
shopTween:Play()
-- When the Tween has finished, the shop frame is hidden.
shopTween.Completed:Connect(function()
shopFrame.Visible = false
end)
end
end)
shopBtn.MouseButton1Click:Connect(function()
-- used to toggle the isOpen value to fire the Changed event.
if isOpen.Value == true then
isOpen.Value = false
elseif isOpen.Value == false then
isOpen.Value = true
end
end)
From Right
Demo: https://gyazo.com/c7b60e3fb5d46bb59b47bfc2a61d372e
Setup: Same thing as above
-- Declaring Variables
local ts = game:GetService("TweenService")
local mainUI = script.Parent.Parent
local shopFrame = mainUI.ShopFrame
local shopBtn = mainUI.ShopBtn
-- the isOpen value is used to tell if the shop is open or not.
local isOpen = shopBtn.isOpen
-- We get the initial shop position for opening the shop frame.
local initialShopPos = shopFrame.Position
--[[The position must be in an area where the player cannot see
Reccomended Area is on the right]]--
local closedShopPos = UDim2.new(2,0,0.5,0)
isOpen.Changed:Connect(function()
if isOpen.Value == true then
-- open
shopFrame.Visible = true
shopFrame.Position = closedShopPos
local shopTweenInfo = TweenInfo.new(0.15, Enum.EasingStyle.Linear)
local shopTweenGoal = {
Position = initialShopPos
}
local shopTween = ts:Create(shopFrame, shopTweenInfo, shopTweenGoal)
shopTween:Play()
elseif isOpen.Value == false then
-- close
local shopTweenInfo = TweenInfo.new(0.15, Enum.EasingStyle.Linear)
local shopTweenGoal = {
Position = closedShopPos
}
local shopTween = ts:Create(shopFrame, shopTweenInfo, shopTweenGoal)
shopTween:Play()
-- When the Tween has finished, the shop frame is hidden.
shopTween.Completed:Connect(function()
shopFrame.Visible = false
end)
end
end)
shopBtn.MouseButton1Click:Connect(function()
-- used to toggle the isOpen value to fire the Changed event.
if isOpen.Value == true then
isOpen.Value = false
elseif isOpen.Value == false then
isOpen.Value = true
end
end)
Example 2 - Indication
An example of indicating would be making a TextButton bigger when hovering your mouse over it.
Shrink
Demo: https://gyazo.com/7bd0f8d21e8096f8bdccd57c103d0e7b
Setup:
-- Declaring Variables
local ts = game:GetService("TweenService")
local shopBtn = script.Parent
local initialBtnSize = shopBtn.Size
-- The button size when the player hovers their mouse onto the button
local mouseEnterBtnSize = UDim2.new(0.175,0,0.1,0)
-- This event fires when the player hovers their mouse onto the button
shopBtn.MouseEnter:Connect(function()
local btnTweenInfo = TweenInfo.new(0.2, Enum.EasingStyle.Quad)
local btnTweenGoal = {
Size = mouseEnterBtnSize
}
local btnTween = ts:Create(shopBtn, btnTweenInfo, btnTweenGoal)
btnTween:Play()
end)
-- This event fires when the player hovers their mouse out of the button.
shopBtn.MouseLeave:Connect(function()
local btnTweenInfo = TweenInfo.new(0.2, Enum.EasingStyle.Quad)
local btnTweenGoal = {
Size = initialBtnSize
}
local btnTween = ts:Create(shopBtn, btnTweenInfo, btnTweenGoal)
btnTween:Play()
end)
Text Fade
Demo: https://gyazo.com/d5df9edbc7ef046aa7c9fe3015549049
Setup:
-- Declaring Variables
local ts = game:GetService("TweenService")
local shopBtn = script.Parent.Parent
local label = script.Parent
-- This event fires when the player hovers their mouse onto the button
shopBtn.MouseEnter:Connect(function()
local btnTweenInfo = TweenInfo.new(0.2, Enum.EasingStyle.Quad)
local btnTweenGoal = {
TextTransparency = 0.4
}
local btnTween = ts:Create(label, btnTweenInfo, btnTweenGoal)
btnTween:Play()
end)
-- This event fires when the player hovers their mouse out of the button.
shopBtn.MouseLeave:Connect(function()
local btnTweenInfo = TweenInfo.new(0.2, Enum.EasingStyle.Quad)
local btnTweenGoal = {
TextTransparency = 0
}
local btnTween = ts:Create(label, btnTweenInfo, btnTweenGoal)
btnTween:Play()
end)
Conclusion
That is all! I hope this helps you guys with your GUIs.
I might have some grammar mistakes, so please let me know!