Help with tween freezing?

Help and Feedback Scripting Support
#1

Hey, here I’m looping through TextLabels in a frame, each of these textlabels has a button inside (yes, I will switch to TextButtons after). This script mostly works, when the mouse enters and leaves the colours change, and when activated it plays a small animation. This all works, except when you spam click two at a time, then the colour freezes. This is a small gif of the issue and my code:

for i, v in pairs(menu.List:GetChildren()) do
        if v:IsA("TextLabel") then
            v.Button.MouseEnter:Connect(function()
                TS:Create(v.Button, TI, {BackgroundTransparency = 0}):Play()
                TS:Create(v.Button, TI, {BackgroundColor3 = EnabledStateColour}):Play()

                TS:Create(v, TI, {TextColor3 = Color3.fromRGB(255, 255, 255)}):Play()
            end)
            
            v.Button.MouseLeave:Connect(function()
                TS:Create(v.Button, TI, {BackgroundTransparency = 1}):Play()
                TS:Create(v.Button, TI, {BackgroundColor3 = DisabledStateColour}):Play()

                TS:Create(v, TI, {TextColor3 = Color3.fromRGB(0, 0, 0)}):Play()
            end)
            
            v.Button.Activated:Connect(function()
                TS:Create(v.Button, TI, {BackgroundTransparency = 1}):Play()
                TS:Create(v.Button, TI, {BackgroundColor3 = DisabledStateColour}):Play()

                TS:Create(v, TI, {TextColor3 = Color3.fromRGB(0, 0, 0)}):Play()

                wait(.03)

                TS:Create(v.Button, TI, {BackgroundTransparency = 0}):Play()
                TS:Create(v.Button, TI, {BackgroundColor3 = EnabledStateColour}):Play()

                TS:Create(v, TI, {TextColor3 = Color3.fromRGB(255, 255, 255)}):Play()
            end)
        end
    end
#2

When u spam “click”, it freezes because it has wait(.03) basically you’re clicking too fast, a way to fix that problem is to add a Cooldown(Debounce) for it.

1 Like
#3

Hey, thank’s for the reply. I’ll try that and get back to you!

#4

I would alternatively save each of the tweens for transparency, backgroundcolor, and textcolor in a variable in the loop, then cancel each tween before doing anything else before creating others

A cooldown system might result in laggy feeling input, and might work for the button press but I think it might look a bit wonky for the mouseenter mouseleave thing, but could definitely work

#5

I think the issue is only the “clicking”, but i coud be wr0ng

#6

Hey, thank you. I tried your code and it didn’t seem to work. It did not at all print “debounce” and the issue still happened. Here is the code I used this time.

local db = false

for i, v in pairs(menu.List:GetChildren()) do
		if v:IsA("TextLabel") then
			v.Button.MouseEnter:Connect(function()
				TS:Create(v.Button, TI, {BackgroundTransparency = 0}):Play()
				TS:Create(v.Button, TI, {BackgroundColor3 = EnabledStateColour}):Play()

				TS:Create(v, TI, {TextColor3 = Color3.fromRGB(255, 255, 255)}):Play()
			end)
			
			v.Button.MouseLeave:Connect(function()
				TS:Create(v.Button, TI, {BackgroundTransparency = 1}):Play()
				TS:Create(v.Button, TI, {BackgroundColor3 = DisabledStateColour}):Play()

				TS:Create(v, TI, {TextColor3 = Color3.fromRGB(0, 0, 0)}):Play()
			end)
			
			v.Button.Activated:Connect(function()
				if db then
					print("debounce")
				else
					db = true
					TS:Create(v.Button, TI, {BackgroundTransparency = 1}):Play()
					TS:Create(v.Button, TI, {BackgroundColor3 = DisabledStateColour}):Play()

					TS:Create(v, TI, {TextColor3 = Color3.fromRGB(0, 0, 0)}):Play()

					wait(.03)
					TS:Create(v.Button, TI, {BackgroundTransparency = 0}):Play()
					TS:Create(v.Button, TI, {BackgroundColor3 = EnabledStateColour}):Play()

					TS:Create(v, TI, {TextColor3 = Color3.fromRGB(255, 255, 255)}):Play()
					db = false
				end
			end)
		end
	end
#7

Sorry, could you elaborate? I’m a bit confused.

#8

i didn’t quite get the post, but i think i understand now. You seem to be having problem with the detection zone overlapping yea? being able to click 2 at once?

#9

I think what is happening is if you click another one while another tween in is progress.

#10

So the problem is, you can click 2 at once?

#11

Well, kind of. If you click one and then quickly click another the previous tween freezes.

#12

