Help With Text Fade Effects

Help and Feedback Scripting Support
1

So I made a fade-in / out effect for a button but if you were to spam it, it ends up glitched out like this, at a half faded out transparency.
image
image

When I decided to put some print statements in, I found that this problem happens when the fade function runs twice. I did try using a debounce but it didn’t seem to do anything.

The Fade Function:

local function FadeBuildFunc(FadeType)
	print("oh no")
	if FadeType == "out" then
		
		while BuildToggleButton.TextTransparency < 1 do
			wait(0.025)
			
			BuildToggleButton.TextTransparency = BuildToggleButton.TextTransparency + 0.1
			
		end
		
	elseif FadeType == "in" then
		
		while BuildToggleButton.TextTransparency > 0 do
			wait(0.025)

			BuildToggleButton.TextTransparency = BuildToggleButton.TextTransparency - 0.1

		end
		
	end
	
	BuildDebounce = false
end

The Button Function:

BuildToggleButton.MouseButton1Click:Connect(function()
	if not BuildDebounce then
		BuildDebounce = true

		if BuildButtonStatus == "Build" then

			FadeBuildFunc("out")
			print("RAN-1")
			BuildButtonStatus = "Exit"

			local GreyFrameColor = Color3.new(0.298039, 0.298039, 0.298039)
			HoverFunc(BuildToggleFrame, GreyFrameColor)
			local RedTextColor = BuildRedColor
			BuildToggleButton.TextColor3 = RedTextColor
			
			BuildToggleButton.Text = "Exit"
			
			FadeBuildFunc("in")
			print("RAN-2")
		elseif BuildButtonStatus == "Exit" then

			FadeBuildFunc("out")
			print("RAN-3")
			BuildButtonStatus = "Build"

			local GreyFrameColor = Color3.new(0.298039, 0.298039, 0.298039)
			HoverFunc(BuildToggleFrame, GreyFrameColor)
			local BlueTextColor = BuildBlueColor
			BuildToggleButton.TextColor3 = BlueTextColor
			
			BuildToggleButton.Text = "Build"

			FadeBuildFunc("in")
			print("RAN-4")
		end
	end
end)

Console:
wehwh
(From the top to the red line is normal clicking speed, everything after the red line is when I began to click faster and it broke)

Edit: I also noticed that sometimes when clicking the “Build” text will show up as red instead of the correct color, and the “Exit” will show up as blue sometimes before changing to it’s correct color.

Any help would be appreciated, also if you need to see it in game the link is here.

2

Hmm, I’ve done a bit of testing both in your place and my attempted repro. It seems like your issue is the location of your BuildDebounce variable. Try putting your BuildDebounce = false inside the BuildToggleButton function.

So something like this:

Code 
--// Your fade function
local function FadeBuildFunc(FadeType)
	if FadeType == "out" then
		while BuildToggleButton.TextTransparency < 1 do
			wait(0.025)
			BuildToggleButton.TextTransparency = BuildToggleButton.TextTransparency + 0.1
		end
	elseif FadeType == "in" then
		while BuildToggleButton.TextTransparency > 0 do
			wait(0.025)
			BuildToggleButton.TextTransparency = BuildToggleButton.TextTransparency - 0.1
		end
	end
end

--// Your button function
BuildToggleButton.MouseButton1Click:Connect(function()
	if not BuildDebounce then
		BuildDebounce = true		
		if BuildButtonStatus == "Build" then
			FadeBuildFunc("out")
			
			BuildButtonStatus = "Exit"
			BuildToggleButton.TextColor3 = Color3.fromRGB(220, 0, 22)
			BuildToggleButton.Text = "Exit"

			FadeBuildFunc("in")
			BuildDebounce = false -- Moved to here
		elseif BuildButtonStatus == "Exit" then
			FadeBuildFunc("out")
			
			BuildButtonStatus = "Build"
			BuildToggleButton.TextColor3 = Color3.fromRGB(13, 117, 255)
			BuildToggleButton.Text = "Build"

			FadeBuildFunc("in")
			BuildDebounce = false -- Moved to here
		end
	end
end)

I apologize if it looks different from your original code.

1 Like