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 block0

3:25 — Add items

05:05 — Configure the interaction

07:50 — Configure the interaction on tablet and mobile devices for accessibility

09:24 — Recap

Read about it →

Clone the project →

Get started with Webflow:

Join the Webflow Community:

Contact us

Get in touch

We've developed websites and created custom solutions for over 7 years. Get in touch to learn how we can help you reach your goals.


Customized Proposal

We get to work with some of the most innovative companies in business. Feel free to email us to receive a proposal based for your custom solution.


Technical Support

We love sharing our knowledge because we come from a background of teaching designers how to use Webflow while on the Webflow Education team. Feel free to email us questions, as we'd be happy to help.

Don't worry, this loading screen is almost as exciting as the actual content