Flawless Horizontal Scrolling in Webflow

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ธ.ค. 2024

ความคิดเห็น • 44

  • @webbae
    @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
      @jericjamesmunez ปีที่แล้ว

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

  • @AnastasiiaGlena
    @AnastasiiaGlena 18 วันที่ผ่านมา +1

    Thank you so much! I did it!

  • @roving-camera_72
    @roving-camera_72 5 หลายเดือนก่อน +1

    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
      @webbae  5 หลายเดือนก่อน

      Thank you! I appreciate the awesome testimonial!

  • @strangelittleelia
    @strangelittleelia 7 หลายเดือนก่อน +2

    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
      @webbae  7 หลายเดือนก่อน +1

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

    • @strangelittleelia
      @strangelittleelia 7 หลายเดือนก่อน

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

  • @sergejsamsonow4654
    @sergejsamsonow4654 11 หลายเดือนก่อน +1

    Just AMAZING Tutorial! Still worked for me!

  • @robertfigueroa425
    @robertfigueroa425 4 หลายเดือนก่อน

    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
      @webbae  4 หลายเดือนก่อน

      So glad it helped and thanks for following along! 😁

  • @luciannovosel3843
    @luciannovosel3843 2 หลายเดือนก่อน +1

    you're invited to my wedding. thank you!

    • @webbae
      @webbae  2 หลายเดือนก่อน

      When?

  • @HamzaELMOQADDAM
    @HamzaELMOQADDAM 7 หลายเดือนก่อน +1

    OMG thank you!

    • @webbae
      @webbae  7 หลายเดือนก่อน +1

      Welcome!

  • @joshseipel9891
    @joshseipel9891 ปีที่แล้ว +1

    Thanks for the clear explanations! Great tut!

  • @vlastimilslechta8927
    @vlastimilslechta8927 10 หลายเดือนก่อน +1

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

  • @joserodriguez1811
    @joserodriguez1811 ปีที่แล้ว +3

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

  • @jesamegbe1579
    @jesamegbe1579 ปีที่แล้ว +1

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

    • @webbae
      @webbae  ปีที่แล้ว +1

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

    • @jesamegbe1579
      @jesamegbe1579 ปีที่แล้ว

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

  • @nav-unger
    @nav-unger ปีที่แล้ว +1

    great. Thanks a lot.

  • @umi5483
    @umi5483 ปีที่แล้ว +1

    mate thank u so much helped me a lot

    • @webbae
      @webbae  ปีที่แล้ว

      Glad it helped

  • @Bag-Of-Toys
    @Bag-Of-Toys 6 หลายเดือนก่อน +1

    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
      @webbae  6 หลายเดือนก่อน +1

      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
      @bagoftoysmusic 6 หลายเดือนก่อน

      @@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!

  • @jericjamesmunez
    @jericjamesmunez ปีที่แล้ว +1

    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
      @webbae  ปีที่แล้ว

      Hey - hop in Discord if you need help.

  • @oscarming9374
    @oscarming9374 ปีที่แล้ว +1

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

    • @webbae
      @webbae  ปีที่แล้ว

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

  • @heatherliu6856
    @heatherliu6856 ปีที่แล้ว +5

    Horizontal scroll is GOOD?? Edgy take, spicy execution

    • @webbae
      @webbae  ปีที่แล้ว

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

  • @qlevrqt8886
    @qlevrqt8886 5 หลายเดือนก่อน +1

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

    • @webbae
      @webbae  5 หลายเดือนก่อน +1

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

    • @joysemm
      @joysemm 3 หลายเดือนก่อน +1

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

  • @bogijeaa2
    @bogijeaa2 ปีที่แล้ว +1

    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
      @webbae  ปีที่แล้ว

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

    • @bogijeaa2
      @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
      @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
      @bogijeaa2 ปีที่แล้ว

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

    • @webbae
      @webbae  ปีที่แล้ว +1

      @@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

  • @napu52
    @napu52 ปีที่แล้ว +1

    👏👏