Simple Scrolling gui help

Help and Feedback Game Design Support
#1

So currently my scrolling gui is really water-like. How would i make it so it like snaps to a grid?

My scrolling gui:

The scrolling gui i want:

I was thinking about using the canvas position but it hasnt really been working well so far. Any suggestions?

#2

It seems like you’re scrolling on the X axis some. In your case, set ScrollingDirection to Y.

#3

How would i get the snappable grid thing thiugh?

So it snaps to the closest frame instead of staying in middle or whatever

#4

I had never heard of this property, but:

https://developer.roblox.com/en-us/api-reference/property/ScrollingFrame/ElasticBehavior

Perhaps set ScrollingFrame.ElasticBehavior to Never?

#5

What i’m trying to say is i want it to snap to a grid. You notice in the clash royal and app store video when they scroll it always lands on a specific part. Like tweening to that specific part i stead of being whatever the player went to it like automatically tweens itself to the specific area. For the app store whener you scrolled it would always put the next part on an app when they let go. On clash royal it would always put it on the players next tab when they let go. Is it possible to script that so it snaps like that? Its like how some games have grids when building so the player can edit without clipping but for gui. To snap to the closest tab grid when they let go of the scrolling thing

#6

That requires a little bit of scripting and two buttons. Tween the CanvasPosition to a preset position that you’ve found when scrolling yourself. Once that script is written, disable ScrollingEnabled.

#7

I want it so they can scroll though (clash royal and app store dont have to do that)

#8

Instead of tying the scrolling to a button, tie it to a CanvasPosition change, and don’t disable scrolling. I’m not sure if it will work.

#9

Do you have any ideas on how i would script that? I dont know how to detect canvas changes

#10 
ScrollingFrame.Changed:Connect(function(prop)
    if prop == "CanvasPosition" then
        --code
    end
end)
#11

If i have multiple tabs that wont work though. Also if i wanted them to scroll back to previous tab it would work as well

#12

Format the code so it checks for each tab. I’m not going to write the code for you; if you don’t know how that can be done, try hiring someone.

#13

Do you know if i can get an example? Thank you this is really helpful

Edit: after look at your scrolling frame changed property it doesnt look like that would work since it would be trying to detect if something happened to the scrolling frame not the canvas position

#14 
ScrollingFrame.Changed:Connect(function(prop)
    if prop == "CanvasPosition" then
        -- this is pseudocode
        if the item is the first one then
            move position to second one
        elseif the item is the second one then
            move position to third one
        -- etc.
        end
    end
end)

That’s why I’m checking if the CanvasPosition property was changed with the first if statement. If you want to try it with a print statement, go ahead.

#15

So like:

ScrollingFrame.Changed:Connect(function(prop)
    if prop == "CanvasPosition" then
        if prop and Canvis.Position = 0,0 then
            Canvas.Position = 1,1
        elseif prop and Canvas.Position = 1,1 then
             Canvas.Position = 2,2
            —would be able to move back.
        end
    end
end)
#17

the point isnt that its off roblox but how do i program it to be on roblox? im guessing using tween service but anything is possible

#18

You don’t need to check if prop exists, it does nothing & you’re already doing it with the “if prop == “CanvasPosition” then”

Otherwise, basically yes but you should probably use :TweenPosition instead of just setting the position.

1 Like
#19

i also found out that UiPagelayout did it automattically or somethinhg