Button hovering problem

Help and Feedback Scripting Support
, , ,
#1

Hey guys, i wanna make a team choosing system with a special ui, you can choose between two teams and the frame + Viewport will get bigger, for now i just focused on the ui since changing team is pretty easy.

I encountered an issue that is, whenever i switch hovering between both buttons, the size wont change, i have to leave the buttons then go back for them to work, heres an example:

I got 2 local scripts in both buttons, that have approximatively the same codes:

Code for the Right button:

local viewport = script.Parent.ViewportFrame
local dummy = viewport.WorldModel.R6
local dummyF = viewport.WorldModel.R6F

local TweenService = game:GetService("TweenService")

local button = script.Parent

local button2 = script.Parent.Parent.OG

local animation = dummy.Humanoid:LoadAnimation(script.Idle.Animation)
local animationF = dummyF.Humanoid:LoadAnimation(script.Idle.AnimationF)

------------------------------------------------------------- button 1 tween

-- save original size/position for later if needed
local originalSize = button.Size
local originalPosition = button.Position

-- target size: wider on X
local newSize = UDim2.new(button.Size.X.Scale + 0.25, button.Size.X.Offset + 20, button.Size.Y.Scale, button.Size.Y.Offset)

-- shift position to the left so expansion looks like it's only to the left
local shiftX = (newSize.X.Offset - button.Size.X.Offset) / 2
local newPosition = UDim2.new(button.Position.X.Scale, button.Position.X.Offset - shiftX, button.Position.Y.Scale, button.Position.Y.Offset)

-- create tween info
local tweenInfo = TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)

-- create tweens
local sizeTween = TweenService:Create(button, tweenInfo, { Size = newSize })
local positionTween = TweenService:Create(button, tweenInfo, { Position = newPosition })

--------------------------------------------------------------Button 2 tween (smaller)
local originalSize2 = button2.Size
local originalPosition2 = button2.Position

-- target size: wider on X
local newSize2 = UDim2.new(button2.Size.X.Scale - 0.1, button2.Size.X.Offset - 20, button2.Size.Y.Scale, button2.Size.Y.Offset)

-- shift position to the left so expansion looks like it's only to the left
local shiftX2 = (newSize2.X.Offset + button2.Size.X.Offset ) * 6
local newPosition2 = UDim2.new(button2.Position.X.Scale, button2.Position.X.Offset + shiftX2, button2.Position.Y.Scale, button2.Position.Y.Offset)

-- create tween info
local tweenInfo2 = TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)

-- create tweens
local sizeTween2 = TweenService:Create(button2, tweenInfo2, { Size = newSize2 })
local positionTween2 = TweenService:Create(button2, tweenInfo2, { Position = newPosition2 })

-------------------------------------------------------------- ViewportFrame tween
local originalVPSize = viewport.Size
local originalVPPosition = viewport.Position

-- make viewport slightly larger
local newVPSize = UDim2.new(viewport.Size.X.Scale + 0.2, viewport.Size.X.Offset + 3 , viewport.Size.Y.Scale + 0.2, viewport.Size.Y.Offset + 10)

-- shift it left to match the vibe (optional: tweak this based on layout)
local shiftVPX = (newVPSize.X.Offset - viewport.Size.X.Offset) / 2
local shiftVPY = (newVPSize.Y.Offset - viewport.Size.Y.Offset) / 2
local newVPPosition = UDim2.new(viewport.Position.X.Scale, viewport.Position.X.Offset - shiftVPX, viewport.Position.Y.Scale, viewport.Position.Y.Offset - shiftVPY)

local vpTweenSize = TweenService:Create(viewport, tweenInfo, { Size = newVPSize })
local vpTweenPosition = TweenService:Create(viewport, tweenInfo, { Position = newVPPosition })


---------------------------------------------------------------------------------


animation:Play()
animationF:Play()

button.MouseEnter:Connect(function()
	if animationF.IsPlaying == true and animation.IsPlaying == true then
		animation:Stop()
		animationF:Stop()
		sizeTween:Play()
		positionTween:Play()
		sizeTween2:Play()
		positionTween2:Play()
		button.ZIndex = 1
		button2.ZIndex = 0
		
		vpTweenSize:Play()
		vpTweenPosition:Play()
	end
end)


