How to Webflow: Horizontal scrolling section

Creating a horizontal scrolling effect can make your site look unique. Here's how to setup your elements and your Webflow interactions.
#webflow #webdesign #css
Check out theoverflow.io for free Webflow resources. Updated daily.
Join the Pixel Geek Community:
pixelgeek.community
-------
I've been a web designer since 1995 and I've learned a lot about this industry. Now that I've found my dream job at Webflow, I want to share some of my experiences and knowledge with you in hopes you can find your dream job as well.
The purpose for this channel is to help you design and build better websites, learn more about the business of web design, and empower you to inspire others in this unique creative industry.
-------
Like what you see? Subscribe here:
kzbin.info
-------
thepixelgeek
pxlgk
pxlgk.com

[@ullibauer1843]

Dude you are awesome! The tutorial is on point, no messing around with unnecessary stuff, just the pure description of what you did to solve the problem Perfect!

[@pixelgeek]

Thanks for watching 😁

[@dhettema]

Awesome tutorial Nelson! I bumped into a bit of a challenge as I was trying to do this with full screen content blocks. Somehow 100VW never fully covered the screen, I always got blocks that covered about 50% of the width. Then I noticed that the size of your blocks changes slightly when you set the "horizontal scroll content" element to display:flex (the width of each element decreases) at 6:21. After some head scratching I managed to fix my scenario by setting the _height_ of "horizontal scroll section" to 700VW (I have 7 content blocks set to 100vw/vh). Now each element covers screen and I'm dancing. Hope this helps anyone else who bumps into the same problem. Stay awesome and keep on making these awesome tuts! :)

[@jimphillips6379]

Thanks very much! Between Webflow's tutorial and yours - the magic happened.

[@timon5612]

This is so hard to do on other builders, thank you for this quick tutorial, love it!

[@pixelgeek]

You're so welcome!

[@adamtaylor1304]

Hey Nelson! I love your videos, they're always super helpful! A small piece of feedback: there is a high pitched buzzing noise throughout your last 3 videos. It may be an issue with a bad cable maybe? Thanks again for all your great content!

[@pixelgeek]

Thanks for the feedback. I'll look into this. 🙇🏽‍♂️🙇🏽‍♂️🙇🏽‍♂️

[@Jmunchcom]

@@pixelgeek it's really loud here when using headphones.

[@pixelgeek]

yup. i noticed that too. Do you still hear it in my new video?

[@Jmunchcom]

@@pixelgeek The new video didn't have it as much. Could hear a bit noice, but could just as well be the room. But it wasn't annoying like it was in this video :)

[@moesyah]

Great tutorial, Nelson. If anyone is having trouble with sticky working, check that there are no parent divs in the hierarchy that have "overflow: hidden," since it will not work in that case.

[@pixelgeek]

great protip :)

[@bonorbitz]

That helped! Thanks!

[@teresabensel7190]

Thank you! But don't we need to set the section to overflow: hidden in order to prevent the entire page from horizontally scrolling (with a horizontal scroll bar)?

[@fabianvalentini3041]

@@teresabensel7190 Thats also my problem. Did anyone solved this?

[@fabianvalentini3041]

The horizontal scroll works perfectly ... but when you zoom out on a trackpad the full width of the page is visible :/

[@Redagentsolutions]

Yo, Nelson, such an awesome walkthrough. You make things look easy and practical.

[@alshfr1847]

Omg this is exactly what I was looking for deadly👍👍👍👍 Thank you very much for sharing it!!!!

[@pixelgeek]

Glad I could help!

[@saraaboulhosn5229]

Hi Nelson, thank you for the tutorial! Is there a way to avoid having all the white space at the bottom?

[@villeoke]

I love you. You've saved my ass so many times in the past few weeks,

[@joshhighburger4137]

I really appreciate this video sir, helped out a ton with a timeline section I've been trying to do for a client! In my head I knew all the parts already, it made sense with the top of the page X is 0, bottom is 100, etc, but plugging everything together was stumping me until this so thanks again!

