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.
