Create scrolling without scrolling frames?

I’m trying to create something like what I saw in My Droplets. I circled the part I’m pointing out. How it kinda cuts off the next item, and when you click the buttons it like tweens over.



I’ve got mine setup like so

But I’m not sure where to go from here. What I did in the past was just create 2 seperate frames, each with boxes in it, and just change the visibility between each frame when the clicked each button, but I want to create a more seamless effect with tweening, etc.

Any thoughts/ideas?

EDIT Just found out about UIPageLayout, is this what I’m after?? I’ve tried it in the past but had no clue how to properly implement it and found the DevHub page had no real tutorial on it
https://developer.roblox.com/en-us/api-reference/class/UIPageLayout

You can have the main frame ClipDescendants and then have an invisible frame inside of it that you tween to the left and right. The invisible frame could have all the buttons in it.

4 Likes

To create a custom scrolling frame, an object oriented approach is pretty much required to keep track of the different elements in the scrolling frame and their data. Once you have that setup, all you need to do is render the scene. Clip descendants will fix the bounds and overshooting problem.

1 Like

You could use UIPageLayout, or you could enable ClipDescendants on the main frame (holding all of the buttons).

It would look something similar to this

local FrameHoldingButtons = frame.location -- however your game indexes that frame
local buttonLeft = button1.location -- wherever you index the button to move it to the left
local buttonRight = button2.location -- wherever you index the button to move it to the right (the one circled)

local buttons = FrameHoldingButtons:GetChildren()

buttonRight.MouseButton1Click:Connect(function(onClicked)
    for _,v in pairs(buttons) do
        if v then
            v:TweenPosition(UDim2.new(0, -50, 0, 0), "Out", "Quint", 0.5)
            -- Change the first 2 numbers to match how you made the UI, either offset or scaled, and I would tween their position to the right by 1 box (using the box's size as the amount it moves to the left to show boxes on the right)
            -- Essentially, if you click the right button the boxes shift to the left (to reveal more on the right) and if you click the left button the boxes shift to the right (to reveal more on the left)
        end
    end
end)

Please NOTE, this is a very simple script outlining how you should go about doing this, this script does not include error checks, limit checks, or actual gameplay functionality.