button.MouseLeave:Connect(function()
	-- Restore animations
	animation:Play()
	animationF:Play()

	-- Restore Button 1
	TweenService:Create(button, tweenInfo, { Size = originalSize }):Play()
	TweenService:Create(button, tweenInfo, { Position = originalPosition }):Play()

	-- Restore Button 2
	TweenService:Create(button2, tweenInfo, { Size = originalSize2 }):Play()
	TweenService:Create(button2, tweenInfo, { Position = originalPosition2 }):Play()

	-- Restore Viewport
	TweenService:Create(viewport, tweenInfo, { Size = originalVPSize }):Play()
	TweenService:Create(viewport, tweenInfo, { Position = originalVPPosition }):Play()
	button.ZIndex = 0
	button2.ZIndex = 0
end)

code for the Left button:

local viewport = script.Parent.ViewportFrame
local dummy = viewport.WorldModel.R6
local dummyF = viewport.WorldModel.R6F

local TweenService = game:GetService("TweenService")

local button = script.Parent

local button2 = script.Parent.Parent.A47

local animation = dummy.Humanoid:LoadAnimation(script.Idle.Animation)
local animationF = dummyF.Humanoid:LoadAnimation(script.Idle.AnimationF)

------------------------------------------------------------- button 1 tween


local originalSize = button.Size
local originalPosition = button.Position


local newSize = UDim2.new(button.Size.X.Scale + 0.25, button.Size.X.Offset + 20, button.Size.Y.Scale, button.Size.Y.Offset)


local shiftX = (newSize.X.Offset - button.Size.X.Offset) * 2
local newPosition = UDim2.new(button.Position.X.Scale, button.Position.X.Offset + shiftX, button.Position.Y.Scale, button.Position.Y.Offset)


local tweenInfo = TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)


local sizeTween = TweenService:Create(button, tweenInfo, { Size = newSize })
local positionTween = TweenService:Create(button, tweenInfo, { Position = newPosition })

--------------------------------------------------------------Button 2 tween (smaller)
local originalSize2 = button2.Size
local originalPosition2 = button2.Position


local newSize2 = UDim2.new(button2.Size.X.Scale - 0.15, button2.Size.X.Offset + 40, button2.Size.Y.Scale, button2.Size.Y.Offset)


local shiftX2 = (newSize2.X.Offset + button2.Size.X.Offset ) * 3
local newPosition2 = UDim2.new(button2.Position.X.Scale, button2.Position.X.Offset + shiftX2, button2.Position.Y.Scale, button2.Position.Y.Offset)


local tweenInfo2 = TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)

local sizeTween2 = TweenService:Create(button2, tweenInfo2, { Size = newSize2 })
local positionTween2 = TweenService:Create(button2, tweenInfo2, { Position = newPosition2 })

-------------------------------------------------------------- ViewportFrame tween
local originalVPSize = viewport.Size
local originalVPPosition = viewport.Position

local newVPSize = UDim2.new(viewport.Size.X.Scale + 0.2, viewport.Size.X.Offset + 3 , viewport.Size.Y.Scale + 0.2, viewport.Size.Y.Offset + 10)

local shiftVPX = (newVPSize.X.Offset - viewport.Size.X.Offset) / 2
local shiftVPY = (newVPSize.Y.Offset - viewport.Size.Y.Offset) / 2
local newVPPosition = UDim2.new(viewport.Position.X.Scale, viewport.Position.X.Offset - shiftVPX, viewport.Position.Y.Scale, viewport.Position.Y.Offset - shiftVPY)

local vpTweenSize = TweenService:Create(viewport, tweenInfo, { Size = newVPSize })
local vpTweenPosition = TweenService:Create(viewport, tweenInfo, { Position = newVPPosition })


---------------------------------------------------------------------------------


animation:Play()
animationF:Play()

