Notification system UI tweening problem

[Gromaniak85]

Hi!

I’m making a notification system for my game. For now, it just notifies about new items in your inventory. How the tweening along the y-axis works, is it tweens the position of the frame upwards based on the size of Y axis of the frame.

Here’s a video:

And here’s the code snippet:

for i,v in pairs(NewItemFrame:GetChildren()) do
		if v:IsA("Frame") then
			local Tween = game:GetService("TweenService"):Create(v, TweenInfo.new(1), {
				Position = UDim2.new(1,0,v.Position.Y.Scale - v.Size.Y.Scale,0)
			})
			Tween:Play()
		end
	end

What happens is, when player recieves an item, the tweens of frames going up starts playing again, and that effectively overwrites the previous tweens that were happening at the moment, making the frames overlap.

How could I make so the frames don’t overlap?

[glowyogurt (glow)]

This may not be the most efficient method but it works (I think)

I add an IntValue to the notification frame after the notification is created.
I name the IntValue “Order” and the value is initially 0.

local Order = Instance.new("IntValue")
Order.Name = "Order"
Order.Parent = Notification -- replace notification with your variable
Order.Value = 0

In your snippet, I look for the order value and add 1 to it.
I change the position of the notification based on that value.

You would also need to know what the initial y position scale is. (I set it as 1)

local InitialY = 1

for i,v in pairs(NewItemFrame:GetChildren()) do
	if v:IsA("Frame") then
		local OrderOfV = v:FindFirstChild("Order")
		OrderOfV.Value += 1
 
		local Tween = game:GetService("TweenService"):Create(v, TweenInfo.new(1), {
			Position = UDim2.new(1,0,InitialY - OrderOfV.Value * v.Size.Y.Scale ,0)
		})
		Tween:Play()
	end
end

Again, this isn’t the best way to do it, but it’s what I could think of.

[Gromaniak85]

Thank you! That’s exactly what I have been looking for:)

Here’s a video showing the fixed animation in case anybody wants to see it;