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.

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!

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

This is fantastic, Timothy. Thank you!!!

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

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

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

A great, clear tutorial Timothy. Thank you.

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

Wow, this is real pro videos, thanks timothy

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

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

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

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

@timothyricks

7 ай бұрын

Thank you for the encouragement :)

Insanely helpful, thank you!!!

Thanks again Timothy!

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.

You're a genius! Thanks for an awesome tutorial

You're a genius! Thanks Tim!

Absolute legend. THANK YOU

Awesome video !!

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

Great video man;)

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.

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?

THANKS🖤

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

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?

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

2 жыл бұрын

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

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

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

AWESOME

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.

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

3 жыл бұрын

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

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

3 жыл бұрын

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

2 жыл бұрын

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

@katielively4007

2 жыл бұрын

@@adriennwhite Same I need this now too :(

@smithandgrain

2 жыл бұрын

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

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

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

3 жыл бұрын

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

3 жыл бұрын

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

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

@timothyricks

3 жыл бұрын

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

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)

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.

@timavodah5864

Жыл бұрын

That sounds like something do with how you have applied sticky positioning, did you work it out Ivo?

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

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!

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.

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.

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

2 жыл бұрын

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?

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

8 ай бұрын

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

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

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)

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?

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

3 жыл бұрын

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

2 жыл бұрын

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

2 жыл бұрын

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

@jokanstudio

2 жыл бұрын

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.

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

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

3 жыл бұрын

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

3 жыл бұрын

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

@timothyricks

3 жыл бұрын

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

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

I love you

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

3 жыл бұрын

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

3 жыл бұрын

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

3 жыл бұрын

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

3 жыл бұрын

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

@giacosuito

3 жыл бұрын

@@olliewink365 @Timothy Ricks mine is also stopping halfway

👏👏👏👏

Is there code without CMS?

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

Cloneable doesn't scroll now?

Has anoyone else Problems in Safari?

This is doesnt work anymore?

@itsmintvanilla

2 жыл бұрын

did you get this to work?

@timavodah5864

Жыл бұрын

It works, just recreated it just now.