How do I make an animated UIListLayout

Help and Feedback Scripting Support
#1

I’m working on a notification system and I want to make pretty much an animated UIListLayout so when a new notification comes in everything in the frame moves down the right amount.
I’ve tried this:

script.Parent.MouseButton1Click:Connect(function()
	local clone = script.Parent.Frame:Clone()
	for i, v in pairs(script.Parent.Parent.Frame:GetChildren()) do
		local success, err = pcall(function()
			local position = UDim2.new(v.Position.Y.Scale + clone.Size.Y.Scale, 0, 0, 0)
			v:TweenPosition(UDim2.new(position), Enum.EasingDirection.InOut, Enum.EasingStyle.Quad, 0.5, true)
		end)
		if err then
			error(err)
		end
	end
	clone.Visible = true
	clone.Parent = script.Parent.Parent.Frame
end)

But it hasn’t been working and no errors have come from the pcall.
Any help is appreciated.

#2

The child’s position, which’s controlled by UIListLayout, can’t be adjusted from a script. If you’re wanting to create an animated frame, you’d need to do it separately (remove UIListLayout) - manually sorting them out to their corresponding place.

#3

I dont have any UIListLayout inside the frame. I just want it to work like a UIListLayout but tweened.

#4

Oh, right, I thought you consisted of it. Is there a particular error?

#5

No, I assume they just won’t move down because the frame that holds the notifications are filled with frames, but only one shows up.

#6

Could I see the current progress of your workplace? I need to understand the process of animating.

I’d advise to replace

v:TweenPosition(UDim2.new(position), Enum.EasingDirection.InOut, Enum.EasingStyle.Quad, 0.5, true)

with

game:GetService("TweenService"):Create(v, TweenInfo.new(.5, Enum.EasingStyle.Quad, Enum.EasingDirection.InOut, 0, false, 0), {Position = UDim2.new(position)}):Play()

hence TweenPosition has incapabilties, and may cause trouble for the process.

There’s also no point in calling pcall(function() as tweening will always be successful, when described correctly.

#7

Here is what I have
image
Currently, as in the script, I’m duplicating the frame ScreenGui.Notify.Frame then moving it to the Notification holder ScreenGui.NotificationHolder then I’m moving everything in the Notification holder down the size of the notification ScreenGui.Notify.Frame then parenting it to the notification holder.

image
image1531×784 292 KB

Also, I’ll try that real quick.

Also I did rename some of the things since I posted this, I already updated the script to be updated for those renames.

#8

Okay, I’ll attempt to re-create that into my own workspace to figure out the issue. Let me know if anything tends to work out.

#9

I can send you the file if you’d like.

#10

That’ll be fine alongside, you can publish it here.

#11

notiftest.rbxm (7.7 KB)

#12

Alright, I presume this is the final product that you require:

local button = script.Parent; local holder = button.Parent.NotificationHolder
local ts = game:GetService("TweenService")
button.Activated:Connect(function()
	local clone = button.Frame:Clone()
	for _, i in pairs(holder:GetChildren()) do
		local pos = UDim2.fromScale(0, i.Position.Y.Scale + .224)
		local tween = ts:Create(i, TweenInfo.new(.5, Enum.EasingStyle.Quart, Enum.EasingDirection.InOut, 0, false, 0), {Position = pos})
		tween:Play()
	end
	clone.Visible = true; clone.Parent = holder
end)

kept it clean and organised, hence should be good to go. If there’s any changes you want me to do, let me know - otherwise you’d acknowledge how to fix them.

3 Likes
#13

Oh my god you are an absolute legend. Thank you so much.

1 Like
#14

It’s alright! I’m glad that I was able to assist you - best of luck scripting for the future!

1 Like