Create a Horizontal Scroll With Snap in WordPress using Motion.page

In this tutorial, you'll discover how to create a captivating webpage section that pins to the top of the page during scrolling, while simultaneously enabling horizontal scrolling within inner sections. Learn to implement a snapping behavior to enhance your horizontal scroll effortlessly with a handy code snippet for added interactivity.

Introduction

This tutorial demonstrates how to create a horizontal scrolling effect with a snapping feature using Oxygen Builder and Motion Page. The effect allows sections to scroll horizontally and snap into place as the user scrolls down the page.

Steps

  1. Setting Up the Page in Oxygen Builder:
    • Create a new page and open it in Oxygen Builder.
    • Add a full-height section (Section 1) with a background color.
  2. Creating Horizontal Scroll Sections:
    • Add another section (Section 2) that spans across the x-axis.
    • Inside this section, create three more sections (Sections 3, 4, and 5) for horizontal scrolling.
    • Wrap these sections in a div named 'horizontal scroll wrapper'.
  3. Styling the Sections:
    • Apply different background colors to each section for visual distinction.
    • Add a class 'H scroll section' to control the size and layout of the sections.
    • Set the flex shrink property to zero for each section.
  4. Setting Up the Pin Trigger:
    • Wrap the horizontal scroll wrapper in another div named 'pin trigger'.
    • Assign a class 'H scroll trigger' to this div.
    • Set the width of the wrapper to 100%.
  5. Configuring the Scroll Trigger in Motion Page:
    • Create a new timeline in Motion Page named 'horizontal scroll snap'.
    • Use a scroll trigger to pin the 'H scroll trigger' element.
    • Set the pinning to start and end at specific points, adjusting the scroll speed.
  6. Animating the Horizontal Scroll:
    • Target the 'H scroll wrapper' for animation.
    • Translate it on the x-axis by -200% to create the horizontal scrolling effect.
    • Adjust the animation to be more linear.
  7. Implementing the Snapping Feature:
    • Write custom GSAP code in the trigger event to enable snapping.
    • Target the sections with the class 'H scroll section' for snapping.
    • Configure the snapping to occur at the length of each section.
  8. Finalizing and Testing:
    • Save the changes and test the horizontal scroll and snapping effect on the front end.
    • Ensure the sections snap into place as intended when scrolling.

Conclusion

This tutorial provides a clear guide on creating a horizontal scrolling effect with a snapping feature in Oxygen Builder. The process involves setting up sections, configuring scroll triggers, animating the horizontal scroll, and implementing GSAP code for snapping. This effect is ideal for creating an interactive and engaging scrolling experience on a website.

Video transcript

View full
Hide

Hello guys, in this tutorial,

I want to show you how you can create a horizontal scrolling effect, but also we will be implementing with this a snapping feature. So let me show you what I mean. So if I scroll down on this page, we'll reach a pinned element, which is this one, and this will scroll horizontally, and it's also snapping automatically, as you can see. So there are three sections there, and then after that, we go down here to this final section, and the same when you go back up, it's gonna pin here. So we're currently on a pinned element in motion page, scroll up just one click on the mouse wheel, and the same again here. And you can see we have this snapping effect. You can also use the scroll bar like this, the scroll wheel, sorry, and if you leave it, it will snap to the nearest or the next section. Okay, so let me show you how I achieve this using motion page and oxygen Builder.

Okay, so like always, I will be using oxygen Builder to create this, and I have already just set up a blank page called 'horizontal scroll snap,' so I'm just going to edit this with oxygen. Okay, so now I'm in oxygen. All I'm going to do is set up my sections. First, we want a section which will take up the whole height of the page. So let's do that, a section here, and I'm just going to edit these manually on the ID. So I'm just going to do height 'viewport height 100,' give it a background color. Open up the structure pane here so I can see what's going on. We'll just call this 'section one.'

So then below that, we want another section which will span across the x-axis, and within that x-axis, we want three sections. So I'm just going to duplicate this one two, three times. This is going to be 'section two,' 'three,' and 'four.' And then we want a final one which will be at the bottom, 'five.' So what we want to do with these three sections here is put them in a container. So I was going to wrap these with a div.

Okay, and this is going to be called 'horizontal scroll wrapper' for the horizontal axis. So let's do 'H scroll' for 'horizontal scroll,' and then we'll do... I'm also going to put a class on here called 'H scroll wrapper,' and on this class, we just want to make this Flex, by row, like that. Okay, and then we also want to pin this element. So what I'm going to do, first of all, just so I know what's happening, I'm going to change the colors of these sections.

Okay, so as you can see, we do have a slight issue which we will fix here in a second. And then let's make this one purple, something like that, looks like alright. So this is what we've got. So for the sections, I will actually add a class, and the class is just going to be 'H scroll section.' And then what I'm going to do is put this same class on each one of these, on this one as well. And now what we can do is on this class, we can control the size here. So what I'm going to do is just make it 100 wide, so 100 wide, and what we'll also need to do is, by default, when we have a flex like this, everything inside of it needs to be... let's shrink zero. So let's do that on this class here, so go to layouts, and then 'flex shrink' needs to be zero, and because this class is applied to all of these sections, it's going to apply to all of them. So 'flex shrink' zero, this is set to one by default, so we'll just need to put that to zero. And then this is actually what we want, which is good.

