Help with fading a GUI with "for i = 1, 100"

Help and Feedback Scripting Support
1

Hello, first of all thanks for reading :slight_smile:
I’m mainly a builder so my code is simple, but not functional :I

  1. What do you want to achieve? Keep it simple and clear!

I want both the text and the images to fade out at same time.

  1. What is the issue? Include screenshots / videos if possible!

For some reason, the text takes longer to fade out.

  1. What solutions have you tried so far? Did you look for solutions on the Developer Hub?

I tried looking for other posts in here… didn’t find anything helpful or something that i could understand.

-- local block = workspace["Shards of Hazel"]
local podeHit = true
local Text1 = script.Parent.TextLabel
local Text2 = script.Parent.TextLabel2
local Image1 = script.Parent.TextLabel.ImageLabel1
local Image2 = script.Parent.TextLabel2.ImageLabel1

block.Touched:Connect(function(hit)
	if hit and hit.Parent:FindFirstChild("Humanoid") then
		if podeHit == true then
			podeHit = false
			for i = 1, 100 do
				Text1.TextTransparency -= 0.05
				Text2.TextTransparency -= 0.05
				Image1.ImageTransparency -= 0.05
				Image2.ImageTransparency -= 0.05
				wait(.025)	
			end	
			for i = 1,100 do
				Text1.TextTransparency += 0.05
				Text2.TextTransparency += 0.05
				Image1.ImageTransparency += 0.05
				Image2.ImageTransparency += 0.05
				wait(.025)
			end
			podeHit = true
		end
	end
end)

image

2

You should use TweenService. Its highly recommended that you use that for UI animation.
Here is a code example for TweenService:

local TS = game:GetService("TweenService")

local podeHit = true
local Text1 = script.Parent.TextLabel
local Text2 = script.Parent.TextLabel2
local Image1 = script.Parent.TextLabel.ImageLabel1
local Image2 = script.Parent.TextLabel2.ImageLabel1

local info = TweenInfo.new(
	1,
	Enum.EasingStyle.Sine,
	Enum.EasingDirection.InOut,
	0,
	false,
	0
)

block.Touched:Connect(function(hit)
	if hit and hit.Parent:FindFirstChild("Humanoid") then
		if podeHit == true then
			podeHit = false
			local Tween1 = TS:Create(Text1, info, {TextTransparency = 0})
			local Tween2 = TS:Create(Text2, info, {TextTransparency = 0})
			local Tween3 = TS:Create(Image1, info, {ImageTransparency = 0})
			local Tween4 = TS:Create(Image2, info, {ImageTransparency = 0})
			
			Tween1:Play()
			Tween2:Play()
			Tween3:Play()
			Tween4:Play()
			
			task.wait(2.5)
			
			local Tween5 = TS:Create(Text1, info, {TextTransparency = 1})
			local Tween6 = TS:Create(Text2, info, {TextTransparency = 1})
			local Tween7 = TS:Create(Image1, info, {ImageTransparency = 1})
			local Tween8 = TS:Create(Image2, info, {ImageTransparency = 1})
			
			Tween5:Play()
			Tween6:Play()
			Tween7:Play()
			Tween8:Play()

			podeHit = true
		end
	end
end)
1 Like
3

Why not just use tweening?, you should look into tweening to save you some lines of code as @BabyNinjaTime suggested.

game.TweenService:Create(Text1, TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, 0, true), {TextTransparency = 0}):Play()
game.TweenService:Create(Text2, TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, 0, true), {TextTransparency = 0}):Play()
1 Like
4

100 * 0.05 = 5, not 1

TextTransparency is not clamped, so can go to any number.
ImageTransparency is clamped between 0 and 1.

So when you fade them in, TextTransparency goes from 1 to -4, and ImageTransparency goes from 1 to 0.

When you fade them out, TextTransparency has to go from -4 to 0 before you begin to see any effect.

Correct your loops to do 20 iterations, or better yet, use TweenService as mentioned by others so you don’t have to worry about it.

2 Likes
5

Thanks! I didn’t know about the TweenService, it actually worked and saved me a lot of lines. Thank you’all <3

1 Like
6

You are welcome! Happy to help

1 Like