How do I make a custom notification?

Help and Feedback Scripting Support
#1

I’m trying to make a custom notification like this. As you can see something is coming down.
Capture
What I’m trying to achieve here is the pushing effect. A new notification pushes the old one.
I saw Roblox’s Core GUI notification have this effect, however, it’s not customizable, so I decided to make my own. How would I go about making an effect like that?

4 Likes
#2

You could use tweening:
So like the old notification goes up while the new notification comes from the left/right.

Sorry I don’t really have any code to show.

1 Like
#3

You can easily get create with it without having to ask: Make the UI, customize it so it can easily be edited later with a script. The wanted position would be at the bottom right corner (i’m assuming) you have to determine its position, it would be simply UDim2.new(1,0,1,0) which is saying “place all the way to the right, and all they way to the bottom”, although like that a part of the UI would be offscreen, so you have to use the size and negate it UDim2.new(1, -UI.Size.X.Offset, 1, -UI.Size.Y.Offset), you could as well simply set AnchorPoint property to Vector2.new(1,1). Play with the position however you want, you may wanna even offset the Y axis a little bit up as well. Then you move it back a little bit, find a good value for that. And when you need a notification, tween it to the position we decided ealrer

1 Like
#4

You can achieve this by simply making an UI for it. Add a ScreenGui in the StarterGui, add UI elements, customise them, and finally add a script that would fire when you want the notification to pop up. In the script, you can code it in such a way that the frame would tween down, show the notifications, wait for a certain time and then tween the frame back.

To achieve the “pushing effect”, you can use ROBLOX’s TweenService. This can be done in two ways. One way is:

local ts = game:GetService("TweenService")

local ti = TweenInfo.new(numberTime, EnumStyle, EnumDirection, numberRepeatCount, boolRepeat, numberDelay)
local goal = {
    frame.Position = UDim2.new(yourPos)
}

onFired:Connect(function()
    ts:Create(frame, ti, goal):Play()
end)

However, there’s a simpler method to tween UI elements. Here’s a pseudocode of how it’s done:

onFired:Connect(function()
    frame:TweenPosition(UDim2.new(yourPos), EnumDirection, EnumStyle, numberTime)
end)

Hope this helped!
-pranvexploder. :smiley:

2 Likes
#5

Thanks, but what I’m trying to achieve here is when there’s a new notification, it pushes the old one down so the newer notification could show up.

#6

I’ve never done that before, so this is pure speculation. You could add a quick FindFirstChild check on to the onFired event to check for any notifications already on the screen. If the check returns true, then you play a modified tween.

1 Like