Making mouse hover effects not working as i imagined

Well Im happy with how my effects turned out however theres issues to address:

  1. When the buttons are close to eachother and i move my mouse very fast from one button to another the mouseLeave function does not work properly. Im not sure if Im just bad at scripting or if this is an engine bug.

Ive tried to fix this by adding a task.Spawn() while task.Wait(.1) do loop with a mouseIn bool value but it still doesnt work very smoothly. Ive seen other games fix this and I dont know how

Script:

for i, button in pairs(Buttons) do
		local ButtonHoverTransparencyInfo = TweenInfo.new(0.2, Enum.EasingStyle.Sine)
		local ButtonHoverTransparencyGoal = {BackgroundTransparency = 0.1}
		local ButtonHoverTransparencyTween = TweenService:Create(button, ButtonHoverTransparencyInfo, ButtonHoverTransparencyGoal)

		local ButtonHoverTransparencyGoal2 = {BackgroundTransparency = 0.5}
		local ButtonHoverTransparencyTween2 = TweenService:Create(button, ButtonHoverTransparencyInfo, ButtonHoverTransparencyGoal2)
		task.spawn(function()
			while task.wait(0.1) do
				if MouseIn == false then
					ButtonHoverTransparencyTween2:Play()
					button:TweenSize(UDim2.new(0.081, 0,0.164, 0),Enum.EasingDirection.In, Enum.EasingStyle.Sine , .2, false)
				end
			end
		end)
		button.MouseEnter:Connect(function()
			SoundsFolder.Effects.Hover:Play()
			MouseIn = true
			ButtonHoverTransparencyTween:Play()
			button:TweenSize(UDim2.new(0.09, 0,0.196, 0),Enum.EasingDirection.In, Enum.EasingStyle.Sine , .1, false)
		end)
		button.MouseLeave:Connect(function()
			MouseIn = false
			local ButtonHoverTransparencyInfo = TweenInfo.new(0.1, Enum.EasingStyle.Sine)
			local ButtonHoverTransparencyGoal = {BackgroundTransparency = 0.1}
			local ButtonHoverTransparencyTween = TweenService:Create(button, ButtonHoverTransparencyInfo, ButtonHoverTransparencyGoal)
			ButtonHoverTransparencyTween:Play()
			button:TweenSize(UDim2.new(0.081, 0,0.164, 0),Enum.EasingDirection.In, Enum.EasingStyle.Sine , .1, false)
			ButtonHoverTransparencyTween2:Play()
		end)
		button.MouseButton1Click:Connect(function()
			SoundsFolder.Effects.Click:Play()
		end)
	end
		task.spawn(function()
			while task.wait(0.1) do
				if MouseIn == false then
					ButtonHoverTransparencyTween2:Play()
					button:TweenSize(UDim2.new(0.081, 0,0.164, 0),Enum.EasingDirection.In, Enum.EasingStyle.Sine , .2, false)
				end
			end
		end)

what are you trying to do with this code?

Resets the buttons original look if the mouse is outside the button and the button is still doing the mouse hover effects

well you can do that on MouseLeave

Instead of using a while loop to check the state of the button, and in order to return it back to the original state even if the first Tween still playing, is mandatory stop the first tween on MouseLeave.

You need to hold a reference of the Tween that is created on MouseEnter, and when MouseLeave fires, Cancel() that first Tween and Play() the MouseLeave Tween.

No need to have an infinite loop running to check.

1 Like

Oh right I wasn’t aware this existed and how would I stop this?

button:TweenSize(UDim2.new(0.09, 0,0.196, 0),Enum.EasingDirection.In, Enum.EasingStyle.Sine , .1, false)

Im not sure by using TweenSize, I always use TweenService:Create()
I suppose works in the same way, just store the Track into a variable and Cancel()

local tween = button:TweenSize(UDim2.new(0.09, 0, 0.196, 0), Enum.EasingDirection.In, Enum.EasingStyle.Sine, 0.1, false)
tween:Play()
tween:Cancel()

I will take a look, I never used TweenSize

Yeah It doesnt work ill just use TweenService:Create()

1 Like

Yeah, its what I noticed when reading the doc, it only returns a bool if the tween played. TweenService is way more flexible, and you are already using it in your script, I think its better to stick with TweenService and not the basic GUI functions of tween

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.