Perfect Horizontal Scrolling CMS in Webflow
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- 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
Join my Webflow Wizards Community
/ timothyricks
Find the code for this project at www.notion.so/timothyricks/CM...
View the project cloneable at webflow.com/website/TRICKS-CM...
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096 - แนวปฏิบัติและการใช้ชีวิต
GENIUS! I can't get enough of your tutorials! Mind blowing. Thanks so much for sharing your knowledge
Thanks for the tutorial, Timothy!
This horizontal scroll is smooth as heck!
This is just amazing. I am amazed by how you come up with interesting videos everytime. Appreciate your efforts. ✨
Now that I have watched this one, waiting eagerly for the next one 😄
I was just doing one of these the other day, and beating myself up over the dynamic aspect of it! Thanks T!
Thanks for a great tutorial! This was driving me nuts using just the interactions.
Insane. #1 source of top-rate, real life, useable Webflow knowledge.
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.
A great, clear tutorial Timothy. Thank you.
Great tutorial for a great animation! Very clear explanations. Thanks so much for sharing this.
Bro you're earning me so many promotions. I'm self-employed, but that's not the point. Thanks for the videos!
Wow, this is real pro videos, thanks timothy
This is fantastic, Timothy. Thank you!!!
you legend mate, thanks for making this video. super helpful and very much appreciated
Absolutely brilliant! Thank you so much!
Thank you Timothy. This is perfect!!
Insanely helpful, thank you!!!
Thanks again Timothy!
You're a genius! Thanks for an awesome tutorial
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
You're a genius! Thanks Tim!
Awesome video !!
Absolute legend. THANK YOU
Just have to give it to you. Thanks for amazing tutorials and you are incredibly skilled.
Thank you for the encouragement :)
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.
Great video man;)
THANKS🖤
thanks
AWESOME
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".
Thanks for this comment, I was struggling finding it out what was happening! 😅
i have to watch your videos at .75 speed but I appreciate em.
Love how you explain the WHY behind every decision you make and walk us through your thought processes (including the initial solutions that don't end up quite working). Learning so much from you videos thank you!!!
that emoji is cursed tho
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?
Love your work! Im trying to use the scroll for multiple categorys, so as the page scrolls vertically each section does a side scroll and continues to scroll vertical?
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.
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.
Hey Timothy, I hope you're well?
Great video so thank you for the help! I am struggling with something however and i have seen a few people struggling with the same thing, was hoping you could help? When using this horizontal scroll with the custom code, i cannot seem to have a smooth scroll using custom code as well? I have tried both the locomotive smooth scroll as well as luxy but both working together seems to break the horizontal scroll? any idea how to get around this but still use the smooth scrolling with the horizontal slider?
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)? :)
Having the same problem - did you happen to find any solution?
Is there away to turn the horizontal scroll of for mobile screen devices?
I love you
Thank you so much for this video! It works so great on desktop. I wonder, is there a way to make the scroll on mobile left to right instead of up to down? On mobile users usually scroll this kinds of cards from left to right.
Thanks again! You do an amazing work! :)
Thanks for the feedback! I added a desktop only version to the code. Side scrolling could be handled in WebFlow natively with overflow set to scroll
@@timothyricks thank you for the answer!
@@timothyricks Hey Timothy, thanks for this awesome video, so much value ! I have an issue, I don't find any desktop only code on the notion and i dont know how to cancel the horizontal scrolling for tablet and lower screens, thanks in advance 😁
This is amazing! Been looking for this very thing for several projects. Thanks Tim.
One question and there may not be a solution but can this be modified to work for varying width items. So for example showing photos in portrait and landscape mode side by side in the scroll without having to show a fixed aspect ratio?
So glad this is helpful! Yes, it's possible just a little more complex to calculate the distance and speed. I'll keep this in mind as an update idea!
@@timothyricks I'm looking for the same solution, did I miss the update?
@@adriennwhite Same I need this now too :(
@@timothyricks I was able to get the varied width working however on navigating to a new page in a collection with a different total width breaks calculateScroll() for some reason but works on refresh, Iused the Gsap only version. is there a way to invalidate() and rerun calculate scroll on page load. I can't find the correct answer anywhere.
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?
Any chance to make it loop, so when it reaches the last item, it scrolls to first again?
can I use this for full page horizontal scrolling instead of sticky multidirectional scrolling?
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 :)
I think I'm having the same issue. -1 REM doesn't work for me. Do we need to adapt anything?
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.
Hi and thank you for making this video. Not sure if you or anyone else are still commenting here, but I'm having an issue with this solution having the list items sort of glitch out on mobile - any ideas?
Edit: It is not specific to mobile, but rather happens when interacting with the list items by touch (either on a mobile phone or in chrome dev tools)
👏👏👏👏
This is AWESOME! You're not using em's your Wizardry method though...is there a reason why?
Thank you! I just wanted to show that this trick works with px and basic development techniques too.
Is it possible to have a scroll snap within the javascript?
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.
That sounds like something do with how you have applied sticky positioning, did you work it out Ivo?
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 ?
i've found the problem for those who need: it was the number of item in view that was higher than the number of item that i could have in view ( the size of my item allowed me to fit maximum 2 items in view and in the code it was set for 3 item in view)
Does anyone know how to disable this on mobile? I would like my design to switch to a grid layout on mobile instead.
is it possible to make it work with more than one instance per page? it seems that when I have two different cms lists on page, on both of them length is added. thats with old code provided. the updated code doesn't scroll but few hundred pixels, no matter what setting
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.
Hey Tim,
How do I make the GSAP Draggable plugin work with this code? I'm trying to figure out how to do this, but to no avail.
too much space above and below of horizontal sections, is there a way to decrease this space? as we applied 100vh i have small boxes in horizontal scroll and that leave too much space below and above how can i decrease this space?
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.
I have the same! Did you get it fixed?
@@aldoheubel was it a problem with one of the divs (the contianer perhaps) having overflow hidden?
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!
Best to drop a read-only project link, but it sounds like the interaction has begun as soon as you scroll in to view. Just double check within the interactions, under animation boundries, you've set "0% is when the element is FULLY visable" check 5:11 in the video
i think i've having the same issue. it appears at the center and then basically glitches back to the start correct? i have "0% is when the element is FULLY visable" set. did you ever figure out a solution to fix the glitching?
@@JaytelProvence Drop a read-only link, it's too vague
Hello, in my case, i had a glitch that the card train reset back with a certain % of scrolling in/out view (half of the card - my cards are 100vh). I resolved it just with setting the "Animation boundaries" to "0%: when the element is FULLY invisible" & "100%: when the element STARTS EXITING". It works perfectly now.
Thank you for the tutorial!
On both my personal follow up example and your clonable site the interaction still doesn't work and the collection only moves for -1REM. I doubled checked all the class names. Where the issue can come from?
Thank you
So, you need to name your Collection List as 'list' as it needs that specific class name. That fixed this issue for me!
Is there a tutorial that talks through the instance where you'd want to have more than one of these sliders on a single page? I'm finding that if I have more than one slider, the first slider factors in the width of the secondary cms sliders.
yeah the same issue here.. Did you manage to resolve it?
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?
Good question! I’m not sure if horizontal scrolling would work with scroll snapping because that usually relies on each section being exactly 100vh
@@timothyricks thank you, that makes sense! Just joined your Patreon, I will see if there's anything else fun I can do :)
@@OhemgeeJennii Thanks so much! Welcome to the wizard community
Is there code without CMS?
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.
Having the same issue. Did you find a solution?
@@chrishely8586 Nope I did not discontinued this approach and went for something else
Cloneable doesn't scroll now?
This interaction isn't working. It always flickers when you're scrolling, jumping to the first card of the list. No idea how to fix it.
I am getting some glitches too
Have you used a Javascript Library for this code that isn't visible on-site? I've been fiddling with this all day and cant seem to get it to work for some reason. Its just refusing to scroll horizontally, despite copying the code exactly, naming the classes identically and using the same H,W etc.
I’m sorry to hear that! It doesn’t use any external js libraries. You could try checking the console tab for any errors with conflicting code. The biggest things to check are that the interaction moves all elements with that class from 0rem to -1rem and that there’s no other custom code affecting the html font size. Also that there are more items in the list than the number set for the “items in view” part of the code.
@@timothyricks Thanks so much for your reply! I love your content, your videos have really helped me up my webflow dev capabilities. I seem to have got the scroller to work. However its not loading with the page (usually takes a few minutes for it to work if at all) and its not going through the full range of items in the list, but is stopping about halfway (theres about 30 cards). Any Ideas? The custom code is in the closing body tag section and is only under some custom cursor hover code, so not sure why its taking so long to load. Any help would be much appreciated!
@@timothyricks I have come across a font size issue, I don't have any custom code, however all of my typography is in REMs, when I paste the script the font size goes to 480px. Any idea how I could solve this?
@@karinapapalezova9374 Good question! Sadly, this method isn’t compatible with REM font sizes because they can only inherit from the html font size which this code changes to reference the move distance in the WebFlow interaction. PX or EM font sizes would work with this method though.
@@olliewink365 @Timothy Ricks mine is also stopping halfway
Has anoyone else Problems in Safari?
This is doesnt work anymore?
did you get this to work?
It works, just recreated it just now.