Perfect Horizontal Scrolling CMS in Webflow

[@MichealBeaulieu]

Insane. #1 source of top-rate, real life, useable Webflow knowledge.

[@thebakedone32]

Bro you're earning me so many promotions. I'm self-employed, but that's not the point. Thanks for the videos!

[@katarinaescobardobrijevic1629]

You're doing such amazing work for the community, thank you so much!

[@jaronarmiger1678]

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

[@kaustik185]

that emoji is cursed tho

[@tjarcovanraalte939]

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

[@jclewis33]

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.

[@Turlingo]

This is fantastic, Timothy. Thank you!!!

[@christiangoran6621]

Just have to give it to you. Thanks for amazing tutorials and you are incredibly skilled.

[@timothyricks]

Thank you for the encouragement :)

[@musicalboy9122]

Wow, this is real pro videos, thanks timothy

[@VideoTest87]

I was just doing one of these the other day, and beating myself up over the dynamic aspect of it! Thanks T!

[@timavodah5864]

Thanks again Timothy!

[@markbrutusthurman5964]

A great, clear tutorial Timothy. Thank you.

[@vitaliikoval9331]

You're a genius! Thanks for an awesome tutorial

[@adamkaufman7463]

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".

[@tuttoele]

Thanks for this comment, I was struggling finding it out what was happening! 😅

[@TheBrenski]

Thanks for a great tutorial! This was driving me nuts using just the interactions.

[@rehankhurshid]

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 😄

[@charliegliddon-creativegen9029]

you legend mate, thanks for making this video. super helpful and very much appreciated

[@elisabethcolucci1187]

You're a genius! Thanks Tim!

[@brandonsmith1638]

Is there away to turn the horizontal scroll of for mobile screen devices?

[@nicolaspettini3143]

Great tutorial for a great animation! Very clear explanations. Thanks so much for sharing this.

[@totallyempty]

Absolutely brilliant! Thank you so much!

[@labruda]

GENIUS! I can't get enough of your tutorials! Mind blowing. Thanks so much for sharing your knowledge

[@dawsonjohnson5305]

Insanely helpful, thank you!!!

[@georgy.design]

Thanks for the tutorial, Timothy! This horizontal scroll is smooth as heck!

[@chulwoo7777]

Absolute legend. THANK YOU

[@thewebart]

Thank you Timothy. This is perfect!!

[@joanditacentika]

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?

[@JonSaxton]

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.

[@thecsspage5603]

Awesome video !!

[@matthewwatson694]

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?

[@nocodekevin]

i have to watch your videos at .75 speed but I appreciate em.

[@GabrielDufresne-gy3mu]

Does anyone know how to disable this on mobile? I would like my design to switch to a grid layout on mobile instead.

[@opsisoid]

Nice question, did you solve this?

[@amandha3119]

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.

[@Brandon_M]

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.

[@timavodah5864]

I am getting some glitches too

[@trishmaguze9558]

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.

[@aldoheubel]

I have the same! Did you get it fixed?

[@timavodah5864]

@@aldoheubel was it a problem with one of the divs (the contianer perhaps) having overflow hidden?

[@joaolucaswork]

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.

[@davejemison]

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)? :)

[@kishk.8068]

Having the same problem - did you happen to find any solution?

[@eeshdsgn]

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

[@jamilahmad1277]

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?

[@totallyempty]

Any chance to make it loop, so when it reaches the last item, it scrolls to first again?

[@volodymyrsymchuk6762]

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

[@shrutikashah4513]

So, you need to name your Collection List as 'list' as it needs that specific class name. That fixed this issue for me!

[@larsson8689]

Great video man;)

[@muhammadsaad6556]

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.

[@davidbradley2308]

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 :)

[@jessypage2172]

I think I'm having the same issue. -1 REM doesn't work for me. Do we need to adapt anything?

[@Primengine]

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.

[@alchemizesounds5371]

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?

[@jgustafe]

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.

[@eeshdsgn]

yeah the same issue here.. Did you manage to resolve it?

[@siamgosling]

thanks

[@nickdemore4534]

can I use this for full page horizontal scrolling instead of sticky multidirectional scrolling?

[@daphneheraiz-bekkis645]

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.

[@matigavasheli8936]

Is it possible to have a scroll snap within the javascript?

[@andyenaod]

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?

[@timothyricks]

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!

[@adriennwhite]

@@timothyricks I'm looking for the same solution, did I miss the update?

[@katielively4007]

@@adriennwhite Same I need this now too :(

[@smithandgrain]

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

[@banders-ralfs]

THANKS🖤

[@ibuxrs594]

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)

[@laxi4ka]

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! :)

[@timothyricks]

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

[@laxi4ka]

@@timothyricks thank you for the answer!

[@alexisdematos]

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

[@4.30-pm]

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 ?

[@4.30-pm]

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)

[@franzruggiero2875]

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?

[@kazza666]

This is AWESOME! You're not using em's your Wizardry method though...is there a reason why?

[@timothyricks]

Thank you! I just wanted to show that this trick works with px and basic development techniques too.

[@aprodan5245]

AWESOME

[@KatieM-ix1jw]

Is there code without CMS?

[@whit564]

Cloneable doesn't scroll now?

[@OhemgeeJennii]

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?

[@timothyricks]

Good question! I’m not sure if horizontal scrolling would work with scroll snapping because that usually relies on each section being exactly 100vh

[@OhemgeeJennii]

@@timothyricks thank you, that makes sense! Just joined your Patreon, I will see if there's anything else fun I can do :)

[@timothyricks]

@@OhemgeeJennii Thanks so much! Welcome to the wizard community

[@olliewink365]

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.

[@timothyricks]

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.

[@olliewink365]

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

[@karinapapalezova9374]

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

[@timothyricks]

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

[@gianfrancosuito]

@@olliewink365 @Timothy Ricks mine is also stopping halfway

[@miguelmao1593]

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!

[@zendallx]

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

[@JaytelProvence]

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?

[@zendallx]

@@JaytelProvence Drop a read-only link, it's too vague

[@jokanstudio]

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.

[@leonvermij7893]

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.

[@chrishely8586]

Having the same issue. Did you find a solution?

[@leonvermij7893]

@@chrishely8586 Nope I did not discontinued this approach and went for something else

[@RevanSID]

This is doesnt work anymore?

[@itsmintvanilla]

did you get this to work?

[@timavodah5864]

It works, just recreated it just now.

[@Atoom1990]

I love you

[@des7638]

👏👏👏👏

[@RasmusLiebscher]

Has anoyone else Problems in Safari?