UI Size Animation

Help and Feedback Scripting Support
#1

Hi

I was wondering how I could make A UI button grow slightly when they hover over it and shrink when they stop hovering over it. This should be a script which can work on buttons of all sizes. This should also scale from the middle

3 Likes
#2

Alright. I’m going to quickly come up with a script and then explain it.

#3

Alright! So I put together this nice script that sizes the button like you said. Here is the game file:
SizeButton.rbxl (48.5 KB)
.
And if your wondering how I made the thing size from the middle I set the anchor point to 0.5, 0.5.

So here is the code behind this.

local IsHover = false

script.Parent.MouseEnter:Connect(function(Hover)
	IsHover = true
end)

script.Parent.MouseLeave:Connect(function(Hover)
	IsHover = false
end)

while wait() do
	if IsHover then
		script.Parent:TweenSize(UDim2.new(0, 572, 0, 58), Enum.EasingDirection.InOut, Enum.EasingStyle.Linear, 0.1, true)
	else
		script.Parent:TweenSize(UDim2.new(0, 561, 0, 50), Enum.EasingDirection.InOut, Enum.EasingStyle.Linear, 0.1, true)
	end
end

This simply uses a Boolean variable and whenever your hovering over the button it sets it to true. And meanwhile there is a loop going on in the background which checks if the Boolean is true or not. If it is true then it sizes it. Sorry if my explanation wasn’t clear enough but the code should tell a lot. And for the sizing transition I used :TweenSize()

1 Like
#4

I would put a UIScale as a child of that button. Then have mouse listeners. Make sure to edit the TweenInfo

local TweenService = game:GetService("TweenService")

local Button = script.Parent
local UIScale = Button:WaitForChild("UIScale")

Button.MouseEnter:Connect(function()
   TweenService:Create(UIScale, TweenInfo.new(0.3), { Scale = 1.1 }):Play()
end)

Button.MouseLeave:Connect(function()
   TweenService:Create(UIScale, TweenInfo.new(0.3), { Scale = 1 }):Play()
end)

Read below better explanation and more detailed!
vvvv

2 Likes
#5

Well, you’ll first need a function that hooks up all buttons with a .MouseEnter & .MouseLeave event. To ensure your UI is scaled from the center, you’ll also need to set your UI’s anchor points to .5,.5.

After that, I would suggest adding a UIScale object into each button you’d like to be scaled. When the .MouseEnter event is triggered, you would set the ScaleFactor (Scale) of the UIScale element below one, something like 0.95 or less. When the .MouseLeave event is triggered just set the ScaleFactor (Scale) to the original value of 1.

-- Example of a one-button solution
local TweenService = game:GetService("TweenService") -- Used to create tweens

local GuiButton =  -- Set this to the path of the button
local ButtonUIScaleObject =  -- Set this to the path of the UIScale instance

local Shrunken_Scale = 0.95 -- Change to your desired amount [0, 1] (amount can surpass 1)
local Origional_Scale = 1 -- -- ^^^

local EffectTweenInfo = TweenInfo.new(0.5) -- Use the default properties, except the duration

GuiButton.MouseEnter:Connect(function()
     print("Mouse has entered button")
     local ShrunkenTween = TweenService:Create(ButtonUIScaleObject, EffectTweenInfo, {Scale = Shrunken_Scale}
     ShrunkenTween:Play()

     ShrunkenTween.Completed:Connect(function()
          ShrunkenTween:Destroy()
     end)
end)

GuiButton.MouseLeave:Connect(function()
     print("Mouse has been removed from button")
     local RevertedTween = TweenService:Create(ButtonUIScaleObject, EffectTweenInfo, {Scale = Origional_Scale}
     RevertedTween:Play()

     RevertedTween.Completed:Connect(function()
          RevertedTween:Destroy()
     end)
end)

Prompts to @TheDCraft for suggesting the same method

2 Likes
#6

Use TweenService and simply tween the button’s size when the mouse enters and leaves the button.

local TweenService	=	game:GetService("TweenService")
local Button		=	script.Parent:WaitForChild("Button") -- I assume that the local script and the button are parented to the same instance.

Button.MouseEnter:Connect(function()
	TweenService:Create(
		Button,
		Info,
		{
			Size = UDim2.new(1.25,0,1.25,0)
		}
	):Play()
end)

Button.MouseLeave:Connect(function()
	TweenService:Create(
		Button,
		Info,
		{
			Size = UDim2.new(1,0,1,0)
		}
	):Play()
end)

Oh, and just like @desinied said, make sure that the button’s AnchorPoint is (0.5,0.5) if you want the button to expand from the middle.

1 Like
#7

Thanks for all the help everyone!

2 Likes
#8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.