this post is this really good and i’m now using it in my games, Thank you!
1 Like
The animation sequence (task.wait’s) was causing the script invoking the :Notify function to pause until the notification has dissapeared. To resolve this, I had to wrap the animation sequence with task.spawn . I suggest you also do this so other people wont be running into this issue. 
Fixed code:
task.spawn(function()
Tween:Create(notif.Shape, info, {ImageTransparency = (configs and configs[1]) or default[1]}):Play()
Tween:Create(notif.Shape.Scale, info, {Scale = 1.2}):Play()
task.wait(0.3)
notif.Shape.Image = "rbxassetid://11942813307"
Tween:Create(notif.Shape, info, {Size = UDim2.fromOffset(notif.Notification.AbsoluteSize.X, notif.Notification.AbsoluteSize.Y)}):Play()
Tween:Create(notif.Shape.Scale, info, {Scale = 1}):Play()
task.wait(0.1)
Tween:Create(notif.Notification.Texts, info, {GroupTransparency = (configs and configs[3]) or default[3]}):Play()
Tween:Create(notif.Notification.Icon, info, {ImageTransparency = (configs and configs[3]) or default[3]}):Play()
task.wait(duration)
Tween:Create(notif.Notification.Texts, info, {GroupTransparency = 1}):Play()
Tween:Create(notif.Notification.Icon, info, {ImageTransparency = 1}):Play()
task.wait(0.2)
notif.Shape.Image = "rbxassetid://11983017276"
Tween:Create(notif.Shape, info, {Size = UDim2.fromOffset(60, 60), ImageTransparency = (configs and configs[1]) or default[1]}):Play()
Tween:Create(notif.Shape.Scale, info, {Scale = 1.2}):Play()
task.wait(0.3)
Tween:Create(notif.Shape, info, {ImageTransparency = 1}):Play()
Tween:Create(notif.Shape.Scale, info, {Scale = 0}):Play()
task.wait(0.3)
Tween:Create(notif.Padding, info, {PaddingTop = UDim.new(0, 0), PaddingBottom = UDim.new(0, 0)}):Play()
Tween:Create(notif.Notification.Scale, info, {Scale = 0}):Play()
task.wait(0.3)
notif:Destroy()
end)
You should also do that in the “ServerConnection” LocalScript.
1 Like
This is much better than roblox’s default notification system! I would see myself using this in some of my projects, wish you the best of luck ! 
1 Like
Suggestion: Rather than changing the image directly from a smooth square to a circle, consider creating a frame and inserting a UiCorner instance within it. Then, tween the CornerRadius using Udim.new(). To achieve a circular shape, you can tween the CornerRadius to Udim.new(1, 0); for a smooth square, you can tween it to Udim.new(0.25, 0). This approach ensures a seamless transition between shapes. So thats what i did. If you would like to see how my version of the module performs, then reach out to me on Discord: 6laise
Edit: Changing the images is also not the most optimal solution. People with slower internet connections experience slower image loading, resulting in the notification’s background appearing invisible for several seconds.
Weirdly enough, UICorners don’t work well with ImageLabels set to Slice. UICorners also rounds off the sliced parts and it will just all messed up.
Thats why i said create a frame. Btw this is how my version looks.
Edit: As you can see i am tweening the CornerRadius instead of changing the images. This approach creates a seamless transition without any image changing. The recording may be a bit laggy but it looks way better in realtime.
Yeah, that’s the problem, UICorner does not offer Corner Smoothing.
So rounded corners look rough, especially in the part where straight and round meets.
but definitely not bad for an alternative.
Kay i just adjusted some of the animations and this is the closest it gets.
Edit: I changed the fading out animation a bit. If you don’t like it, then i can adjust it to look like the original. I changed it because it wasnt smooth/fast enough for me.
@blve_hxrizon
If you’re interested in seeing my version, you can find it here:
create.roblox.com/store/asset/17368353152
Feel free to utilize this or make any adjustments you see fit.
3 Likes
How can I make a working badge giver out of it when a player touches a part?
Badge Giver - Touch Part with ◉ Banner Notify
local BadgeService = game:GetService("BadgeService")
local BadgeID = "id"
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local bannerNotification = require(ReplicatedStorage.BannerNotification)
local function giveBadge(player)
if not BadgeService:UserHasBadge(player.UserId, BadgeID) then
BadgeService:AwardBadge(player.UserId, BadgeID)
bannerNotification:Notify("Notification", "".. player.Name.. " has been awarded the badge!", "rbxassetid://12966400024", 2, nil, player)
end
end
script.Parent.Touched:Connect(function(hit)
local character = hit.Parent
local player = game.Players:GetPlayerFromCharacter(character)
if player then
giveBadge(player)
end
end)
3 Likes
I tried it and it didn’t work.
1 Like
Could you provide me instructions on how to set it up because the neither the banner system or badge giver were working?
1 Like
Hey, since he isn’t answering let me help:
- At line 2, on
local BadgeID = "id"Change"id"with your badge ID!
2.Make sure you have the Banner Notify “addon(?)” installed!
Hope this helped, if you have any problems let me know!
1 Like
I try to using NumberOfActiveNotifications in client side and I got this:
ReplicatedStorage.BannerNotification_Storage.BannerNotificationModule:137: attempt to get length of a Instance value
I’m using that method in “Handler” LocalScript
local tween_service = game:GetService("TweenService")
local run_service = game:GetService("RunService")
local input_service = game:GetService("UserInputService")
local replicated_storage = game:GetService("ReplicatedStorage")
local info = TweenInfo.new(.5, Enum.EasingStyle.Exponential)
local bannerModule = require(replicated_storage:WaitForChild("BannerNotification_Storage").BannerNotificationModule)
print(bannerModule.NumberOfActiveNotifications()) -- Error
I created a Banner Notification component for roblox-ts and rojo/wally in this repository: YadBro/banner-notify.
1 Like
I’m sure it’s an easy solution… but I’m a bit new at scripting and I’m unable to solve my issue. I’m receiving the error “Unable to cast value to Object” at line 126 (specifically notifyEvent:FireClient()
I’ve tried adding print statements in the Notify function, adjusting the player value provided, and digging through the module script and I’m still unable to come up with something.
1 Like
Can you provide more information about the issue?
hey, i havent tried out this yet but im wondering if the ui is fully customizable? like i dont mean just changing the background color i mean like adding uistrokes to the texts, the background, changing fonts, changing the size, etc
Works well after an adjustment. I don’t know what loader our team uses, but the following steps were followed to get going with this:
- Wally plugin → download as shared dependency.
- In the package itself, the following code was inserted:
function module:Init()
if runService:IsClient() then
module:InitClient()
elseif runService:IsServer() then
module:InitServer()
end
end
Thank you for your help!