Tween not working correctly

Help and Feedback Scripting Support
#1

So I am making 2 buttons pop up when I hover my mouse over them. It takes about 0.3 seconds for it to complete its tween (getting bigger). Once I remove my mouse, it should play a tween that makes the button smaller, for the same amount of time.

I attached a video with what it’s supposed to do and what happens…

Code

This snippet is found in a local script inside of the frame where the buttons are placed.

local function makeMainButtonBigger()
	local tween = Main:TweenSize(
		UDim2.new(0.12, 0,0.115, 0),
		Enum.EasingDirection.In,
		Enum.EasingStyle.Quad,
		0.3,
		false
	)
	Main.Position = onscreenPosMain
end

local function makeMainButtonSmaller()
	local tween = Main:TweenSize(
		UDim2.new(0.12, 0,0.089, 0),
		Enum.EasingDirection.Out,
		Enum.EasingStyle.Quad,
		0.3,
		false
	)
	Main.Position = onscreenPosMain
end

local function makeOtherButtonBigger()
	local tween = Other:TweenSize(
		UDim2.new(0.12, 0,0.115, 0),
		Enum.EasingDirection.In,
		Enum.EasingStyle.Quad,
		0.3,
		false
	)
	Other.Position = onscreenPosOther
end

local function makeOtherButtonSmaller()
	local tween = Other:TweenSize(
		UDim2.new(0.12, 0,0.089, 0),
		Enum.EasingDirection.Out,
		Enum.EasingStyle.Quad,
		0.3,
		false
	)
	Other.Position = onscreenPosOther
end

Other.MouseEnter:Connect(function()
	if db == false then
		makeOtherButtonBigger()
		wait(0.3)
		db = false
	end
end)

Other.MouseLeave:Connect(function()
	if db == false then
		makeOtherButtonSmaller()
		wait(0.3)
		db = false
	end
end)

Main.MouseEnter:Connect(function()
	if db == false then
		makeMainButtonBigger()
		wait(0.3)
		db = false
	end
end)

Main.MouseLeave:Connect(function()
	if db == false then
		makeMainButtonSmaller()
		wait(0.3)
		db = false
	end
end)

Can anybody help?

#2

It’s because you’re using the same debounce for each button. So when you trigger it by hovering over the button then quickly move the button away, the debounce prevents the function which makes the button smaller from executing, to remedy this you could just have 4 different debounces, 1 for each button.

#3

I just did that, I made a debounce for each event of the button (x4), but its still causing the bug like in my video.

local db1 = false
local db2 = false
local db3 = false
local db4 = false

... -- Code

Other.MouseEnter:Connect(function()
	if db1 == false then
		makeOtherButtonBigger()
		wait(0.3)
		db1 = false
	end
end)

Other.MouseLeave:Connect(function()
	if db2 == false then
		makeOtherButtonSmaller()
		wait(0.3)
		db2 = false
	end
end)

Main.MouseEnter:Connect(function()
	if db3 == false then
		makeMainButtonBigger()
		wait(0.3)
		db3 = false
	end
end)

Main.MouseLeave:Connect(function()
	if db4 == false then
		makeMainButtonSmaller()
		wait(0.3)
		db4 = false
	end
end)
#4 
local db1 = false
local db2 = false
local db3 = false
local db4 = false

... -- Code

Other.MouseEnter:Connect(function()
	if db1 then
		return
	end
	db1 = true
	makeOtherButtonBigger()
	wait(0.3)
	db1 = false
end)

Other.MouseLeave:Connect(function()
	if db2 then
		return
	end
	db2 = true
	makeOtherButtonSmaller()
	wait(0.3)
	db2 = false
end)

Main.MouseEnter:Connect(function()
	if db3 then
		return
	end
	db3 = true
	makeMainButtonBigger()
	wait(0.3)
	db3 = false
end)

Main.MouseLeave:Connect(function()
	if db4 then
		return
	end
	db4 = true
	makeMainButtonSmaller()
	wait(0.3)
	db4 = false
end)