Like uhh
I would do something like


for i,v in next, guis:GetChildren() do
    local bColorTween
    local tTween
    local tColorTween

    v.MouseEnter:Connect(function()
        bColorTween:Pause()
        tTween:Pause()
        tColorTween:Pause()
        bColorTween = --blahblah background color tween creation
        tTween = --same thing but transparency tween creation
        tColorTween = --same thing again but text color tween creation
        bColorTween:Play()
        tTween:Play()
        tColorTween:Play()
    end)
    
    --rinse and repeat
end

It looks really ugly and you might wanna make a function out of it or something but hopefully it works

#13 
            TS:Create(v.Button, TI, {BackgroundColor3 = DisabledStateColour}):Play() 
            wait(.03)
            TS:Create(v.Button, TI, {BackgroundColor3 = EnabledStateColour}):Play()

so you click right? it becomes blue then what? i assume DisabledStateColour is the white? and EnabledStateColour is the blue?

#14

Is it on purpose to not have an transition to white after clicking it?

local function Disable(Button)
	TS:Create(Button, TI, {BackgroundTransparency = 1}):Play()
	TS:Create(Button, TI, {BackgroundColor3 = DisabledStateColour}):Play()

	TS:Create(Button.Parent, TI, {TextColor3 = Color3.fromRGB(0, 0, 0)}):Play()
end

local function Enable(Button)
	TS:Create(Button, TI, {BackgroundTransparency = 0}):Play()
	TS:Create(Button, TI, {BackgroundColor3 = EnabledStateColour}):Play()

	TS:Create(Button.Parent, TI, {TextColor3 = Color3.fromRGB(255, 255, 255)}):Play()
end

for i, v in pairs(menu.List:GetChildren()) do
    if v:IsA("TextLabel") then
        v.Button.MouseEnter:Connect(function()
           Enable(v.Button)
        end)
        
        v.Button.MouseLeave:Connect(function()
			Disable(v.Button)
        end)
        
        v.Button.Activated:Connect(function()
			Disable(v.Button)
			wait(.03)
			Enable(v.Button)
        end)
    end
end

that’s basically what’s happening

#15

It seems to me that the problem is when the button is activated, one of the last tween service animations in the activated function sets the background color to the EnabledStateColour. This works fine if the mouse is still hovering over the button, but if the mouse has left the button before the animation is finished then it will keep the EnabledStateColour. In other words, the MouseLeave function would have already been called before the end of the Activated function, which causes the background color to stay the EnabledStateColour. I recommend adding some kind of flag variable that will check if the mouse has already left the button. Then, based on the flag variable, the Activated function can set the color back to EnabledStateColour if the mouse is still hovering over the button, or to DisabledStateColour if the mouse is not hovering over the button.

Adding a way to ensure the tween animations do not overlap each other will definitely also make your code less prone to bugs such as what @PapaBreadd and @EnigmaticDevil have previously suggested.

#16

Try this:

local tween1
local tween2
local tween3

for i, v in pairs(menu.List:GetChildren()) do
	if v:IsA("TextLabel") then
		v.Button.MouseEnter:Connect(function()
			tween1 = TS:Create(v.Button, TI, {BackgroundTransparency = 0})
			tween1:Play()
			tween2 = TS:Create(v.Button, TI, {BackgroundColor3 = EnabledStateColour})
			tween2:Play()
			tween3 = TS:Create(v, TI, {TextColor3 = Color3.fromRGB(255, 255, 255)})
			tween3:Play()
			v.Button.MouseLeave:Connect(function()
				tween1:Cancel()
				tween2:Cancel()
				tween3:Cancel()
				TS:Create(v.Button, TI, {BackgroundTransparency = 1}):Play()
				TS:Create(v.Button, TI, {BackgroundColor3 = DisabledStateColour}):Play()

				TS:Create(v, TI, {TextColor3 = Color3.fromRGB(0, 0, 0)}):Play()
			end)
		end)

		v.Button.Activated:Connect(function()
			TS:Create(v.Button, TI, {BackgroundTransparency = 1}):Play()
			TS:Create(v.Button, TI, {BackgroundColor3 = DisabledStateColour}):Play()

			TS:Create(v, TI, {TextColor3 = Color3.fromRGB(0, 0, 0)}):Play()

			wait(.03)

			TS:Create(v.Button, TI, {BackgroundTransparency = 0}):Play()
			TS:Create(v.Button, TI, {BackgroundColor3 = EnabledStateColour}):Play()

			TS:Create(v, TI, {TextColor3 = Color3.fromRGB(255, 255, 255)}):Play()
		end)
	end
end

It is works for me: