How could I create a UI effect like this?

Trying to make an effect like this, where the list of buttons staggers animation:

I don’t have an issue with any of the animation itself, but how I could actually create the list. From what I know, I can’t use a UIListLayout or something similar since I would be unable to modify the position, meaning I would have to create the list system myself. However, I’m unsure if there is a better solution, and if not, I am still unsure of how I could use the LayoutOrder property without a List since I need the frames to be sorted in a specific way. Thank you!

3 Likes

You can just manually arrange the frames in a list like structure. Considering that the frames are each of size (X, Y) (in scale) and their anchor point is set to 0 on the y axis, you can tween them as such:

local Y_OFFSET = 10
local ELEMENT_COUNT = 5

for index = 1, ELEMENT_COUNT do
    local newFrame = TEMPLATE:Clone()
    -- Assign the properties
    newFrame.Position = UDim2.new(0, 0, 0, (index * newFrame.AbsoluteSize.Y) + Y_OFFSET)
end

Pretty sure u can figure out the rest from here. Also, it’d be better if you figured out a scale value instead of the newFrame.AbsoluteSize.Y.

2 Likes

UIListLayout remains a viable option. You can stack and arrange invisible containers while having actual, equally sized frames with content inside of them that can move freely and unconstrained.

And to make the transitions even smoothner and more fluid, Fractality’s Spr - Spring-driven motion proves very useful.

3 Likes

What do you mean by this? When using UiListLayouts I was unable to change the positions of frames.
Edit: I understand what you mean now lol, I’m doing this. Thx for the help!! :smiley:

2 Likes

I’m glad that helped.

I was just about to send these two images because my wording really was a bit confusing.

image image

UiListLayout locks the frames, but not descendants. And ‘Element’ has ClipsDescendants disabled.

Good luck :slight_smile:

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.