UI Animations plays multiple times

ui.MouseEnter:Connect(function()
	TweenService:Create(ui, 
		TweenInfo.new(hoverduration,
			Enum.EasingStyle.Quad,	
			Enum.EasingDirection.InOut), 
		{Position = UDim2.new(0.291, 0, 0.066, 0)}):Play()
	
	hoversound:Play()
end)

ui.MouseLeave:Connect(function()
	TweenService:Create(ui, 
		TweenInfo.new(0.05, 
			Enum.EasingStyle.Quad, 
			Enum.EasingDirection.InOut),
	{Position = uioriginal}):Play()
end)

Basically this batch of code plays multiple times when the tween plays. I tried adding a debounce and other things but nothing seems to work.

How did you do your debounce? Can I see an example? It could be a problem with that.

ui.MouseEnter:Connect(function()
    if debounce == false then

        debounce = true; task.delay(0.1, function()
            debounce = false
        end);

        TweenService:Create(ui, 
            TweenInfo.new(hoverduration,
                Enum.EasingStyle.Quad,    
                Enum.EasingDirection.InOut), 
            {Position = UDim2.new(0.291, 0, 0.066, 0)}):Play()

        hoversound:Play()
    end
end)

ui.MouseLeave:Connect(function()
    if debounce == false then

        debounce = true; task.delay(0.1, function()
            debounce = false
        end);

        TweenService:Create(ui, 
            TweenInfo.new(0.05, 
                Enum.EasingStyle.Quad, 
                Enum.EasingDirection.InOut),
            {Position = uioriginal}):Play()
        debounce = true
    end
end)

I think the problem is that the tween moves the UI which triggers the other event, and it repeats in an infinite loop

Wait for the tween to be completed and then set the debounce to false

ui.MouseEnter:Connect(function()
	if debounce == false then
		
		TweenService:Create(ui, 
			TweenInfo.new(hoverduration,
				Enum.EasingStyle.Quad,    
				Enum.EasingDirection.InOut), 
			{Position = UDim2.new(0.291, 0, 0.066, 0)}):Play()
		
		hoversound:Play()
		
		debounce = true; task.delay(0.1, function()
			debounce = false
		end)
	end
end)

So like this?

assign a variable to TweenService:Create()

and then wait for its .Completed event

local tween = TweenService:Create()-- example
tween:Play() 
tween.Completed:Wait() -- waits for it to end
ui.MouseEnter:Connect(function()
	local tweenenter = TweenService:Create(ui, TweenInfo.new(hoverduration,Enum.EasingStyle.Quad,	Enum.EasingDirection.InOut), {Position = UDim2.new(0.291, 0, 0.066, 0)}):Play()
	tweenenter:Play()
	hoversound:Play()
	tweenenter.Completed:Wait()
end)


ui.MouseLeave:Connect(function()
	local tweenleave = TweenService:Create(ui, TweenInfo.new(0.05, Enum.EasingStyle.Quad, Enum.EasingDirection.InOut), {Position = uioriginal}):Play()
	tweenleave:Play()
	tweenleave.Completed:Wait()
end)

Like this? Because it still doesnt work

It’s giving me this error too.
image

Try this:

local debounce = false

ui.MouseEnter:Connect(function()
	if not debounce then
		debounce = true
		local tween = TweenService:Create(ui, TweenInfo.new(hoverduration, Enum.EasingStyle.Quad, Enum.EasingDirection.InOut), {Position = UDim2.new(0.291, 0, 0.066, 0)}):Play()
		hoversound:Play()
		task.wait(hoverduration)
		debounce = false
	end
end)


ui.MouseLeave:Connect(function()
	if not debounce then
		debounce = true
		local tween = TweenService:Create(ui, TweenInfo.new(0.05, Enum.EasingStyle.Quad, Enum.EasingDirection.InOut), {Position = uioriginal}):Play()
		task.wait(hoverduration)
		debounce = false
	end
end)

I think I’m just going to give up on this then because it doesnt seem that anyone can find a solution. Thanks to everyone for trying though!

Can you send a video of the issue and maybe a place file? I’ve set up a simple screen gui and your original code works perfectly fine. There must be something else wrong.

I just noticed as well from this video that it seems to be that if I scroll past the UI too fast the leave animation doesn’t play either.

Gabory Projects.rbxl (70.0 KB)