MouseEnter and MouseLeave not working properly

Help and Feedback Scripting Support
,
#1

I’m testing some dynamic UI and came across a bug where when the mouse enters the UI, it expands the UI like intended but sometimes when my mouse leaves the UI, the size stays the same.

For the code it’s just checking if the mouse enters or mouse leaves

#3

May you display the code? Please?

#4

I don’t get why you’d need it. I already explains above that the code just checks if the mouse entered or left and then changes the size of the ui.

button.MouseEnter:Connect(function()
	-- Tween UI Size to expanded form
end)

button.MouseLeave:Connect(function()
	-- Tween UI Size to normal
end)
#5

Hmmm… did you use the TweenService or UIObject:TweenSize()? Cause in TweenService it suppose to override when an existing tween got another tween on the same object and property.

#6

Multibillionaire company still hasn’t fixed this; the MouseEnter and MouseLeave events simply are faulty and don’t work properly. There are some modules that replace it.

1 Like
#7

Hmm… It’s not really faulty I got my UI some hover effects with heavy configuration but it still animates fine.

1 Like
#8

I tried your concept and nothing’s wrong for me…
(I used TweenService as it’s good for overriding)

#9

Oh I didn’t know there was a difference between TweenService and UIObject:TweenSize(). Could you explain how you managed to make it work?

#10

Basically get the Service and the TweenInfo

local tweenService = game:GetService("TweenService")
local info = TweenInfo.new(
        .5, --duration
        Enum.EasingStyle.Exponential,
        Enum.EasingDirection.Out,
        0, --repeat count
        false, --reverse to it's original state
        0 --delay (seconds)
)

and also get the buttons and animate it!

local frame = script.Parent

frame.shop.MouseEnter:Connect(function()
	tweenService:Create(frame.shop, info, {Size = UDim2.fromOffset(274, 114)}):Play()
	tweenService:Create(frame.settings, info, {Size = UDim2.fromOffset(274, 47)}):Play()
end)

frame.settings.MouseEnter:Connect(function()
	tweenService:Create(frame.shop, info, {Size = UDim2.fromOffset(274, 57)}):Play()
	tweenService:Create(frame.settings, info, {Size = UDim2.fromOffset(274, 80)}):Play()
end)

frame.shop.InputEnded:Connect(function()
	tweenService:Create(frame.shop, info, {Size = UDim2.fromOffset(274, 57)}):Play()
	tweenService:Create(frame.settings, info, {Size = UDim2.fromOffset(274, 47)}):Play()
end)

frame.settings.InputEnded:Connect(function()
	tweenService:Create(frame.shop, info, {Size = UDim2.fromOffset(274, 57)}):Play()
	tweenService:Create(frame.settings, info, {Size = UDim2.fromOffset(274, 47)}):Play()
end)

so yeah if you want to create a new Tween just do

tweenService:Create(
     instance,
     info, --tweeninfo
     {--properties
          Size = UDim.new(1, 0, 1, 0),
          BackgroundTransparency = .5
          Position = UDim.new(.5, 0, .5, 0)
     }:Play() --ofc play it!
)

TweenService is more customizable since it has EasingStyle and EasingDirection and also applicable to most of the properties.

[idk how to explain so i just shared the code and you can ask]

3 Likes
#11

In may be dependant on device FPS.

#12

Unfortunately MouseLeave is generally quite unreliable, so the approach I often take with UI elements like these is to check the mouse position every frame (binded to RenderStepped) and end the “expanded” animation if the mouse ever reaches a position outside the UI element.

textButton.MouseEntered:Connect(function()
    -- mouse entered code
    local mouseListenerConnection
    mouseListenerConnection = RunService.RenderStepped:Connect(function()
        if --[[mouse is out of bounds]] then
            -- mouse left code
            mouseListenerConnection:Disconnect()
        end
    end)
end)

This approach definitely adds some extra overhead, but realistically it should only ever have one “watcher” running at a time. It should also be noted that you can just connect to RunService.RenderStepped directly without using that method, I just find it more convenient.

Update: I went back and changed BindToRenderStep to the more traditional event connection because BindToRenderStep could cause problems if you don’t set a unique name.

