Creating a Dynamic Notification Effect

Hey everyone,

I’m working on a game, and I’m attempting to have notifications that will appear, some will have different durations than others based on their content or importance. The problem is, it’s not dynamic. If there are two notifications, and the one under the bottom expires, the top one doesn’t move to fill the now-empty space, that’s the goal.

I’ve read through this topic and I’m still not too too sure on how to complete this task.

LocalScript Code
_G.notif = function(NotificationText,Title,Duration)
	if Duration == nil then Duration = NotificationDuration end
	local Notifications = UI.Notifications:GetChildren()
	if #Notifications >= MaxNotifications then
		Notifications[1]:TweenPosition(UDim2.new(1.5, 0, Notifications[1].Position.Y.Scale, 0),"InOut","Linear",0.2,true);wait(0.2)
		Notifications[1]:Destroy()
		for i,v in pairs(Notifications) do if v ~= nil then
			v:TweenPosition(UDim2.new(0.97, 0, v.Position.Y.Scale - 0.12, 0),"InOut","Linear",0.2,true)
			end
		end
		local NewNotification = UI.NotificationTemplate:Clone()
		NewNotification.Visible = true
		NewNotification.Name = tostring(#Notifications+1)
		NewNotification.Parent = UI.Notifications
		NewNotification.MainFrame.Information.Text = NotificationText
		NewNotification.TopFrame.NotificationLabel.Text = string.upper(Title)
		NewNotification:TweenPosition(UDim2.new(0.97, 0, 0.85, 0),"InOut","Linear",0.2,true)
	else
		for i,v in pairs(Notifications) do
			v:TweenPosition(UDim2.new(0.97, 0, v.Position.Y.Scale - 0.19, 0),"InOut","Linear",0.2,true)
		end
		local NewNotification = UI.NotificationTemplate:Clone()
		NewNotification.Visible = true
		NewNotification.Name = tostring(#Notifications+1)
		NewNotification.Parent = UI.Notifications
		NewNotification.MainFrame.Information.Text = NotificationText
		NewNotification.TopFrame.NotificationLabel.Text = string.upper(Title)
		NewNotification:TweenPosition(UDim2.new(0.97, 0, 0.85, 0),"InOut","Linear",0.2,true)
		delay(Duration,function()
			NewNotification:TweenPosition(UDim2.new(1.5, 0, NewNotification.Position.Y.Scale, 0),"InOut","Linear",0.2,true);wait(0.2)
			NewNotification:Destroy()
		end)
	end
end

Thank you for your help!

3 Likes

The easiest way to accomplish this is by using a UIListLayout. This will automatically position the UI objects based on the ListLayouts properties.

The objective is to have them animate on and off the screen, you cannot use UIListLayout here to my knowledge. If you can, I don’t know how you would apply it.

1 Like

After more testing, and head scratching, I discovered that adding these lines of code to the dismissing section works flawlessly.

for i,v in pairs(Notifications) do
	v:TweenPosition(UDim2.new(0.97, 0, v.Position.Y.Scale + 0.19, 0),"InOut","Linear",0.2,true)
end
2 Likes