Advanced interactions: Horizontal scroll in Webflow

11
Published on July 29, 2022 by

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

Read about it → http://university.webflow.com/lesson/horizontal-scrolling

Clone the project → https://webflow.com/website/Cloneable-custom-horizontal-scroll-interaction

———-
Get started with Webflow: https://wfl.io/2r7cVUW
Join the Webflow Community: https://webflow.com/community

https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

Category

Add your comment

17 Comments

  • Hitbox 6 months ago

    Good Video, but i got a concern about this technique that i can't seem to solve by myself. How to keep this responsive ? is there a way of implementing a height-increase of the track depending on how big the child elements are in width ? I would need this because i want to create a collection of items that a customer could drag into this track, but if he always needs to adjust the track height manually, the purpose of CMS in this case becomes a little bit obsolete. Thanks in advance and keep up the good work guys

  • Oceans On Fire Studios 5 months ago

    Ideas on how to had a horizontal progress bar?

  • Bo Lo 5 months ago

    Great tutorial, thanks. However, I'm getting horizontal scrollbar at the bottom of my browser and there's one even in your project. Is there a way to fix this? Thanks!

  • Jeroen Vermunt 5 months ago

    for some reason the camera element does not stick. The sticky position seems to not work inside a section

  • Glbch 4 months ago

    So i have this problem, that the camera is not sticky. It will just move past the track and continue with the site. Anyone who can help me out?

  • S F 3 months ago

    Goddamn that was a cool video to watch, already got ideas on where to use it

  • Bur Ghur 3 months ago

    Got this to work. Having trouble figuring out how to set up animations for items in the track. Has anyone else had difficulty with this?

  • john steven 3 months ago

    It's not working.It's not moving horizontally..😐😕😣I do not know if it worked when you posted this video. But at the moment this is not working at all.

  • Derek Siu 2 months ago

    GENUIS!

  • EDSON SALAZAR 2 months ago

    You are the fu**ing master, this tutorial is incredible, one of the best explained. If you have a course I'll buy it. It would be great if it had Spanish subtitles for Hispanics who still do not have tutorials for this tool in our language.

  • Sensei Bas 2 months ago

    Genius, thank you!

  • Volatile Online 2 months ago

    Definitely isn't working for me

  • kenny creator 1 month ago

    How do i put CMS for my projects in the horizontal scroll?

  • Raphael Uzoagba 1 month ago

    Can I make it in such a way that the camera doesn't take up the full vwh?

  • FAD Saskya 1 month ago

    This tutorial was so complete and well explained…many thanks

  • Wouter van der Zee 4 weeks ago

    Very much like that you also include the solution for tablet and mobile.

  • Akash 3 weeks ago

    This doesn't work when the 'track' element is nested inside another div. Anyone know how to fix this?