button.MouseEnter:Connect(function()
	if animationF.IsPlaying == true and animation.IsPlaying == true then
		animation:Stop()
		animationF:Stop()
		sizeTween:Play()
		positionTween:Play()
		sizeTween2:Play()
		positionTween2:Play()
		button.ZIndex = 1
		button2.ZIndex = 0

		vpTweenSize:Play()
		vpTweenPosition:Play()
	end
end)

I have already tried “mixing” both script but it only made it worse, any help would be nice :smiley:

2 Likes
#2

Did you forget about left code MouseLeave func?

1 Like
#3

yes i forgot to type it, the result is the same :sweat_smile:

#4

Can you please show to me gui structure in explorer with these scripts?

#5

image

OG button is the left one and A47 is the right one

1 Like
#6

I think what happens is that when you move the cursor to the other button, the MouseEntered events will fire, and then the MouseLeave events will, playing the hover animations first and then the restore ones. One solution is to check if the button is hovered. You can use attributes:

button.MouseEnter:Connect(function()
	if animationF.IsPlaying == true and animation.IsPlaying == true then
		button:SetAttribute("Hover", true)

		animation:Stop()
		animationF:Stop()
		sizeTween:Play()
		positionTween:Play()
		sizeTween2:Play()
		positionTween2:Play()
		button.ZIndex = 1
		button2.ZIndex = 0
		
		vpTweenSize:Play()
		vpTweenPosition:Play()
	end
end)

button.MouseLeave:Connect(function()
	button:SetAttribute("Hover", false)

	-- Restore animations
	animation:Play()
	animationF:Play()

	-- Restore Button 1
	TweenService:Create(button, tweenInfo, { Size = originalSize }):Play()
	TweenService:Create(button, tweenInfo, { Position = originalPosition }):Play()

	-- Restore Button 2

	if not button2:GetAttribute("Hover") then
		TweenService:Create(button2, tweenInfo, { Size = originalSize2 }):Play()
		TweenService:Create(button2, tweenInfo, { Position = originalPosition2 }):Play()
	end

	-- Restore Viewport
	TweenService:Create(viewport, tweenInfo, { Size = originalVPSize }):Play()
	TweenService:Create(viewport, tweenInfo, { Position = originalVPPosition }):Play()
	button.ZIndex = 0
	button2.ZIndex = 0
end)

I only made the script for the right button, remember to apply it to the other one too!

#7

hey! ur script is kinda working , its doing smth weird for the left button tho :

#8

Hey, can you show the code for the left button? In case there’s a wrong checking

#9

of course!

local viewport = script.Parent.ViewportFrame
local dummy = viewport.WorldModel.R6
local dummyF = viewport.WorldModel.R6F

local TweenService = game:GetService("TweenService")

local button = script.Parent

local button2 = script.Parent.Parent.A47

local animation = dummy.Humanoid:LoadAnimation(script.Idle.Animation)
local animationF = dummyF.Humanoid:LoadAnimation(script.Idle.AnimationF)

------------------------------------------------------------- button 1 tween


local originalSize = button.Size
local originalPosition = button.Position


local newSize = UDim2.new(button.Size.X.Scale + 0.25, button.Size.X.Offset + 20, button.Size.Y.Scale, button.Size.Y.Offset)


local shiftX = (newSize.X.Offset - button.Size.X.Offset) * 2
local newPosition = UDim2.new(button.Position.X.Scale, button.Position.X.Offset + shiftX, button.Position.Y.Scale, button.Position.Y.Offset)


local tweenInfo = TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)


local sizeTween = TweenService:Create(button, tweenInfo, { Size = newSize })
local positionTween = TweenService:Create(button, tweenInfo, { Position = newPosition })

--------------------------------------------------------------Button 2 tween (smaller)
local originalSize2 = button2.Size
local originalPosition2 = button2.Position


local newSize2 = UDim2.new(button2.Size.X.Scale - 0.15, button2.Size.X.Offset + 40, button2.Size.Y.Scale, button2.Size.Y.Offset)


local shiftX2 = (newSize2.X.Offset + button2.Size.X.Offset ) * 3
local newPosition2 = UDim2.new(button2.Position.X.Scale, button2.Position.X.Offset + shiftX2, button2.Position.Y.Scale, button2.Position.Y.Offset)