And finally, so what we want to happen is when we scroll down, we want the scroll bar, when it hits here, we want the scroll bar to continue going down, but we don't want the section to move because we want the section to actually translate on the x-axis going horizontal. So we don't want it to keep going down like this. So we'll need to use the pin element in motion page in order to do that. We'll need some trigger. So the easiest way to do that is to wrap this in a div again like so. This is going to be our pin trigger. And I'm going to give this a class as well, called 'H scroll trigger,' like this. And then just to fix this, what we'll need to do is on this wrapper, we'll just need to give this a width of a hundred percent, like so. Oh, that's still there, like that. And that's basically the setup that we'll need, and now we can do the rest in motion page. So I'm going to save this and I'm going to open up motion page over here.

Okay, so what I'm going to do is create a new timeline, and I'm going to call this 'horizontal scroll snap.' I'm going to find our page that we've just created, so that is 'horizontal scroll snap,' right here. Okay, so as you can see, we have our elements. So what we'll need to do first is use 'scroll trigger.' We want to lock this to the scroll bar. We don't want any delay on this. I want to use a pinned element. The pinned element is going to be our trigger that we just created, so let's do 'H scroll trigger.' We also want to make the selector here the same thing, so we want it to start when this element reaches the top. I'm actually going to put this to zero, so you can see the green lines move to the top. So once this element reaches this, it's going to start pinning and ends. When I'm going to do the selector again.

I'm going to use the same element, so we'll target the class. We also want this top, and this time I'm going to put minus 300. The reason I'm doing this minus 300 will just make it slower when scrolling. So as I'm scrolling down here, this is actually pinned now, as you can see, and it's pinned for quite a while. It's pinned for minus 300 percent. So the red line is actually up way up here, minus 300. So the further away this is, if this is, look, minus a thousand, this is going to be pinned for a very long time, and you can see that the scroll bar became really small. So this just essentially means when this is scrolling horizontally, it's going to scroll more slowly. When this is usually like minus 100, it scrolls really fast compared to scrolling down. So when you scroll down like this, it's normal, but then scrolling across horizontally, it actually goes really, really quickly. So I found a good number for this use case is minus 300. So that's the setup here for the scroll trigger.

Now, what we want to do is create our animation. First, we'll need to target our wrapper. Well, let's do that by typing 'H scroll wrapper' like this. Over that, you can see it's highlighting the whole thing here. And all we need to do for this is on the two, we want to translate it on the x-axis by minus 200 percent. So as you can see, as I scroll down, I'll use the scroll bar here. That's pinned, that's a hundred percent, and that is minus 200. And the pin is finished, and there it goes.

Okay, so one more thing I'm going to do is to make it more linear. I'm just going to select this and use 'none' here. Save timeline. Let's have a look at this on the front. So I will just say, guys, my scroll wheel is actually a little bit broken, so it might be a little bit jumpy sometimes when I scroll down; it actually goes up. That's not Motion Page, so that's just a broken mouse. So I'm scrolling down here, scrolling down, scrolling down, all right. So that's the horizontal scroll.

And we did have one user in our tickets asking how he can use a snapping effect for the horizontal scroll. So I'm going to show you how we can do that now as well. So all we need to do for that is just go up here, go back to the trigger event, and we want to write some custom code in here. So in here, we need to write 'snap,' this is gsap code built in, 'snap one.' We'll do a forward slash like this, and then we'll do 'gsap .utils to array,' and here we want to target our section; we want to snap the sections. So I'm going to type here 'dot page scroll section' like this, and then we want to snap it per length of the section. So length we want to do -1 like this. And now what this is going to do when I scroll down, this is only going to work for the sections with the class. So remember, in Oxygen, we only gave these three here the class. As you can see, 'H scroll section.'

So I'm going to scroll down; we've hit the pin, and automatically, that's just snapped to the next section. If I scroll down just one notch on the scroll wheel, it will snap like that. And then we come out of the pin. We'll save that one; we'll check that on the front as well.

Okay, so I'm going to scroll down, scroll down, and there's a snap, and that's it. And it should also work, yeah. So I'm just... I'm going to drag this up just ever so slightly, let go, and it snaps automatically. So there you have it, guys. After that, you could just, obviously, decorate these sections, make them look better, but this is just a very simple tutorial. I'm just using basic colors for this, as you can see, just so you can get the basic idea of how to make a horizontal scroll and also implement a nice snapping feature using gsap code. So there you have it, guys. Thanks for watching, as always. That's just a basic tutorial on horizontal scroll and implementing gsap code to make the snapping feature. And once again, please like and subscribe, and we'll be back with another video next Monday. Thank you.

100 %