create. something

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 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: