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. This scroll interaction can be triggered by mouse, trackpad, and keyboards (up and down arrow keys, or spacebar).

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. In this lesson, you’ll learn how to build this from the beginning.

Read about it on Webflow University too! → Horizontal scrolling | Webflow University

Accessibility note: Make sure your content in your horizontal scroll interaction is accessible by screen readers, or if you’re using images (as we do in our example) to set the alt text to decorative.

2 Likes