[@pixelgeek]

can you reply back with your read-only link so I can look into the issue?

[@creativemindsstudio8268]

Thank you always at @Pixelgeek.

[@pixelgeek]

you're very welcome :)

[@robotheadv9]

Awesome tutorial, I will use it in my web design.

[@angelicojohnrago2878]

I love you pixel geek

[@dannygoldfarb8378]

Amazing - just what I was looking for

[@TheLas1991]

Thank You Nelson! Short and informative! Happy Webflow user :)

[@pixelgeek]

You're welcome 😁🙇🏽‍♂️

[@asafamidor6730]

Great tutorial! I made my home page like that but on mobile, I'd prefer that the scrolling will be vertical as regular. there is an option to it? with Webflow tools or with custom code.

[@manishahegde4789]

thank you nelson!! its super helpful.

[@pixelgeek]

You're welcome 😁

[@anansicreative4068]

Great method Nelson! I'm definitely going to be looking for an opportunity to do something with this - Joel

[@pixelgeek]

thanks for watching. I'm glad this video helps :)

[@ArthurLiegeoisW]

Hey Nelson, Thanks so much for this tutorial, I have recently gotten into Webflow and I love learning new tricks ;-) I have two questions about this one: 1. Can you explain how to connect this horizontal scroll animation with a CMS? I have a portfolio of video content to showcase and sliders are really boring... 2. I have hit many hurdles trying to make this responsive for mobile devices, any words of wisdom? All the best, Arthur

[@raynalreyes4907]

great video Nelson!

[@pixelgeek]

Thanks 🙇🏽‍♂️♥️

[@testoboss]

Thanks for this tutorial ! I'm trying to make a single homepage with horizontal scrolling to the different headlines of the site but the scrolling is going all the way and then reseting to 0% everytime, how could I fix this ? Also the scrolling seems a little too fast and out of control

[@pixelgeek]

Come to the next live stream. 😁 I'll be doing a new, updated tutorial on horizontal scrolling.

[@testoboss]

@@pixelgeek awesome 😍 looking forward to doing so !

[@Cristianasher]

Thanks, this is excellent as always! Is there a way to a snap to center effect with a horizontal scroll like this? I keep finding tutorials that say it's easy, but I'm getting zero results.

[@Julie-mi1dz]

Is it possible to have multiple of these horizontal scrolling sections beneath each other? Like a whole page just made up of horizontal scrolling sections basically stacked on top of each other?

[@santiagog95]

Hello! Is there a way to show a scroll progress bar only when you scroll horizontally in a certain div block, not when you scroll down a page?

[@webguymike]

love this tut Nelson! Thanks! I had one question on fine-tuning. Is there a way to close the white space that displays between the sections on scroll? There's a lot of white space after the horizontal images before the next section appears? Is there a way to make this tighter? Ideally, I'm trying to get the horizontal effect to be flush with the section above and below.

[@pixelgeek]

Thanks for watching! :) What you can do is move the last keyframe percentage of the interaction to something higher. Just play around with the number until you find something that suits you. Hope this helps.

[@abaldetti]

Hey! I noticed the same thing! But I found a solution different of that Nelson just told you.... instead of touching interactions try reducing the View Port Height just on mobile. It does the trick and looks awesome

[@thunderx9772]

I am facing the same issue but the solution isn't working across different dimensions of desktop and laptop, can anybody help?

[@thunderx9772]

preview.webflow.com/preview/ms-stupendous-project-225328?preview=0e4d003cb22169acef033e9527c82f80&mode=preview

[@jasonzulauf2432]

Is there a way to get rid of all the white space that scrolls while the images scroll horizontally? I have been trying to figure this out for some time now and I am getting frustrated. all the white space is not visually appealing. I understand it is needed for the interaction on scroll but is there another way to accomplish this?

[@JohnBeatty]

Thanks for the tips! Appreciated!!

[@pixelgeek]

