You can now integrate SCROLLING in Rive! New Feature

Key Takeaways

a few days ago Ry released the ability to integrate scrolling sections within layouts both horizontal and vertical scrolling this feature also integrates a number of different options that allow you to really fine-tune said scrolling so in this video I'm going to show you how to build a horizontal scrolling section of cards so let's get started all right so here we have a new artboard I'm just going to choose something like 1920 1080 just for this quick demo and to get started what I'll do is take the um background color we're going to make get almost black right around there all right great so inside of here we're going to create um kind of what you would call an overall just layout container and to do that we're just going to click ADD child layout and we'll just call this container all right and inside of there we don't want a background for this so we'll just click the minus for the background and then inside of here we're going to create another layout all right and inside of here um we're also not going to have a background so with that selected let's go over here we're going to get rid of that we're also going to add some a lot of padding on the overall container so the padding I guess we'll have um the top and bottom we'll just do 100 and then 100 here as well and this little outline is because of the layout so we can we can toggle that layout outline feature off all right so in here we're going to call call this content and then we're going to have our individual cards let's say for instance we have a cards and we want a horizontal scroll situation to occur okay so the first thing is I'm going to create a layout inside of there so add child layout and inside of this one uh this layout we're just going to rename this to card and for the card here we don't want it to fill we want to have a height that is I oh the height is going to be fill but the width will be fixed because we're doing a horizontal layout so now we can kind of construct you know what we envision to be the height of our cards or the width of our cards to be right there looks pretty good I will change this background to something just slightly um lighter than the background and we'll also get the corner radius up just a tad bit yeah around 15's pretty good okay now that we have that what we can do is with our content we can see if we take our card real quickly you don't have to do this and we replicate it we could see everything um off the screen essentially and that's because our content doesn't have clip so we want to clip the content um right there now we could clip it here but it actually makes sense to do it in the overall viewport container right here so let's clip that instead and we can clip this one as well okay not instead but as well I guess so now we could take the content and we can add some horizontal Gap right here ah there we go all right now within our card right here this element um let's quickly just create some dummy content so I'm going to take the type tool left click right here of course it's not inside the card yet but it will be um scroll fun I guess we could say and we'll take that text um I've been liking to use man rope lately and then we'll make that bold increase the size scroll fun right around there looks pretty good I'm going to go ahead and duplicate this so contrl c contrl v put this down here and then inside of here I'm just going to extend this out a bit and we're going to make this much smaller like size 18 make it regular maybe make it size like 22 okay and then real quickly I'm going to type in here something like this is an absolutely Delight how stupid delightful way to integrate scroll stuff in your R projects okay the worst copy ever right okay so now I'm we have these two text elements let's increase the spacing here just a bit okay so now we'll take both of these we're going to select both and we are going to layout the selection so you can rightclick wrap in layout all right and then we'll take layout and shove it inside of card two which happens to be this card then we can go ahead and take Card two and we can add some padding around it so let's see here padding um just a get things lined up 40 and 40 looks good and then yeah let's put it down there I think right there would be just fine now let's take our card we want the width to be fil all right the height we can leave at hug and then inside of here we also have our layout which is set to hug hug for the title and then also um we want to do fill for that as well okay so that was just a quick you know just so we have some card based content in here um one thing I'll do is decrease that okay now so kind of silly looking cards obviously you might want to have an icon or fill this out little little bit more content but that's you know for another video so what we'll do now is I want to take um content here and real quickly I'm just to get one out there I'm going to duplicate it except I'm going to get everything inside of it delete all right and we're going to take the overall container and we're going to change this to a column all right so now we have content underneath and for the height we don't want to fill it um we could put hug now before I do that I'm going to add a child layout this is going to be our scroll bar by the way so the child layout um we can see we have um our layout here and we're just going to decrease the size kind of like a thin scroll bar right there and then hug is just uh I'm sorry the height for the content and we'll just call it scroll container is going to be hug okay so now we can take our overall container and increase the vertical Gap wait yeah that's right the vertical Gap like right around there that looks pretty good and then for our actual layout we'll just call this thumb and for the width it's going to be fixed right around here it doesn't matter where because it's going to automatically resize here in a second so um before we integrate the thumb though what we can do is we can start tying this up to the system um for scrolling so the first thing is to take our content um content container and then we go to constraints and we add a scroll and we designate this as the content all right so if we go to animate now and hit play then it's not working why is that oh that's because it's set by default as a regular vertical scroll but that's not what we're trying to integrate so we go back here change this to horizontal now you can see we have other um options here such as the strength the physics elastic we can clamp it we can snap it and you can play around with all of those features just to see what they do one thing that we need to do is take our content container and based on this being a horizontal scroll then the width needs to change to hug so now if we go back to uh animate and we could pull this over and drag it now so that's cool but in order to get the actual little thumb tracker working here the scroll bar what we can do is come down here to thumb and we place a constraint this time with the scroll bar thumb designation all right and we can also change change you know this to horizontal um and we also need to specify the content container that it will control all right so notice how it automatically resizes this element right uh the the actual container based on the amount of content that's inside so now if we hit play we can take this and drag it and now it is working look how cool that is and this also works by dragging so super cool um just to give you a little bit of a quicker idea we can delete those cards that didn't have the content and let's say you know you would take time to modify certain properties and make these unique from each other you know maybe this has uh color here we'll add some different color here kind of ugly colors none nonetheless if I hit play u we could kind of see how they all work in unison with each other very very cool of course we can also real quickly last thing we'll do is take this um and change the content here to snap which is very cool so the way this works is if we hit play now um it'll snap to certain card locations based on how much the cards are in the viewport very very cool all right everybody if you're interested in learning more about RVE make sure to check the YouTube description here for my upcoming Ry for web course where we're in 2025 very shortly around the corner we're going to be creating a full course that's going to show you how to utilize RVE for web layouts specifically all right everybody I will see you soon and goodbye