#13

enable override tween, that might fix the issue

#14

Both types of tweens do not depend on FPS.

#15

So I tried your method but for me it didn’t seem to work as well as yours did…

Here’s the code:

local tweenService = game:GetService("TweenService")

local info = TweenInfo.new(
	.5, --duration
	Enum.EasingStyle.Exponential,
	Enum.EasingDirection.Out,
	0, --repeat count
	false, --reverse to it's original state
	0 --delay (seconds)
)

local frame = script.Parent

frame.Shop.Size = UDim2.new(0, 343, 0, 76)
frame.Settings.Size = UDim2.new(0, 343, 0, 76)

frame.Shop.MouseEnter:Connect(function()
	tweenService:Create(frame.Shop, info, {Size = UDim2.fromOffset(343, 125)}):Play()
	tweenService:Create(frame.Settings, info, {Size = UDim2.fromOffset(343, 76)}):Play()
end)

frame.Settings.MouseEnter:Connect(function()
	tweenService:Create(frame.Shop, info, {Size = UDim2.fromOffset(343, 76)}):Play()
	tweenService:Create(frame.Settings, info, {Size = UDim2.fromOffset(343, 125)}):Play()
end)

frame.Shop.InputEnded:Connect(function()
	tweenService:Create(frame.Shop, info, {Size = UDim2.fromOffset(343, 76)}):Play()
	tweenService:Create(frame.Settings, info, {Size = UDim2.fromOffset(343, 76)}):Play()
end)

frame.Settings.InputEnded:Connect(function()
	tweenService:Create(frame.Shop, info, {Size = UDim2.fromOffset(343, 76)}):Play()
	tweenService:Create(frame.Settings, info, {Size = UDim2.fromOffset(343, 76)}):Play()
end)
#16

okay im sorry I didn’t include the TextTransparency property…

local tweenService = game:GetService("TweenService")
local info = TweenInfo.new(.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out, 0, false, 0)

local frame = script.Parent

frame.Shop.Size = UDim2.new(0, 343, 0, 76)
frame.Settings.Size = UDim2.new(0, 343, 0, 76)

frame.Shop.MouseEnter:Connect(function()
	tweenService:Create(frame.Shop, info, {Size = UDim2.fromOffset(343, 125)}):Play()
	tweenService:Create(frame.Settings, info, {Size = UDim2.fromOffset(343, 76)}):Play()
	tweenService:Create(frame.Shop.Label, info, {TextTransparency = 0}):Play()
end)

frame.Settings.MouseEnter:Connect(function()
	tweenService:Create(frame.Shop, info, {Size = UDim2.fromOffset(343, 76)}):Play()
	tweenService:Create(frame.Settings, info, {Size = UDim2.fromOffset(343, 125)}):Play()
	tweenService:Create(frame.Settings.Label, info, {TextTransparency = 0}):Play()
end)

frame.Shop.InputEnded:Connect(function()
	tweenService:Create(frame.Shop, info, {Size = UDim2.fromOffset(343, 76)}):Play()
	tweenService:Create(frame.Settings, info, {Size = UDim2.fromOffset(343, 76)}):Play()
	tweenService:Create(frame.Shop.Label, info, {TextTransparency = 1}):Play()
end)

frame.Settings.InputEnded:Connect(function()
	tweenService:Create(frame.Shop, info, {Size = UDim2.fromOffset(343, 76)}):Play()
	tweenService:Create(frame.Settings, info, {Size = UDim2.fromOffset(343, 76)}):Play()
	tweenService:Create(frame.Settings.Label, info, {TextTransparency = 1}):Play()
end)
#17

Oh nonono that wasn’t the issue sorry if I wasn’t clearn enough. It’s that sometimes when I move back and forth between the buttons, they don’t change sizes for some reason.

#18

I’m not talking abut tweens; I’m speaking of the mouse events

#19

As I said, Mouse enter and leave are not reliable and you need to use a module for this.

#20

change the InputEnded into the classic MouseLeave

#21

The mouse events depend on framerate? I thought that was changed in an update.

I haven’t had any problems with them.