my pleasure :) Thanks for your support

[@alienpilgrim1906]

Super helpful thanks!

[@KarmaKattt]

Thanks really helpful

[@shalomizebhor3348]

this isn't scalable. I have tried this but it doesn't work for all desktop viewports. it can look good in a view of 1280px but when it expands to 1920px it begins to create a lot of empty space. Is there any way I can fix this? I'd really appreciate

[@mari-831]

Great tut, thx

[@mdkvdf]

Great tutorial, thanks for this. Can we revel the pictures while scrolling horizontally too?

[@pixelgeek]

i've tried that and it isn't possible since the "scroll-into-view" trigger is based on the Y axis and not on the X axis.

[@erwan6302]

Hey ! Amazing content as always ! I'm trying to do the same effect on webflow (of vertical scroling) but i want the div's to only show one by one, and that each mouse wheel stroke makes it go to the next div until I reach the end of that section's content before it goes to the next one. Is it possible to make that happen with this method ? Thank you in advance if you have the time to answer! Cheers !

[@pixelgeek]

can you send me your read only link so I can check it out?

[@erwan6302]

@@pixelgeek Hey ! Thanks for answering ! In the meantime I managed to use the fullpage.js implementation, regardless of it's scrolljack (client's desire) and implement it horizontally ! So problem solved ! Anyway, I'll be there for your next live ! Thanks again for all !

[@cmbrady00]

Thank you for this tutorial Nelson. Have seen this effect and wondered how to do it. I am stuck around 8:18. As you adjust the X value, items are moving onscreen. I'm not seeing my row of content items move as I adjust the X value for 100%. I also do not seem to be able to turn on live preview. Any ideas on what I may be doing wrong? Thanks in advance!

[@cmbrady00]

UPDATE - User error: After stepping away from this tutorial briefly, all is now working on my sample project, including live preview.

[@pixelgeek]

nice! glad it's working :)

[@undersara]

Great Video, managed to use interactions for the first time and it looks gooood :) any suggestions on how to make it work on a smartphone?

[@pixelgeek]

it already works on a mobile device :)

[@TravelingThruLife]

great tip!

[@pixelgeek]

Glad it was helpful!

[@ShutterlabCreative]

Thanks Nelson!

[@pixelgeek]

my pleasure :) Thanks for watching

[@ShutterlabCreative]

@@pixelgeek Is it possible to configure this on a per/breakpoint basis? to compensate for screen size to allow space for the horizontal scroll to complete.

[@ShutterlabCreative]

@@pixelgeek I completed this technique using Google Chrome on Windows and Andriod with success. However, upon attempting to use the horizontal scroll on an iphone with safari it gets completely bypassed. Meaning the horizontal scroll freezes on the first frame with no scroll action until you reach the footer. Has this been an issue for anyone? Is there a workaround? I'm a little bummed out as I'm not an Apple guy and had no opportunity to test until now. shutterlabcreative .com *On Internet Explorer the entire page crashes, though I have no hope of actually making that function without completely stripping the page lol

[@ShutterlabCreative]

Somehow this issue no longer exists, on to the next challenge!

[@bopakaka99]

hey man i think i did something wrong, it looks good on my computer & I phone, but it looks messed up when i turn my phone over to landscape, & it also looks messed up on a samsung phone for some reason? would appreciate the help

[@alexhartan]

Great vid, thanks for the insights. Quick question: do you know how to implement a seamless scrolling background(that repeats infinitely) on a page? Something like the background they had in cartoons when they were moving in a car. I implemented a solution that has a horizontally repeating background that slides, but the width has to be finite, so the animation stops eventually. Demo: slide-bg.webflow.io/ Designer: preview.webflow.com/preview/slide-bg?preview=97f27b8a18df3e3fca00f86d8f56fea2&mode=preview

[@pixelgeek]

interesting... let me see if i can figure this out and create a video for it

[@TracingRobots]

