GUI Slight Movement while Hovering

Help and Feedback Scripting Support
,
#1

Hi, I’m trying to make it so whenever the player hovers their mouse over a GUI, the GUI slightly follows their mouse. Then when their mouse leaves the GUI, the GUI goes back to the original position. So I want the GUI to slightly follow the cursor position while the mouse is hovering it.

An example of what I’m trying to achieve would be using the Apple iPad and their mouse and whenever the mouse hovers an app, the app kind of follows it. (Obviously I don’t want the mouse disappearing OR to be moved by the GUI). I don’t really know how to upload a video so I think an example is on Youtube.

I’ve tried using the following code solution but it didn’t work, any solutions?

Local Script under the button

local gui = script.Parent

-- create a function to move the GUI slightly towards the mouse cursor
local function moveGuiTowardsCursor()
	local mousePosition = gui.Parent:GetMouseLocation()
	local guiPosition = gui.Position
	local delta = mousePosition - guiPosition
	gui:TweenPosition(guiPosition + delta / 10, "Out", "Linear", 0.1, true)
end

-- create a function to reset the GUI's position
local function resetGuiPosition()
	gui:TweenPosition(gui.Position - gui.Position, "Out", "Linear", 0.1, true)
end

-- bind the moveGuiTowardsCursor function to the MouseEnter event
gui.MouseEnter:Connect(moveGuiTowardsCursor)

-- bind the resetGuiPosition function to the MouseLeave event
gui.MouseLeave:Connect(resetGuiPosition)
#2

Well how does he get out of the gui then? i dont understand

#3

So I want the GUI to slightly follow the user’s mouse position WHILE the mouse is hovering the GUI. Then when the mouse’s hovering leaves the GUI, the GUI resets back to the normal position. All using tween service to make it smooth the whole time. This has nothing to do with mouse click or something like that.

Edit: Sorry let me rephrase it. So the GUI slightly follows the mouse cursor while the mouse cursor is hovering it. And the GUI’s size would get slightly bigger, so it shows that the cursor is hovering it. I just want this to be a cool little feature.

#4

Local Script under the ScreenGui
local button = script.Parent:WaitForChild(“Button”)

– create a function to reset the GUI’s position
local function resetGuiPosition()
button:TweenPosition(button.Position - button.Position, “Out”, “Linear”, 0.1, true)
end

– bind the resetGuiPosition function to the MouseLeave event
button.MouseLeave:Connect(resetGuiPosition)

Thanks for your help!

What you can do is create a local script under the button, and in that script, use TweenPosition with Out as the easing and Linear as the style. Then, you want to divide the delta (the difference between the position of the mouse and the position of the GUI) by 10. Why? Because dividing by ten will ensure that it goes slow enough. Then, you want to bind it to the MouseEnter event of the GUI.
What you also want to do is use another TweenPosition with the same options, this time with the delta (the difference between the position of the GUI and the position of itself) and bind it to the MouseLeave event of the GUI. This will ensure that it goes back to its original position.

1 Like