GUI Button moves when clicked, but moves back to position when moving mouse away

Help and Feedback Scripting Support
,
#1

I’m new to scripting, and I’ve been struggling to script a UI menu for my upcoming game.

I’ve been trying to make use of TweenService to make a UI button move to a certain position when clicked, alongside the code put in place to make the UI move to it’s desired position, there is a script that makes the size of the button increase when a player hovers their mouse over the button. My goal is to make the UI button remain at the enlarged size when a player hovers their cursor, and to move to a position, when players click on the button after it has moved to the new position, the button moves back to it’s original place, and goes back to it’s original size. When clicked, the other buttons turn invisible, once the sequence above is executed, the other 2 buttons become visible again. I’ll link some footage of the problem I’m currently facing. It would be greatly appreciated if someone could help show me how to perform the scripting work required to achieve this effect, thanks in advance! (Scripts are linked below)
Hover Script.lua (578 Bytes)
Click script.lua (179 Bytes)

2 Likes
#2

My guess is that MouseLeave and MouseEnter events are called everytime the mouse moves, not at every frame. So when you click the button and don’t move your mouse, the MouseLeave event is never triggered and nothing happens. However, when you move your mouse, it seems as if at this point your mouse has left the button.

Here are my suggestions:

  1. Have a Boolean value to check if the hover effect should be applied.
script.Parent.MouseLeave:Connect(function()
	if (InModeSelection) then
		script.Parent:TweenPosition(UDim2.new(0.388, 0,0.189, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quad, .1, true)
		script.Parent:TweenSize(UDim2.new(0.223, 0,0.621, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quad, .1, true)
	end
end)

script.Parent.MouseButton1Click:Connect(function()
	InModeSelection = true
	script.Parent:TweenPosition(UDim2.new(0.015, 0,0.154, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Linear, .6, true)
end)
  1. Store the connections and disconnect when we don’t need them anymore.
local leaveConnection = script.Parent.MouseLeave:Connect(function()
	script.Parent:TweenPosition(UDim2.new(0.388, 0,0.189, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quad, .1, true)
	script.Parent:TweenSize(UDim2.new(0.223, 0,0.621, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quad, .1, true)
end)

local enterConnectionn = script.Parent.MouseEnter:Connect(function()
	script.Parent:TweenPosition(UDim2.new(0.374, 0,0.154, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quad, .1, true)
	script.Parent:TweenSize(UDim2.new(0.248, 0,0.691, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quad, .1, true)
end)

script.Parent.MouseButton1Click:Connect(function()
	leaveConnection:Disconnect()
	enterConnectionn:Disconnect()
	script.Parent:TweenPosition(UDim2.new(0.015, 0,0.154, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Linear, .6, true)
end)

Running connection:Disconnect() will prevent these events from firing again until you connect them again.

I hope this was helpful.

#3

Hi there, thanks for the reply! As mentioned earlier, I’m new to scripting, could you maybe inform me where I’m supposed to place these scripts :sweat_smile: Thanks again!