If this doesn’t work then it’s likely something to do with the UDim2 sizes specified.

#5

This doesn’t work either. The problem still persists.

The sizes are how they should be because technically, the problem persists only when I quickly remove my mouse from over the button. If I do it slowly or normally, the button goes back to its original size.

#6

Okay, so I think I see why it happens, it’s because the mouse leaves while the function connected to the fired MouseEnter event is still executing. If you check the video you posted your mouse leaves while the button is still increasing in size.

You could fix this by decreasing the length of time the tween plays for.

#7

It whould be better if you used a function when the tween is done instead waiting like:

MyTween.Completed:Connect(function)
--Now you can add here your debounce
end)

This is what i use on things like that.
I hope it helped!

#8

I tried something similar to this. MyTween.Completed:Wait() but it said .Completed wasn’t existent to this type of Tween (TweenSize).

#9 
local function makeMainButtonBigger()
	local tween = Main:TweenSize(
		UDim2.new(0.12, 0,0.115, 0),
		Enum.EasingDirection.In,
		Enum.EasingStyle.Quad,
		0.3,
		false
	)
	Main.Position = onscreenPosMain
end

local function makeMainButtonSmaller()
	local tween = Main:TweenSize(
		UDim2.new(0.12, 0,0.089, 0),
		Enum.EasingDirection.Out,
		Enum.EasingStyle.Quad,
		0.3,
		false
	)
	Main.Position = onscreenPosMain
end

local function makeOtherButtonBigger()
	local tween = Other:TweenSize(
		UDim2.new(0.12, 0,0.115, 0),
		Enum.EasingDirection.In,
		Enum.EasingStyle.Quad,
		0.3,
		false
	)
	Other.Position = onscreenPosOther
end

local function makeOtherButtonSmaller()
	local tween = Other:TweenSize(
		UDim2.new(0.12, 0,0.089, 0),
		Enum.EasingDirection.Out,
		Enum.EasingStyle.Quad,
		0.3,
		false
	)
	Other.Position = onscreenPosOther
end

Other.MouseEnter:Connect(otherEnter)
Other.MouseLeave:Connect(otherLeave)
Main.MouseEnter:Connect(mainEnter)
Main.MouseLeave:Connect(mainLeave)

function otherLeave()
	if db == false then
		Other.MouseEnter:Disconnect()
		makeOtherButtonSmaller()
		wait(0.3)
		db = false
		Other.MouseEnter:Connect(otherEnter)
	end
end)

function otherEnter()
	if db == false then
		Other.MouseLeave:Disconnect()
		makeOtherButtonBigger()
		wait(0.3)
		db = false
		Other.MouseLeave:Connect(otherLeave)
	end
end)

function mainLeave()
	if db == false then
		Main.MouseEnter:Disconnect()
		makeMainButtonSmaller()
		wait(0.3)
		db = false
		Main.MouseEnter:Connect(mainEnter)
	end
end

function mainEnter()
	if db == false then
		Main.MouseLeave:Disconnect()
		makeMainButtonBigger()
		wait(0.3)
		db = false
		Main.MouseLeave:Connect(mainLeave)
	end
end
#10

Well i dont realy find any use of the debounce you add, i think if you leave the tween it self to play it will work.

#11

This isn’t possible. otherLeave is below the otherEnter function. You can’t call Other.MouseLeave:Connect(otherLeave) before the otherLeave function is defined. Thanks for helping though! :slight_smile:

#12

You can since all of the functions are defined from the get-go, before any are executed. They all belong to the same scope.

#13

It wouldn’t work anyway since it’s disconnecting the functions which are required for the buttons to get smaller again when the mouse leaves and only reconnects them after 0.3 seconds have elapsed, so if the cursor leaves the Gui instance in that time then the same problem will persist.

This is why mouseenter/mouseleave can be quite fiddly, I prefer click toggling myself.