@@pixelgeek what's the best way, after setting up the horizontal scroll, to create a section link to, say, skip the horizontal scroll or go below it. I tried this, and when I click on the section link (in the header) it rapidly goes through the scroll then goes to the section id below the scroll. How do i get it to go to the section link without going through the scroll?

[@woojaesim8656]

Thanx Nelson, so.. i want to know style property was named 'hero' and 'background video'.

[@pixelgeek]

I'm not sure I understand your question. Can you rephrase it please?

[@Julie-mi1dz]

Thank you for the tutorial! I did the same thing and set the Scroll Wrapper to Sticky and also set the position top to 0 but it doesn't stick :(

[@pixelgeek]

Make sure that none of your parent elements have a overflow:hidden

[@Julie-mi1dz]

@@pixelgeek Thank you so much!!

[@mr-be3sw]

Nice video again! Can you make this video's with also the responsive version for tablet and mobile ? :)

[@pixelgeek]

Thanks for watching 😁 this design is already responsive. Try building it and see for yourself 😁

[@mr-be3sw]

​@@pixelgeek Thank you for the quick response. I will try :)

[@mr-be3sw]

​@@pixelgeek I have another question if that is possible :) Is there a way to change the menu button in tablet and mobile. for example instead of 3 lines 2 lines or a totally different icon or image. without coding?

[@kirillstarchak7463]

@@pixelgeek Hello Nelson, I have used this method to create a full landing on a scroll, and it does not work on phones, is there any way to fix it? Or any other method on making the page work on a horizontal scroll with this cool movement on the last section?

[@nataliavlis6689]

how to move right when on horizontal scroll wrapper to see the rest of pics?

[@pixelgeek]

hmm... can you please rephrase your question? I'm not sure I understand it.

[@nataliavlis6689]

@@pixelgeek hi Nelson! thanks for your reply alot! sure :-)! i mean that time when you show scrolling to the right, it's on 6:34 - 6: 38 min. sure there are some hotbuttons, but i am new user of the webflow and don't know all of them yet! thanks a lot again!!

[@lucianwu1074]

Nelson, thanks for the video. Do you have any issues with the scrolling when done on mobile? Desktop seems to work fine, just not on mobile.

[@pixelgeek]

it works fine for me on mobile. which device and browser and version are you using?

[@shivamshetty5558]

does this work on mobile properly?

[@pixelgeek]

yes it does :) try it

[@thunderx9772]

A horizontal scroll section is still appearing on my website, dunno why?

[@pixelgeek]

i looked at your link and your horizontal scroll section is working correctly. Did you still need assistance?

[@thunderx9772]

@@pixelgeek You helped me! Actually I saw your another video for horizontal scroll on the webflow channel from you only! Thanks a lot😊 Kudos to you man🎉

[@thunderx9772]

@@pixelgeek I really like how you care about your every viewer and reply to them. Much love♥️

[@pixelgeek]

@@thunderx9772 can you double check the link please? it doesn't work

[@tancdiscovery9432]

Hi nelson.. great video as usual. Having trouble trying finding a way of doing Horizontal scroll within a centered max width site... Not sure its even possile. I know this is an old post, but if you see this maybe you could give me some pointers on how to achieve this...would b gratly appreciated. What Im working on: critchlow.webflow.io/

[@jwillard3603]

How did you avoid having all the white space underneath?

[@juliekayeart]

These tutorials are great but always desktop focussed. 86% of the users on my projects are using mobile. Please can you always show mobile too. Thank you :)

[@pixelgeek]

Thats true, but most of these tutorials, like this one already works for mobile. Try it out :)

[@creativeembargo]

Hey Nelson, I love the horizontal scroll slider. But I asked myself if there is a way to make it responive and pixel perfect on any device? - Nico www.flori.swiss/shop

[@delsmith5327]

This video was made in 2019, feel guilty I'm only using this now! 🤦

[@louwaars]

Would this work on mobile?

[@pixelgeek]

It'll still work on mobile because your just scrolling down