ListLayout animations

[MrMedian]

As a Roblox developer, it is currently too hard to make animated GUIs with ListLayout. What I mean by this is that I would like to make a list that when a new item is added to it, it does some kind of animating to move the other items out of the way instead of just jumping to the next position.

There are 3 main behaviors I think it should have:

1. The items that need to move out of the way should tween to their next position.
2. The item that is being added should have the ability to tween in as well (it might be easier to add a method to ListLayout to add an item with tween effects).
3. An item that is being removed should have the ability to tween out (this would require a method of ListLayout that removes an item with tween effects).

To see a good example of what this kind of animating could accomplish, paste this code into a LocalScript and watch how it animates:

local StarterGui = game:GetService("StarterGui")

wait(1)

StarterGui:SetCore("SendNotification", {
	Title = "URGENT";
	Text = "This is important";
})

wait(0.5)

StarterGui:SetCore("SendNotification", {
	Title = "URGENT";
	Text = "This is important";
	Duration = 3;
})

[Tiffblocks]

Currently the way you do this is by:

1. Creating an invisible dummy frame in the desired position, starting out with a size of 0.
2. Tween the dummy frame to the final size.
3. When that tween completes, place your desired object somewhere offscreen, parented to a ScreenGui.
4. Tween the position of your desired object to the AbsolutePosition of the dummy frame
5. Remove the dummy frame and reparent the desired object into the layout.

Because it’s possible to do fairly easily using some Lua code, and because it would require a lot of added complexity to automatically support all of the different usecases for transitions, we’re not currently looking into adding this as a built in feature.