Horizontal scrolling

Horizontal scrolling is an advanced interaction that fully engages users. Scrolling up and down actually scrolls right to left and gives a more appealing and memorable experience.

But, here’s the secret - it’s not actually horizontal scrolling. It’s vertical scrolling with a specific animation - an interaction - that moves stuff in our viewport as we scroll.

And. We can create this in five steps. First, we’ll make our track (this is what will hold everything together). Second, we’ll create our camera element (which sticks to the viewport while someone scrolls through our project). And third, we’ll make our Frame element that horizontally aligns everything inside. We’ll then create the stuff inside that everyone sees as they scroll through. And lastly, for the fifth step - we’ll create our interaction (where we create the horizontal scrolling effect)

So, let’s take a look at it. Let’s create our Track.

In the Add panel - we’ll | use a Section. Let’s drop it (here in the Navigator) between these Sections we already have.

In our Selector field - let’s name it ourselves because it helps us understand our structure, but we can name it anything we like.

Now. In our example, we’re going to be scrolling horizontally...through four things. We can always change this, but for four things, let’s choose to set a height on our Section...of 400vw. And we’re using vw...viewport width because we’re scrolling horizontally across four things. We’ll cover the math as we go along, but all that’s important now...is that the height is 400vw.

Step one. Done. Now, step two. From our Add panel - let’s drag in a Div block into our track. Now, in the Selector field - let’s give it a class name (pro tip: we can always press Command + Enter to get to the Selector field of an element). But, let’s call it Camera.

And because this is serving as a camera (something through which we’re going to see the stuff scrolling by)...we want it to be exactly the same dimensions as our viewport. That is..a width of 100 vw (100% of the viewport width)...and a height of 100 vh (100% of the viewport height).

And two more things we want to do to make sure this is visible (to make sure our camera is visible the entire time that we’re scrolling)...First thing, we’ll make its position sticky because the Camera is going to stick to the Track as we scroll down.

The second thing we need to do is we need to define where the Camera will stick to inside the parent element (the Track). Let's make sure it sticks to the top since we want it to stick there when some scrolls through. So let's go in and make this 0px because that's the distance we want the camera to be from the top of the Track.

Step two. Done. Now, step three. Let’s create our frame. And this will be our quickest step. In the Add panel. Let’s drag in a div block right into the Navigator (inside the Camera) Then in our selector field. Let’s call it Frame.

Now, remember - our frame will be used in our scrolling interaction to move our items. And what we want is this: we want to align the stuff inside horizontally. So. Flexbox | set. And horizontal is already set by default.

But, it doesn’t fill the entire viewport. And that’s okay. Because all we need to do is make our height 100% so that it takes up 100% of our parent element (the Camera element).

That’s step three. Now, step four. Let’s make all of our items (the things that we’re going to scroll through).

For our stuff inside the Camera - let’s go to our Add panel. Find our Div block, and place it right into our Frame. Give it a class name (and this can be named whatever you want). And our goal is this: we want our items to completely fill the viewport. In our Size property - give it a width of 100vw and a height of 100vh.

[Grímur] Hey Micah, don't forget to set the items to not shrink and grow.

Otherwise, they'll all try to fit in the camera. And, we don't want that.

[Micah] Thanks, Grímur.

Now, we're putting in images that take up the Item's space, but you can put anything you want in your Item. Feel free to pause the video and put any content you want inside. But for this example, we're using Images that take up the full width and height of the Item. And to be able to more easily differentiate between the Items, let's add some padding all around.

To not have you sit through me making this change for each Image. We’ll cut to Grímur, who is enjoying a his favorite cup of coffee.

[Grímur] Oh this is a cup of my favorite coffee.

[Micah] Thanks, Grímur, but I’m done now.

And we can see here, if we scroll from left to right using our mouse or Trackpad (holding shift while scrolling on PC), we can preview all of our items.

