Problems with UI button mouse hover effect (SOLVED)

Help and Feedback Scripting Support
#1

  1. What do you want to achieve? I am trying to make hover effect for the UI button.

  2. What is the issue? The issue is that if you hover and leave your mouse too fast it will not change size or position of the button (as shown in the video below)
    a little bug?

Code of the both buttons:

local player = game:GetService("Players").LocalPlayer
local ts = game:GetService("TweenService")
local tween_speed = .3
local tweeninfo = TweenInfo.new(tween_speed, Enum.EasingStyle.Quad, Enum.EasingDirection.InOut, 0, false, 0)


local goals = {TextTransparency = 0}
local goals2 = {TextTransparency = 0.5}


local button = script.Parent
local bar = button:WaitForChild("bar_effect")
local hb = button.Parent:WaitForChild("hitboxes"):WaitForChild("HB_1")

local function mouse_hoverEffect()
	task.spawn(function()
	local tween_1 = ts:Create(button, tweeninfo, goals)
	tween_1:Play()
	
	bar:TweenSize(UDim2.new(0.45, 0,0.03, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, tween_speed)
	
		button:TweenPosition(UDim2.new(0.4, 0,0.494, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, tween_speed)
		end)
end 

local function mouse_leaveEffect()
	task.spawn(function()
		bar:TweenSize(UDim2.new(0, 0,0.03, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, tween_speed)

		button:TweenPosition(UDim2.new(0.4, 0,0.491, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, tween_speed)
		
	local tween_1 = ts:Create(button, tweeninfo, goals2)
	tween_1:Play()
end)
end


hb.MouseEnter:Connect(function()
	mouse_hoverEffect()
end)
hb.MouseLeave:Connect(function()

	mouse_leaveEffect()
end)
#2

Simple solution is that you could add a Button called ‘Goal’ and Tween the size instead of Udim2.new().

#3

I didn’t quite understand sorry, could you explain with more details?

#4

Here is an example:

I’ll tween the first button position (Left side) to the second button position (Right side) without using Udim2.new() and set the Second button transparency to 1.

image
image933×330 21.6 KB

And tween it

game.TweenService:Create(FirstButton, TweenInfo.new(), {Position = SecondButton.Position})
#5

Oh i see now, thanks! However i found an another solution, i had to just put everything in a local which tween inside it, and it works without removing the udim2.new()

Here is fixed code if anyone will get the same problem as me some day:

local player = game:GetService("Players").LocalPlayer
local ts = game:GetService("TweenService")
local tween_speed = .3
local tweeninfo = TweenInfo.new(tween_speed, Enum.EasingStyle.Quad, Enum.EasingDirection.InOut, 0, false, 0)


local goals = {TextTransparency = 0, Position = UDim2.new(0.4, 0,0.39, 0)}
local goals2 = {TextTransparency = 0.5, Position = UDim2.new(0.4, 0,0.399, 0)}

local goals_for_bar = { Size = UDim2.new(0.45, 0,0.03, 0)}
local goals_for_bar2 = {Size = UDim2.new(0, 0,0.03, 0)}

local button = script.Parent
local bar = button:WaitForChild("bar_effect")

local function mouse_hoverEffect()
	task.spawn(function()
	local tween_1 = ts:Create(button, tweeninfo, goals)
	tween_1:Play()
		
	local tween_for_bar = ts:Create(bar, tweeninfo, goals_for_bar)
		tween_for_bar:Play()
		end)
end 

local function mouse_leaveEffect()
	task.spawn(function()
		local tween_1 = ts:Create(button, tweeninfo, goals2)
		tween_1:Play()

		local tween_for_bar = ts:Create(bar, tweeninfo, goals_for_bar2)
		tween_for_bar:Play()

end)
end


button.MouseEnter:Connect(function()
	mouse_hoverEffect()
end)

button.MouseLeave:Connect(function()
	mouse_leaveEffect()
end)
2 Likes