Flawless Horizontal Scrolling in Webflow

[@webbae]

Something changed in Webflow or the browser that broke the original version of this yesterday and caused the animation to end too late! AHHHH! Here are the 3 steps you need to take to fix it: www.patreon.com/posts/flawless-scroll-90035290?Link& Thanks @jericjamesmenuz for the heads up on this

[@jericjamesmunez]

You're the best! Thank you so much @webbae!

[@AnastasiiaGlena]

Thank you so much! I did it!

[@strangelittleelia]

Thanks A LOT! I am making a webcomic for my bachelor thesis, using this scroll effect for displaying it and thanks to this tutorial, the part I thought would take the most time is now the easiest part. THANKS!

[@webbae]

that's awesome. hope your comic turns out great! would love to see it when you are done.

[@strangelittleelia]

@@webbae I will send a link once its done.

[@roving-camera_72]

This is the best organized , and easiest to understand, video I've seen on horizontal scrolling in Webflow. I'll probably make use of this soon.

[@webbae]

Thank you! I appreciate the awesome testimonial!

[@robertfigueroa425]

absolute gold! thank you for this video so much. and the additional tools and content.currently playing around with the "css nobody told you about." a definite like and subscribed.thanks again.

[@webbae]

So glad it helped and thanks for following along! 😁

[@sergejsamsonow4654]

Just AMAZING Tutorial! Still worked for me!

[@luciannovosel3843]

you're invited to my wedding. thank you!

[@webbae]

When?

[@HamzaELMOQADDAM]

OMG thank you!

[@webbae]

Welcome!

[@joserodriguez1811]

Hi! Could you do a tutorial on how to do a working CMS horizontal list?

[@nav-unger]

great. Thanks a lot.

[@jesamegbe1579]

Great vid.. Please can you explain how to make it responsive for the tablet breakpoint. Thanks

[@webbae]

it should be responsive out of the box - what behavior are you seeing?

[@jesamegbe1579]

@@webbae the sticky div won't stick for the tablet breakpoint

[@joshseipel9891]

Thanks for the clear explanations! Great tut!

[@Bag-Of-Toys]

Having issues with my cloned version working in Google Chrome on the iPhone. It appears to load everything zoomed out (as if you took the entire page and tried to fit it in the phone screen). Have you had this before or know what could be happening? Happy to attach screenshots or links.

[@webbae]

Just loaded in chrome on my iPhone 14 and no issues I could see. Can you share a link in discord maybe? discord.gg/dnFKhUhT

[@bagoftoysmusic]

@@webbaethanks. To be clear, this is my tweaked site using your initial configuration in Webflow. I'm fairly certain my adaptation to your "bones" is where the problem lies, but I'll hit you up through discord. Thanks!

[@vlastimilslechta8927]

I feel stupid :D why i cant think it myself! thank u for the tutorial

[@jericjamesmunez]

Hi Web Bae! Today, all of my projects that has a horizontal scroll had same problem. On the last section of the horizontal scroll it start exiting even tho the last section is not fully visible yet. These projects are working well in the past, but now idk what happened, maybe Webflow had some updates that affects these horizonta scrolls?

[@webbae]

Hey - hop in Discord if you need help.

[@umi5483]

mate thank u so much helped me a lot

[@webbae]

Glad it helped

[@heatherliu6856]

Horizontal scroll is GOOD?? Edgy take, spicy execution

[@webbae]

The people want full use of the scroll wheel. Give it to them?

[@qlevrqt8886]

I'm confused because we don't see what's in the first to full-page divs.

[@webbae]

Hey I'm not sure I understand the question - can you elaborate or provide an example in discord?

[@joysemm]

there are divs already opened at the beginning of the video. and I'm wasting a lot of time...

[@bogijeaa2]

It all work, but only 'bug' I'm getting is that every time when page is reloaded and you scroll down to horizontal scroll section, pages kind of reset back to beginning, it's like they're initial position is at the end of horizontal scroll section. So you see, when you scroll in to view, that they reset from end to beginning quickly, and that's so annoying. Do you have some solution for this? P.S. I found out that the problem is that I have I every section wrapped in a wrapper because of preloader animation. I was trying to disable scrolling while preloader is active, but yet I didn't find solution.

[@webbae]

What are you doing to disable scroll on page load? Hop in discord and drop a link to your project.

[@bogijeaa2]

@@webbae I wrapped every section of the page in a wrapper and while the preloader animation is playing, that wrapper is set to display: none. So that display: none is causing horizontal scroll section to "reset" like I was saying earlier.

[@webbae]

@@bogijeaa2 I see. A more common way to prevent scroll on load is to apply "overflow: hidden" on the body element and then remove it once your preloader is complete. If you are using a smooth scroll library like lenis this won't work but you can still do it.

[@bogijeaa2]

@@webbae I actually am using lenis smooth scroll. Overflow: hidden won't work in this case u say?

[@webbae]

@@bogijeaa2 correct. use the lenis api. I think it's as easy as lenis.stop() and lenis.start()... something like that. It's in their documentation

[@oscarming9374]

after copying full page at 3:38, i just scroll downwards, not horizontaly

[@webbae]

hop in discord if you have a question :) and share a link.

[@napu52]

👏👏