▼
Streaming live at 10am (PST)

Webflow Workshop #105: Creating a horizontal scrolling page without coding

#1

Join us on Tuesday, November 28th @ 10am (pacific)
[ Watch live ] | [ Join the live chatroom ]

wf-workshop-card-horizontal-scroll
wf-workshop-card-horizontal-scroll.jpg1920x1080 314 KB

In this workshop, we’ll create a web page that scrolls horizontally like a timeline. We’ll be focussing on basic element structure, styling and the interactions 2.0 scroll trigger.

To learn more about creating your own horizontal scrolling page, visit these two articles:


made this a banner . It will appear at the top of every page until it is dismissed by the user. #2
removed this banner . It will no longer appear at the top of every page. #3
#4

here is the clonable project:

enjoy :slight_smile:

#5

Hey Nelson, I recently built up my first website on webflow… As I had the idea from a horizontal scrolling page in my mind already before, your video was very helpful!

Now I’m stucking with the mobile version… I would like to show the website just on landscape mode and let the visiters swipe horizontally to scroll.

Is that possible? At the moment you have to swipe verticalle to let the website scroll horizontally- wich is of course very confusing!

Would love to get some help!

https://preview.webflow.com/preview/aimara-world?utm_source=aimara-world&preview=46f087a639806a97fd650f875606f0ca

Thank you!

Best regards,
Johanna

#6

@PixelGeek - what if you are using this for a CMS list and you don’t know your vw because it’s for a CMS list and it could be 5 items (500vw) or it could just be 3 (300vw)? Can you just put 100vw on each CMS item div block and then set the wrapper to like what? auto???

#7

Hi, and thank you for tutorial :slight_smile: I have a question: Is it possible to move directly to another full section page on one scroll mouse wheel?

#8

yes. but you would need custom code and a jQuery plugin to do that.

However, my own personal opinion on using that is you’re confusing the user by taking over their scrollwheel function. This is known as scrolljacking . I would suggest just using Webflow interactions instead of this.

hope this helps :slight_smile:

#9

Thank you for a quick reply. BTW your tutorials are amazing. allways have a fun to watching you :joy:
I would like to achieve something like on this site (https://big.dk/#projects-meca). Just changing image with scrollwheel. It seems to me like really nice gallery movement without any “unwanted effects”. Just changing nice images :slight_smile: but i dont know how to achieve this.

#10

Hey Nelson,

thanks for the amazing tutorial. I’m finding a problem because I want the horizontal scroll to be the second section of my website, after my landing page, It seems the only way this can work is with position fixed to the top right corner, but I can’t set that position if i have the home section on top, any ideas on how to overcome this?

Thanks