Tween buttons not resetting position and size properly when moving mouse

[deathcharge415 (Ne3u1imity)]

I am attempting to create buttons that enlarge when hovered and also push other buttons out of the way when hovered. It was all working perfectly until I decided to move my mouse quickly over them to see what happens.

I believe the issue is that the currently playing tweens aren’t stopping when a new one overrides it, but setting overrides to true didn’t seem to do anything.
Or, on the other hand, it may be related to MouseEnter and MouseLeave.

Here is my code if you’d like to take a look:

local TweenService = game:GetService("TweenService")

-- Function to handle button hover
local function ButtonHover(button)
	local originalSize = button.Size
	local enlargedSize = UDim2.new(originalSize.X.Scale * 1.05, 0, originalSize.Y.Scale * 1.05, 0)

	local tweenInfo = TweenInfo.new(0.2, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
	local sizeTween = TweenService:Create(button, tweenInfo, {Size = enlargedSize}, true)

	sizeTween:Play()

	-- Move the buttons above the hovered button
	local currentY = button.Position.Y.Scale
	for _, siblingButton in ipairs(button.Parent:GetChildren()) do
		if siblingButton:IsA("GuiButton") and siblingButton ~= button then
			local siblingY = siblingButton.Position.Y.Scale
			local newY = siblingY
			if siblingY < currentY then
				newY = siblingY - 0.02
			else
				newY = siblingY + 0.02
			end

			local positionTween = TweenService:Create(siblingButton, tweenInfo, {Position = UDim2.new(siblingButton.Position.X.Scale, 0, newY, 0)}, true)
			positionTween:Play()
		end
	end
end

-- Function to handle button unhover
local function ButtonUnhover(button)
	local enlargedSize = button.Size
	local originalSize = UDim2.new(enlargedSize.X.Scale / 1.05, 0, enlargedSize.Y.Scale / 1.05, 0)

	local tweenInfo = TweenInfo.new(0.2, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
	local sizeTween = TweenService:Create(button, tweenInfo, {Size = originalSize}, true)

	sizeTween:Play()

	-- Reset positions of all buttons
	local currentY = button.Position.Y.Scale
	for _, siblingButton in ipairs(button.Parent:GetChildren()) do
		if siblingButton:IsA("GuiButton") then
			local siblingY = siblingButton.Position.Y.Scale
			local newY = siblingY
			if siblingY < currentY then
				newY = siblingY + 0.02
			else
				newY = siblingY - 0.02
			end

			local positionTween = TweenService:Create(siblingButton, tweenInfo, {Position = UDim2.new(siblingButton.Position.X.Scale, 0, newY, 0)}, true)
			positionTween:Play()
		end
	end

	-- Reset button Y position as well
	local originalY = button.Position.Y.Scale
	local buttonPositionTween = TweenService:Create(button, tweenInfo, {Position = UDim2.new(button.Position.X.Scale, 0, originalY, 0)}, true)
	buttonPositionTween:Play()
end

local buttons = {
	script.Parent.PlayButton,
	script.Parent.ShopButton,
	script.Parent.CreditsButton,
	script.Parent.SettingsButton
}

for _, button in ipairs(buttons) do
	button.MouseEnter:Connect(function()
		ButtonHover(button)
	end)

	button.MouseLeave:Connect(function()
		ButtonUnhover(button)
	end)
end

And here is a .rbxl file of the place so you don’t have to set everything up.
buttons-test.rbxl (45.9 KB)

All help is appreciated. Thank you!

[GL0XBE (globe)]

The reason this happening is because your doing math included in the size, u should have just one certain UDIM2 value and not have it multiplied or divided because as you already guessed. If hovered multiple times it will multiply or divide multiple times causing it to get bugged out

[astraIboy (The Batman)]

You do know that a UIListLayout exists right and it automatically does scaling and positioning…?

[deathcharge415 (Ne3u1imity)]

Yes, but I don’t think I can change the sizes and positions of the buttons individually.

[astraIboy (The Batman)]

You can change the sizes individually, but just not the positions

[deathcharge415 (Ne3u1imity)]

I tried it out, but didn’t receive the effect I wanted. But I’ll be sure to use it in the future, now that I know you don’t have to restrict a size like in UiGridLayout.

[deathcharge415 (Ne3u1imity)]

I’ve got the sizing to work using the UDim2 value, but do you have any idea on how I could apply this with the positioning? I have no idea how because the buttons’ position won’t end up the same for each one like the size does.

[GL0XBE (globe)]

I’m not sure how u would do the pos’s. You could assign each button the position in the table itself. But that’s not the most efficient