Flawless Horizontal Scrolling in Webflow
HTML-код
- Опубликовано: 5 июл 2024
- 🚨 IMPORTANT UPDATE/FIX 28 SEP 2023 IN PINNED COMMENT BELOW 👇
How to build horizontal scrolling sections in Webflow using only one interaction that works for any number of sections with any sizes. This animation observes the user's downward scroll behavior and translates a separate div block to the left to achieve a cool horizontal scroll effect. We'll look at some pro level css tricks with overflow, flexbox, translateX and position sticky to devise a horizontal scrolling container system that we only need to set up once and works even if we change the sizes of the nested sections.
// CLONE IT (affiliate link)
👯♂️ webflow.grsm.io/cloneable-is-...
// FREE STUFF
💪 My ULTIMATE Webflow Resource Library: code-snippets-sign-up.webflow.io
// SUPPORT ME
💵 Patreon: / webbae
// ADVANCED WEBFLOW COURSE
🎓 Webflow 201: www.webbae.net/product/webflo...
// SAY THANKS
🙏 testimonial.to/web-bae-testim...
// GET HELP
🙋♀️ Discord: / discord
// FOLLOW ME
🐥 Follow Me! / webisbae 
Хобби
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
You're the best! Thank you so much @webbae!
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!
that's awesome. hope your comic turns out great! would love to see it when you are done.
@@webbae I will send a link once its done.
Just AMAZING Tutorial! Still worked for me!
Thanks for the clear explanations! Great tut!
OMG thank you!
Welcome!
great. Thanks a lot.
I feel stupid :D why i cant think it myself! thank u for the tutorial
Hi! Could you do a tutorial on how to do a working CMS horizontal list?
mate thank u so much helped me a lot
Glad it helped
Great vid..
Please can you explain how to make it responsive for the tablet breakpoint.
Thanks
it should be responsive out of the box - what behavior are you seeing?
@@webbae the sticky div won't stick for the tablet breakpoint
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?
Hey - hop in Discord if you need help.
Horizontal scroll is GOOD?? Edgy take, spicy execution
The people want full use of the scroll wheel. Give it to them?
👏👏
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.
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
@@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!
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.
What are you doing to disable scroll on page load? Hop in discord and drop a link to your project.
@@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.
@@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.
@@webbae I actually am using lenis smooth scroll. Overflow: hidden won't work in this case u say?
@@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
after copying full page at 3:38, i just scroll downwards, not horizontaly
hop in discord if you have a question :) and share a link.