local tweenInfo2 = TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)

local sizeTween2 = TweenService:Create(button2, tweenInfo2, { Size = newSize2 })
local positionTween2 = TweenService:Create(button2, tweenInfo2, { Position = newPosition2 })

-------------------------------------------------------------- ViewportFrame tween
local originalVPSize = viewport.Size
local originalVPPosition = viewport.Position

local newVPSize = UDim2.new(viewport.Size.X.Scale + 0.2, viewport.Size.X.Offset + 3 , viewport.Size.Y.Scale + 0.2, viewport.Size.Y.Offset + 10)

local shiftVPX = (newVPSize.X.Offset - viewport.Size.X.Offset) / 2
local shiftVPY = (newVPSize.Y.Offset - viewport.Size.Y.Offset) / 2
local newVPPosition = UDim2.new(viewport.Position.X.Scale, viewport.Position.X.Offset - shiftVPX, viewport.Position.Y.Scale, viewport.Position.Y.Offset - shiftVPY)

local vpTweenSize = TweenService:Create(viewport, tweenInfo, { Size = newVPSize })
local vpTweenPosition = TweenService:Create(viewport, tweenInfo, { Position = newVPPosition })


---------------------------------------------------------------------------------


animation:Play()
animationF:Play()

button.MouseEnter:Connect(function()
	if animationF.IsPlaying == true and animation.IsPlaying == true then
		button:SetAttribute("Hover", true)

		animation:Stop()
		animationF:Stop()
		sizeTween:Play()
		positionTween:Play()
		sizeTween2:Play()
		positionTween2:Play()
		button.ZIndex = 1
		button2.ZIndex = 0

		vpTweenSize:Play()
		vpTweenPosition:Play()
	end
end)

button.MouseLeave:Connect(function()
	button:SetAttribute("Hover", false)

	-- Restore animations
	animation:Play()
	animationF:Play()

	-- Restore Button 1
	TweenService:Create(button, tweenInfo, { Size = originalSize }):Play()
	TweenService:Create(button, tweenInfo, { Position = originalPosition }):Play()

	-- Restore Button 2

	if not button2:GetAttribute("Hover") then
		TweenService:Create(button2, tweenInfo, { Size = originalSize2 }):Play()
		TweenService:Create(button2, tweenInfo, { Position = originalPosition2 }):Play()
	end

	-- Restore Viewport
	TweenService:Create(viewport, tweenInfo, { Size = originalVPSize }):Play()
	TweenService:Create(viewport, tweenInfo, { Position = originalVPPosition }):Play()
	button.ZIndex = 0
	button2.ZIndex = 0
end)

I copied and paste from the right button script, i did a mistake maybe :sweat_smile:

#10

Hmmm… I had to replicate the entire thing, and I think I got the solution!

button.MouseLeave:Connect(function()
	button:SetAttribute("Hover", false)

	-- Restore animations
	animation:Play()
	animationF:Play()

	if not button2:GetAttribute("Hover") then
		-- Restore Button 1
		TweenService:Create(button, tweenInfo, { Size = originalSize }):Play()
		TweenService:Create(button, tweenInfo, { Position = originalPosition }):Play()

		-- Restore Button 2
		TweenService:Create(button2, tweenInfo, { Size = originalSize2 }):Play()
		TweenService:Create(button2, tweenInfo, { Position = originalPosition2 }):Play()
	end

	-- Restore Viewport
	TweenService:Create(viewport, tweenInfo, { Size = originalVPSize }):Play()
	TweenService:Create(viewport, tweenInfo, { Position = originalVPPosition }):Play()
	button.ZIndex = 0
	button2.ZIndex = 0
end)

Just moved the condition to both tweens (in both scripts), and it should work

Also, I would prefer to put all that into a single function with the button as a parameter instead of copying and pasting all of it (if it’s too similar), and then for both buttons call the function passing the button as a parameter, since they’re nearly identical.

2 Likes
#11

sorry for the late answer but this work!! thank you so much

1 Like