GUI Clones Overriding Eachother

[Peremarquette2o7 (noahh)]

I made a little BillboardGui animation that plays each time you collect a coin. It works by having a LocalScript create a clone of it, set the parent to the player’s head, and play the tweens. But if you collect one while a previous animation is running, it seems to override with the previous animation thats still playing. I’m horrible at explaining things, so here’s a video:
https://cdn.discordapp.com/attachments/964908658519576649/1248331835650474074/Place1_-_Roblox_Studio_2024-06-06_13-38-55.mp4?ex=6663471e&is=6661f59e&hm=2d171f424a2ca9ad3963e7cca643c0ae4a1eec98152b9b257645f448eed1b40b&

Here are my scripts:
ServerScript:

CoinGuiEvent:FireClient(Player, Player.Character.Head)

LocalScript (in StarterGui)

function createClone(newParent)
	
	guiClone = gui:Clone()
	guiClone.Parent = newParent

	local animationTween = TweenService:Create(
		guiClone, 
		tweenInfo, 
		{ StudsOffset = Vector3.new(0,2,0) }
	)
	local fadeTween1 = TweenService:Create(
		guiClone:WaitForChild("CoinImage"),
		fadeTweenInfo,
		{ ImageTransparency = 1 }
	)
	local fadeTween2 = TweenService:Create(
		guiClone:WaitForChild("CountText"),
		fadeTweenInfo,
		{ TextTransparency = 1 }
	)

	local coinImage = guiClone:WaitForChild("CoinImage")
	local coinText = guiClone:WaitForChild("CountText")

	guiClone.Enabled = true
	animationTween:Play()

	wait(1)	

	fadeTween1:Play()
	fadeTween2:Play()

	fadeTween2.Completed:Connect(function()
		guiClone:Destroy()
	end)
	
end

coinEvent.OnClientEvent:Connect(createClone)

So far I’ve tried using coroutine and task, but none of them have worked as of yet. Any ideas on how I could fix this? Thanks.

[Guest_666friendlylol]

have you tried changing the name of it?

[Peremarquette2o7 (noahh)]

For which thing? And what should I change it to?

[ianadanfan (Salad)]

What would you like the UI to do instead of overriding each other? There are different ways to go about this, my main ideas are:

A. You create a variable in order to tell you if there are tweens playing, if there are tweens playing, then simply increment the number at the top of the coin. Otherwise, create the clone and display it as normal. (Probably the best way to go about it)
B. Create a queue for the tweens that you want to play and play them after they are finished.

[Peremarquette2o7 (noahh)]

I just want them to play through and finish the animation. Nothing crazy.

[Bpandu]

From what I think Salad meant as well as my doubt is too… how do you exactly want the animations to play through and finish?

1. The new tween to not overlap the existing one?
2. By play-through, are you thinking of making the new tween wait until the previous one is finished?

[Peremarquette2o7 (noahh)]

My bad. Yes, I do want the animations to overlap, but the code does so as well. So when the one billboard destroys itself, so does the other.

[Bpandu]

I understand the issue now!

Your code seems to be right, but there could be other underlying things that might be interrupting the process.

But, have a look at my uncopylocked place, where I wrote the exact logic that achieves the exact thing you were trying to do, and it’s working correctly as you needed.

Examine my example and your game’s codebase and see where your logic needs to be tackled with a bit.

I’ve been busy so I couldn’t get to share it right away, sorry.

Here’s it is: BillboardGUI effect

[Peremarquette2o7 (noahh)]

Thank you for taking the time to look into it more, and I believe I found the reason why!

I had rewritten some code to use .Completed:Wait() like yours for better optimization, and by doing that for both Tweens I have created, it works great. Here’s what I changed:

From:

fadeTween2.Completed:Connect(function()
		guiClone:Destroy()
end)

To:

    fadeTween1.Completed:Wait()
	fadeTween2.Completed:Wait()

Thanks again, and should anyone be unfortunate enough to run into this same problem, here’s the solution haha

[Bpandu]

Good job finding it!

I always use that approach for things like that, so here’s the takeaway from it:

1. Connecting that tween upon completed event to a function was triggering it to happen, regardless of whatever tween, once you connected the “completed” event to the specific tween, the next time that event is triggered, the function inside it ran right away, overlapping both of your clonedGUIs…
2. I usually use .Completed:Wait() but the takeaway from this is, unlike the event, you are just waiting for the tween variable inside that function to be finished, so it’s like in a completely different thread-of-execution, so that’s the reason I use it and it makes sense for me to what I need to achieve at the moment.

Elaborating on the first takeaway, it’s simply happening because, imagine you have like CharacterAdded event, if you connect it to a function, it will trigger as many times as your character is reloaded.

It’s sometimes not easy to spot these little things right away, haha! Good job!