Now, our items spill out of our camera view, but that's not what we want. We want to only see the stuff inside that view when they’re pulled in. To do that: select the camera element (or whatever you named it) - and in our size properties - set overflow to hidden. Now when we try to scroll from left and right, we can't, because everything outside of the Camera is hidden.

And with this, we’re ready for our interaction (what will move our frame from right to left).

In the Navigator - with our Track element selected (or, whatever we named this). We’ll go to our Interactions panel. And this is what we’re trying to do: we want this whole thing to animate while our track is scrolling in view.

So. While scrolling in view, we want this to play an animation. What kind of animation? A new scroll animation we’re making right now. One that we’ll call - horizontal scroll animation.

And how it works is this — As someone scrolls through our Track (that’s what we’re controlling here in Interactions), we actually want another element to move. (We want our Frame element to move).

So how do we do that? Well, as we can see here, the trigger is already created on the Track...we just need to select the Frame (and we’ll select it in the Navigator.)

Back in our Interactions panel - click this plus icon, and select Move.

We’ll start at 0% (this is when the track is just coming into view as we scroll down to it). Let’s set the movement on the x-axis to 0 vw (because this is where our interaction will start).

Then, we’ll set the other action. And for that, let’s set it to -300vw. So how do we get this number?

We know that our track is 400vw, and we know that we first see the entire viewport (100vw) when the first item becomes visible. So what do we want? We want this to be -300vw (That will ensure that we move our frame to the left) because that takes into account the first 100vw we see.

Now. Using Live preview - we can see that our interaction seems to already be starting, and it’s moving onto the next section too soon. And that’s okay.

To fix that - let’s change our start animation to begin at 20% when our track is fully visible. Previewing this, works perfect, but there’s a better way. Instead of calculating the percentage, let’s move this back to 0 percent. And save.

What we're going to do is this: change our animation to start when the Track is fully visible. Click “Is fully visible” and now when we Preview (clicking the preview icon) - we can see that it starts right when we want, but it still ends too soon (because it reaches the end of the track while our interaction is still moving)

So, with our Track element selected - let’s go back to our Interaction. In our animation boundaries, let’s offset when the animation ends (let’s offset it by about 15%).

Now, when we publish our project - we can scroll to this Section. And it horizontally scrolls (moving everything inside from left to right), moving our items until we reach the end.

Now, one thing to keep in mind is this kind of experience for tablet and mobile users. If someone on a mobile device tries to move left and right, it won't work, because the interaction only works if you scroll up and down. Not a very accessible experience for mobile users.

So, if we only want our interaction to occur only on desktop, we can do that. In our scroll interaction, we can deselect the devices we don't want this interaction to occur on.

And because the interaction is removed from those devices - we’ll need to do three things to optimize our layout for vertical scrolling on tablet and smaller devices.

First thing, with our Track selected - let’s head over to the Style panel and select our tablet breakpoint. Remember, changes on Tablet cascade down to mobile devices, but won't cascade up to Desktop. Knowing that, let's change our height from 400vw to auto (so that it automatically fills the space of the stuff inside).

Second thing, select the Camera (using the Navigator) - and change both the width and height to auto (so that it let’s the stuff inside fill out the space), and then set our overflow to the default - visible because we don't want to hide the items anymore.

And finally, the third thing, select the Frame (using the Navigator again) - and change the flexbox direction from horizontal to vertical.

From here, we can edit the Item's style properties to better cater to the vertical scroll experience however we want.

Remember, because we made these changes on Tablet, it won't affect Desktop, but it will affect Mobile landscape and Mobile portrait.

And that’s it!

We made our track (the element that held everything together). Second, we created our camera element (which covered the viewport while someone scrolled through our project). Third, we made our Frame element that horizontally aligned everything inside. We then created the stuff that everyone saw as they scrolled through. And lastly, we created our interaction (the thing that powered the horizontal scroll).

And that’s horizontal scrolling in Webflow.

‍