UI buttons scale down if hovering too quick

I want to make a moduleScript that tweens every button in the game (mouseEnter, mouseLeave, etc)

The problem is that if I hover over the buttons too quick, then they will scale down because the mouseEnter event hasn’t finished yet (it hasn’t reached the x1.1 goal) and I already divide the scale of the button by 1.1

I know that you don’t need to divide it by 1.1, but rather scale it to the default size, I just can’t figure out on how to do it in a module script

The video below shows what I’m talking about:

Here is the script:

local tweens = {}

local TS = game:GetService("TweenService")

local hoverModifier = 1.1

local tableOfEasings = {
	
	Enum.EasingStyle.Linear, -- 1 --
	Enum.EasingStyle.Sine, -- 2 --
	Enum.EasingStyle.Back, -- 3 --
	Enum.EasingStyle.Quad, -- 4 --
	Enum.EasingStyle.Quart, -- 5 --
	Enum.EasingStyle.Quint, -- 6 --
	Enum.EasingStyle.Bounce, -- 7 --
	Enum.EasingStyle.Elastic, -- 8 --
	Enum.EasingStyle.Exponential, -- 9 --
	Enum.EasingStyle.Circular, -- 10 --
	Enum.EasingStyle.Cubic -- 11 --
	
}

function tweens.Hover(plr)
	
	local allButtons = plr.PlayerGui:WaitForChild("ScreenGui"):GetChildren()
	
	for _, button in pairs(allButtons) do
		if button:IsA("TextButton") then
			
			button.MouseEnter:Connect(function()
				
				local goalHover = {}
				goalHover.Size = UDim2.new(button.Size.X.Scale * hoverModifier, 0, button.Size.Y.Scale * hoverModifier, 0)
				
				local TI = TweenInfo.new(0.1, tableOfEasings[6], Enum.EasingDirection.Out, 0, false)
				
				local tween = TS:Create(button, TI, goalHover)
				tween:Play()
				
			end)
			
		end
	end
end

function tweens.Leave(plr)

	local allButtons = plr.PlayerGui:WaitForChild("ScreenGui"):GetChildren()

	for _, button in pairs(allButtons) do
		if button:IsA("TextButton") then
			
			button.MouseLeave:Connect(function()
				
				local goalHover = {}
				goalHover.Size = UDim2.new(button.Size.X.Scale / hoverModifier, 0, button.Size.Y.Scale / hoverModifier, 0)

				local TI = TweenInfo.new(0.1, tableOfEasings[6], Enum.EasingDirection.Out, 0, false)

				local tween = TS:Create(button, TI, goalHover)
				tween:Play()

			end)
		
		end
	end
end

return tweens

Typically, UI designers tend to create an invisible “main” frame where the button will take place, and inside it the actual renderable button with a size of {1, 0}, {1, 0}. With this, you can tween the size of the button render instead of the main frame.

1 Like

So do you mean that I need to parent every button to its frame? Then I’ll need to tween the button size? I’m going to try it right now
edit: thank you, it worked

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