Visibility of tweening elements

Hi.

In my game, I’ve been making a shop Gui with a button to view your purchase history. However, the tweens to open and close the shop and the purchase history do not always follow the script.

I’m wondering why this happens because my script just shows that it shouldn’t be possible. Is there something big I’m missing?

Also note that the visibility of these two Gui elements aren’t changed anywhere else throughout my game except for once at the start of the script to get the elements in correct positions/visibilities.

Here’s a snippet of my code:

local mainContainer = ShopContainer.MainContainer
local backButton = ShopContainer.BackButton
local hasChosenBackOrHistory = false

backButton.MouseButton1Click:Connect(function()
	ButtonClickEffect.ButtonClickEffect(backButton)
	print("hasChosenBackOrHistory: ", hasChosenBackOrHistory)
	if not hasChosenBackOrHistory then
		hasChosenBackOrHistory = true
		returnToMainMenu() 
		local shopTween = TweenService:Create(ShopContainer, GUIInfo, {Position = UDim2.fromScale(0.5, -0.5), Transparency = 1})
		shopTween:Play()
		shopTween.Completed:Connect(function()
			ShopContainer.Visible = false
			mainMenuButtonHasBeenPressed = false
			hasChosenBackOrHistory = false
			shopTween:Destroy()
		end)
	else
		showWarning("You're clicking too fast!")
	end
end)

local purchaseHistoryButton = ShopContainer.MainContainer.MainScrollingFrameContainer.PurchaseHistoryButton

purchaseHistoryButton.MouseButton1Click:Connect(function()
	ButtonClickEffect.ButtonClickEffect(purchaseHistoryButton)
	print("hasChosenBackOrHistory: ", hasChosenBackOrHistory)
	if not hasChosenBackOrHistory then
		hasChosenBackOrHistory = true

		local shopTween = TweenService:Create(ShopContainer, GUIInfo, {Position = UDim2.fromScale(0.5, 1.5), Transparency = 1})
		shopTween.Completed:Connect(function()
			ShopContainer.Visible = false
		end)
		shopTween:Play()

		purchaseHistoryContainer.Visible = true
		TweenService:Create(purchaseHistoryContainer, GUIInfo, {Position = UDim2.fromScale(0.5, 0.5), Transparency = 0.25}):Play()
		updatePurchaseHistoryContainers()
		local backButton = purchaseHistoryContainer.BackButton

		backButton.MouseEnter:Connect(function()
			HoverSound:Play()
			TweenService:Create(backButton, GUIHoverInfo, {Size = UDim2.fromScale(0.151 * 1.05, 0.067 * 1.05)}):Play()
		end)

		backButton.MouseLeave:Connect(function()
			TweenService:Create(backButton, GUIHoverInfo, {Size = UDim2.fromScale(0.151, 0.067)}):Play()
		end)

		backButton.MouseButton1Click:Connect(function()
			ButtonClickEffect.ButtonClickEffect(backButton)
			local scTween = TweenService:Create(ShopContainer, GUIInfo, {Position = UDim2.fromScale(0.5, 0.5), Transparency = 0.5})
			ShopContainer.Visible = true
			scTween:Play()

			local phTween = TweenService:Create(purchaseHistoryContainer, GUIInfo, {Position = UDim2.fromScale(0.5, -0.5), Transparency = 1})
			phTween.Completed:Connect(function()
				purchaseHistoryContainer.Visible = false
				hasChosenBackOrHistory = false
			end)
			phTween:Play()
		end)
	else
		showWarning("You're clicking too fast!")
	end
end)

Here is also a video of it happening:


As you can see, the second time the purchase history container is closed, it becomes invsible before it ends. It’s the same with the shop container.

Update:

I fixed it!

I don’t know why this works but inside of the Tween completed event, I added a task.delay(GUIInfo.Time, function() end) which works perfectly.

This is weird because it means that the completed event is fired as soon as the tween starts instead of when it ends (it probably also fires when it ends).

If anyone is reading this and knows why this is happening, please tell me!

Thanks
7eoeb