Making Notification Panel Text Fit And Scale To Left Middle Of Screen


I would like to achieve a fading in notification frame. When a notification is sent to a player, it’ll tween from the left side outside the screen into the left side centered in the middle. The frame size will automatically resize to make the text inside the frame fit perfectly. The countdown timer for the notifications will fit the same way no matter how big the frame is scaled. No matter how big the frame is scaled, the frame will still be centered in the middle of the screen.

Here’s a photo example of what I’d like it to look like and an arrow as an example where the notification frame should tween from outside the screen to the inside

The photo is what the final product should look like, the arrow is where the frame comes from and ends up in that photo.

Any tips or advice or ways to go about this would be greatly appreciated!

For the Text, you can use TextScaled, as that will automatically size the text to the frame. For the Frame, you just need to set the size to something like this: 0. 721, 0, 0.237, 0 instead of the default Roblox setting with pixels. The first method scales the frame the same size on any device, but the default Roblox one sets the size by using pixels, and because each device has a different amount of pixels(for example: lets say a phone has 700×700 and a PC has 1400×1400. The roblox method is gonna make the frame really big on the phone and really small on the computer). Not sure if this is what you asked for, but this is how I understood your post.
Have a great day!:grinning:

Hey, hope you’re keeping well.

If you don’t already own this plugin, I’d highly suggest investing in it. It’s incredibly easy to use and so unbelievably helpful, 100% worth investing in.

You can set the frame’s AnchorPoint property to easily “centre” it halfway down the screen without having to do complicated calculations. Modify the scale component of the frame’s location to position it.

local notifLabel = ...

-- use a Vector2 to set the AnchorPoint property
notifLabel.AnchorPoint =
    0,   -- the default for X, represents the far left of the frame
    0.5  -- makes the frame's "centre point" halfway down the frame, regardless of the frame's size

-- the following changes the frame's SCALE position
-- * using OFFSET wouldn't change the frame's position with screen size

notifLabel.Position = UDim2.fromScale(
    0,   -- physical X position is to the left of the screen 
    0.5  -- physical Y position is halfway down the screen, regardless of screen size

As @Chocolate9343 suggested, you can set the TextScaled property to true to resize the text accordingly.