Weird cut-off with ClipsDescendant

[Yuriko_Tsuyuki (Yuriko)]

-- Existing notification frame, title, and text
local dropDown = script.Parent
local titlea = dropDown.TextHolder.Title 
local texta = dropDown.TextHolder.Text

-- Hide the UI element initially
dropDown.Visible = false

-- Define a function to drop down and expand the UI element
local function dropDownAndExpand()
	dropDown.Position = UDim2.new(0.5, 0, -1, 0)
	dropDown.Size = UDim2.new(0, 10, 0, 100)
	dropDown.Visible = true
	dropDown:TweenPosition(UDim2.new(0.5, 0, 0, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quad, 0.5, true)
	wait(1)
	dropDown:TweenPosition(UDim2.new(0.5, -200, 0, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quad, 0.5, true)
	dropDown:TweenSize(UDim2.new(0.308, 0, 0.17, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quad, 0.5, true)
end

-- Define a function to contract and shoot up the UI element
local function contractAndShootUp()
	dropDown:TweenSize(UDim2.new(0.008, 0, 0.17, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quad, 0.5, true)
	dropDown:TweenPosition(UDim2.new(0.5, 0, 0, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quad, 0.5, true)
	wait(1)
	dropDown:TweenPosition(UDim2.new(0.5, 0, -1, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quad, 0.5, true)
	wait(1)
	dropDown.Visible = false
end

-- Define the notification function
local debounce = false
local function notification(title, text)
	if debounce == false then
		debounce = true
		-- Set the title and text of the notification
		titlea.Text = title
		texta.Text = text

		-- Drop down and expand the UI element after 2 seconds
		wait(0.5)
		dropDownAndExpand()

		-- Contract and shoot up the UI element after 5 seconds
		wait(5)
		contractAndShootUp()
		debounce = false
	end
end

-- Call the notification function with custom title and text
game:GetService("ReplicatedStorage").AdministrativeEvents.NotificationEvent.OnClientEvent:Connect(function(a,b)
	notification(a,b)
end)

I’m using the ClipsDescendant property to make it so the text sort of slides onto the background. However, on certain screens, this sort of cuts off as above.

How do I make it so it fits and does not cut off on all screens?

I’ve attempted to do the following:

• UI Scaling plugin
• Removing all constraints
• changing the size via script

My efforts are unsuccessful.

[DataSigh]

Try adding a UIAspectRatioConstraint

[Yuriko_Tsuyuki (Yuriko)]

This is an entirely new element to me. How would I apply it in this case?

[Yuriko_Tsuyuki (Yuriko)]

It is now offcentered.

[Yuriko_Tsuyuki (Yuriko)]

I have gotten rid of the sliding effect all together, I’ve spent hours at this and I give up.

[ThatSirWaffles (SirWaffles)]

I know you’ve given up, however I’ll still try to help you out. I’m also not the greatest at explaining things, so please tell me if you’re confused.

First off, this might not be what everyone does or finds optimal, but for a UI element this small, I’d recommend that for its size, you make it a constant height and width in pixels across all screens, so only using offset (in a Udim2, the second and 4th numbers will represent your offset in pixels).

Now, for the title. We want it to be centred, so first of all, we’ll make it take all the available horizontal space. For that, you’ll need modify the size of it to have the X scale of 1 (the first number of your size should be 1, and second should be 0, then followed by whatever else you had). If your AnchorPoint is at 0, 0, the position is at 0, 0, 0, 0 and the “Title” TextLabel has its text set to be centred, then it should hopefully all be good.

You should be able to apply basically the same principal to your main notification text, except there, the position might be different considering you need space for the title.

However now, since you want to animate it, they’ll fully be visible if they have an X scale 0, and fully be out of the frame at a scale of 1, since 1 can also be seen as 100% of the size of the parent frame. You can just tween between the two to achieve the hopefully desired effect.