Perfect Horizontal Scrolling C…

0 0
Read Time:34 Second



In this tutorial, we’ll create a horizontal scrolling section in Webflow using only one interaction that calculates the distance and speed based on the number of items inside.

00:26 – Creating the layout
4:17 – Setting up the interaction
08:13 – Adding in the custom code
10:21 – Adjusting scroll speed and items in view

If you’ve found value in this content, please consider supporting this channel by becoming a patron. As a special thank you, you’ll receive access to gated content.

Find the code for this project at

View the project cloneable at

Try Webflow using my affiliate link below.

source

This post was automatic generated with this wp-automatic-plugin

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Next-Gen e-Commerce Website | … Previous post Next-Gen e-Commerce Website | …
AUTOBLOGGING REVIEW| AutoBlogg… Next post AUTOBLOGGING REVIEW| AutoBlogg…

34 thoughts on “Perfect Horizontal Scrolling C…

  1. hello timothy, thanks for your video and your code this exactly what i needed for my project. However i've tried to reproduce the same but the scrolling only work when i'm in tablet breakpoint and under,. Do you know where the issue might came from ?

  2. Thank you ! That's so useful ! Just one comment, it doesn't seem to work when combined with locomotive scroll (using your tuto video because it was the clearest I ve seen 🙂 )Separately they work but not together.

  3. Thank you! I have had so much difficulty with getting the horizontal slider right. It works for me, but I have had to mess with it a bunch to get it just right. This looks like a great way to bypass all that extra work.

  4. thanks a lot for sharing this! I'm wondering is it possible to have more than one horizontal scrolling in one page? Do I just alter the class name and make a new copy of the code?

  5. Is it possible to do this same exact thing, but with arrows that visitors control? I need a CMS newsfeed with 2 items per slide but more like a slider. Can only find CMS newsfeed sliders with 1 item per slide.

  6. Love it, super helpful. Would be helpful if there was a way to recalculate the scroll distance on some event – I've got filtering on the items in my horizontal scroll, and when it filters the list to half the items, the script still wants to scroll through the distance of all the items.

  7. Incredible stuff! Works beautifully, like everything you make.

    But you might wanna include a note about the collection ".list" class name. In the beginning of the video you said it could be any class name we want, but the bottom of the code provided in Notion calls out ".horizontal-section .list". I couldn't get it to work properly until I caught that. I just changed ".horizontal-section .list" to ".horizontal-section .my-class-name".

  8. Hey Timothy! I'm trying to implement this along with smooth scrolling, but it seems that both Locomotive and Luxy both break this interaction. Is it possible to be able to have both?

  9. Hi Timothy. Thank you for this.

    I created the scrolling and it works great. However I'm not sure what I did wrong though. I put -1rem and it stops middle of the list and the other elements don't show. I increased this and now all the elements in the list show but if I add a new item to the list the space at the end gets shorter and shorter and then we're back to how it was when it was -1rem. Is there another way to fix where the scrolling stops.

  10. Awesome tutorial again! Thanks

    For anyone interested, I made this with a Collection List grid.
    Turn the List class into a grid, with a direction column.

    Only thing to change it to divide the -1REM in the scrolling animation with the ammount of rows from the grid
    Otherwise the scrolling will not stop at the last item

    So a grid with 3 rows = -.033 REM / with 5 rows it would be -.2REM

  11. Hey Timothy for me the code works "almost" perfectly i'm having a problem with linkblocks. They aren't clickable until the end of the scroll (te last card suddenly becomes clickable) any idea why? Thanks for all the time you put in these video's really helps a lot.

  12. How to add this as a menu and prevent body scroll? Is this possible, what's the other way of doing something like this for a menu of which covers the whole viewport.

  13. Very cool! I'm adapting this to be my portfolio site. Is it possible to add a footer to the sticky section? Even setting it to absolute doesn't help, and it's odd to just have the footer pop up at the very end of all the horizontal scrolling.

  14. Thanks Timothy! I'm using REMS for the entire project rather than EMs like you do. Unfortunately this seems to conflict with the scroll interaction. Do you have any pointers or work-arounds for this (other than use EMs)? 🙂

  15. Awesome tutorial! However, I can’t seem to get one thing right. When scrolling, the section simultaneously scrolls horizontal and vertical while it only should scroll horizontal during the interaction and after the interaction it should continue scrolling vertically.

    Does anyone know what might be the problem here? I don’t use a CMS list but just divs in flex box. I have made sure that all the classes are the same as in this video and in the code. The simultaneous horizontal and vertical scrolling started after I put in the custom code bit. Before the custom code the interaction worked properly.

  16. Great video Timothy, I have been trying to get multiple horizontal scrolls on a page. Any thoughts on how I can dynamically set this part of the custom code $('html').css('font-size', moveDistance + 'px'); as I move from one horizontal scroll to a second (or third)?

    After duplicating some of the functions in the custom code, I am unable to get a way to dynamically change this so the REM value in the animation just picks up the first one and then the other scrollers scroll too far as expected horizontal width is fixed.

    Welcome any help and guidance 🙂

  17. hey, Timothy thanks for this awesome tutorial as always. I've been struggling with an issue that I'm sure it's an easy fix or perhaps something I missed. When the content inside the div that has the interaction start appearing, the items are already scrolled to the left, but when it gets to the middle of the screen it resets to the correct position. I'm using the Wizardy technic, I don't know if this has something to do. I'll appreciate some help! thanks!

  18. Thank you so much for this Tim!! I tried to implement this, but I already had the Scrollify script implemented for section snapping. Once I put in your script, my whole page is broken. Are these two scripts not compatible?

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!