GUI Button Animation: TweenService/UDim2

How to make animations with TweenScreening + UDim2

by CpzzQ

Author Avatar

To make a GUI Button Animation you will need to add a "LocalScript" to your Button!

Once You've added the LocalScript to you Button then we will start by adding this into the script**:**

local Button = script.Parent

After adding you Button local you will now add you**:** TweenService, TweenInfo, & TweenGoals***:***

local Button = script.Parent
local TweenService = game:GetService("TweenService")
local Info = TweenInfo.new(TIME, Enum.EasingStyle.YOUR_STYLE, Enum.EasingDirection.YOUR_DIRECTION, 0, false, 0)
local Goals = {UDim2.new(0, 200, 0, 150)}

TweenInfo Can be a bit confusing so heres a quick sample***:***

local TweenInfo = TweenInfo.new(
TIME,                                   -- How long should the Tweening last?
Enum.EasingStyle.YOUR_STYLE,            -- Styles have different animation in Tweening, Go to DevForums and search "EasingStyle" for more information!
Enum.EasingDirection.YOUR_DIRECTION,    -- EasingDirection, You'll get used to Tweening in later use but for now you'll need to just play around with it.
0,                                      -- REPEAT COUNT (0 = Only Tween Once)
false,                                  -- REVESE AFTER TWEEN? (true/false)
0                                       -- DELAY COUNT? (Seconds)
)

Once that is completed we now need to create the Tween so we can do "Tween**:Play**()" So to do this we first will be adding another local to the script!

local Button = script.Parent
local TweenService = game:GetService("TweenService")
local Info = TweenInfo.new(TIME, Enum.EasingStyle.YOUR_STYLE, Enum.EasingDirection.YOUR_DIRECTION, 0, false, 0)
local Goals = {UDim2.new(0, 200, 0, 150)}

local Tween = TweenService:Create(Button --[[Object]], Info --[[TweenInfo]], Goals --[[TweenGoal(s)]])

Now that we've added the locals we now can start begin to work on when to play of the Tween*!*

local Button = script.Parent
local TweenService = game:GetService("TweenService")
local Info = TweenInfo.new(TIME, Enum.EasingStyle.YOUR_STYLE, Enum.EasingDirection.YOUR_DIRECTION, 0, false, 0)
local Goals = {UDim2.new(0, 200, 0, 150)}

local Tween = TweenService:Create(Button --[[Object]], Info --[[TweenInfo]], Goals --[[TweenGoal(s)]])

Button.MouseEnter:Connect(function()
    Tween:Play
end)

You could just also just look up "TweenService" on YouTube but choose whatever you want! .............................................................................................................................................................................................

View in-game to comment, award, and more!