Advanced interactions: Horizontal scroll in Webflow

As previously seen on Apple's iPad page, horizontal scrolling fully engages visitors by using a unique interaction that changes their scrolling experience from vertical to right to left. Scrolling can also be achieved using the up and down arrow keys (spacebar for just scrolling down).

But, here’s the secret — it’s not horizontal scrolling. It’s vertical scrolling with an interaction that moves elements in our viewport as we scroll through our project. There are five parts to a horizontal scroll effect: the track (this holds everything and serves as the trigger for the horizontal movement interaction), the camera (which is positioned sticky to the viewport as the content scroll through), the frame (which holds all of our content and aligns them horizontally), the content, and the interaction.

In this lesson, we'll teach you how to make a horizontal scrolling interaction with these steps:

00:00 — Introduction
00:52 — Create the “Track” Section
01:33 — Set up the “Camera” Div block
02:40 — Structure the “Frame” Div block
03:25 — Add items
05:05 — Configure the interaction
07:50 — Configure the interaction on tablet and mobile devices for accessibility
09:24 — Recap

----------

[sasisarath]

I just love this guy. The hair, the energy, the smile.... everything.

[JoeGelman]

So much clarity in the writing. So much unique personality in every presenter. So much power in the product. Webflow is so much better than anyone else out there. Period.

[whteclud]

I just asked on the forum about it and now I see the full video about it. Love you, guys.

[KabbaModern]

I been following this host even back in the early stages of Webflow. Great tutor!!!

[loviskern]

Hey guys, just wanted to take some time and thank you for all the videos you have been putting out! I really enjoy the simple and clear visualisation and presentation. I also love all your energy and the little funny parts you integrate from time to time. Please keep it up, although you are not getting that many views yet!

[abdulbasitsadiq]

This tutorial was spot on and easy to follow! The instructor is amazing. Would have loved to see more of him. Cheers everyone!

[gabrielzich]

The host is crazy good - love listening to him

[diesaffer]

Amazing tutorial. So clear and understandable. Well done guys

[abirahmed]

Motivation is what I need and watching Webflow tutorials or anything related to it is my motivation

[alexandergraham]

LOVE the 5 steps before you jumped right in 👍excellent presentation.

[hamishmaclean]

Seriously well done! Breaking it right down to mobile breakpoint reality

[corneliusblasterbox]

I watched a few clips from this guy a while back, noticed he hadn't been active on his page for a few years and wondered what happened to him. Then boom here's back. Glad to see he's doing well ☺

[hellochriscole]

Can't ask for a better how-to video than this. Got some sincere laughs out of it too.

[lalucacreative]

By far, the best tutorial I've found on this functionality. Thanks, Webflow - keep the great content coming! And great to see some new faces in front of the camera, I found the instructor engaging and easy to follow!

[build_r]

Best tutorial experience I've had, this guy rocks

[Saskyia]

This tutorial was so complete and well explained...many thanks

[LisaCreate]

Great video and teaching. This is right on time for a personal project I've been working on

[MyDistortedWorld]

Great explaination on how to achieve horizontal scrolling! Good shot Webflow 👍

[lowlitstar]

I was just looking for a good tutorial on this yesterday, thank you so much!

[isabelwhite]

I like it so much the tutorial and
especially the picture with the cute child on 0:04! Webflow and your webflowteam is so awesome!