Native Horizontal Scroll with Webflow Interactions

Using Webflow Interactions
Include as many panels as you'd like
Panels don't have to be the same width or unit type
Get the cloneable for this project (affiliate link)
webflow.grsm.io/horizontal-sc...
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

[@jellyholler6197]

Wow, just wow. Thank goodness for you, Timothy

[@PrakashGD]

Only quality webflow channel on YT. PERIOD. Please keep up the good work. 🙏

[@ellenhossain]

Timmy, you always have all the tutorials that I end up looking for. If it wasn't for your tutorials, my motive to succeed on webflow would not be the same. Thanks a lot for everything! I will always look forward to your videos

[@rvft]

This is so trippy, I love it. I saw one dimensional scrolling tricks on websites but combining horizontal and vertical scroll together opens new ways for creative designs.

[@ryan18462]

It’s pure wizardry

[@perlishely]

Thank youb for your follow along videos. No extra words or super introdctions :)

[@vagifmammadov6555]

That -100vw trick is awesome! I remember the old horizontal scroll tutorial using -1rem as a transform interaction unit, which is not ideal for some builds. Using -100% instead is a great solution. Thank you!

[@momosch7656]

Great solution! Ive done this with my projects! Makes it so easy to switch to tablet etc.

[@silverprof1969]

Really cool Tim! Thank you for all your time and input!

[@titi_build]

Thanks so much you unlocked me!

[@dylanspencer6085]

Tim, as always, THANK YOU

[@timothyricks]

So glad this helps!

[@jsphbngrnd8847]

awesome Tim! Cheers!

[@garyvoigt321]

Stellar as usual.

[@matthewvalenzuela8148]

Incredible Video, Thankyou so much

[@wearestudiotonic]

Love it man, thank you

[@silvana9371]

THANK YOU SOOO MUCH!

[@timavodah5864]

Nice tutorial, I have already used this to replace a horizontal scroll I was already using. This is a better method. Also changing the section height reduces the amount of scroll for better UX and that can be adjusted for different screen sizes which is awesome. Now wondering how to add a progress bar with the scroll, tried adding it but it seemed to brake the hoz-scroll interaction.

[@BGary65]

Thanks!!

[@shivudesign9210]

Awesome tut 😍 just a suggection can you please a detailed video on design and thought process on creative web design?

[@AVMmmm]

TRICKS the🐐

[@ArnabFouzder-nt3pu]

Hey Timothy, great stuff! Do you happen to have the GSAP version of this?

[@horlladjosh]

Thanks for this, Tim! I'm stuck trying to achieve using the right and left arrow keyboard keys to navigate the next and previous div as opposed to scrolling slowly in between the sections. Any pointers?

[@KarlRanday]

Awesome tutorial. Do you have any advice for how to manage this without having the scrollable area 100vh?

[@dimitrisqq]

Tim, will this work with ScrollSmoother or Locomotive? Thank you for your awesome awesomeness.

[@mirrormefashion]

Your narration is clear and sounds good but it would have been nice to see your markup

[@keeeet_]

Amazing tutorial. Are we still able to use GSAP ScrollTrigger to animate elements in the panels? Edit: you can use ScrollTrigger to do it, but if you have multiple horizontal sections throughout your project, I think you need to change each class slightly, then duplicate the script to target each class. Any thoughts, Tim? Thanks so much.

[@theshivangigupta.in_]

Its super awesome, can anyone please help me with adding navigation arrows (for moving left and right) to each section, It's not working here

[@ArnabFouzder-nt3pu]

Hello Timothy, do you happen to have the video where you explained the GSAP version of this?

[@KatieM-ix1jw]

How do you make this work with a heading/paragraph box as well as the horizontal scroll of items (for a product list for example)?

[@link5059]

Hey man. Great tutorial. How might I put I heading in the horizontal section that stays sticky while you scroll though the panels and unsticks after?

[@thomasduggan_]

Did you solve this at all? Looking to do the same thing.

[@dmytrokaraulov5623]

Gsap better anyway. because you can add paralax or other scroll effects to horizontal container animation ❤

[@benvsantos]

i am currently working on an app. I wanna make the tab scroll horizontally too, can i apply the same principle too? Does the tab title and tab content work that way? example of it should be like airbnb app.

[@noahybarra-ug9cg]

when i incorporated this into my own project when i add a space or another div after im done with the horizontal scrolling the added div just gets scrolled past. how can i overcome this? the spacer doesnt work for me :(

[@mbp5863]

Really nice and precise tutorial! But I have a problem, (probably just because I'm new) the panels are not overflowing. I have 2 panels with 2 different classes and images, each taking up half of the screen. If I add one more they each take up a third of the screen, instead of overflowing. I just added the images as backgrounds to the DIVs and set the DIVs to 100VW width and 100% height. Do you know what I'm doing wrong? Thanks in advance!

[@mrclarity2]

on each panel set the sizing: don't shrink or grow...according to webflow university's video

[@ScrubsToScreensWithFibro]

once I added the panels, everything got messed up. Anyone else have this issue?

[@brandonnorris7122]

apologies if this is a dumb question, but is there a way to make this work within tab elements?

[@joshuayu9121]

how would someone get this to work with collections?

[@sophiestubinski7746]

Hey, loved the tutorial, but I got lost with the panels. How can I connect my images with the panels? Thx :-)

[@timothyricks]

Thank you, Sophie! I applied the images as background images to each panel, but you could also just add an image element or any other content inside the panel div. There’s a project cloneable in the video description if it would help.

[@Bag-Of-Toys]

You're a freakin' genius. Webflow doesn't even have an example that covers all the bases you like did here. 🫡 Bravo

[@andresAtMudra]

Hi Tim! Do you have a preferred library/way of adding snap scrolling to horizontal sections?

[@timothyricks]

GSAP ScrollTrigger handles that really well. greensock.com/docs/v3/Plugins/ScrollTrigger

[@Adam-xy9fr]

@@timothyricks Would you consider doing a GSAP horizontal scroll tutorial for Patreons?

[@TracingRobots]

thanks for this! Any workaround to make this work in mobile? same 100 vw, vh

[@timothyricks]

It should work the same on mobile.

[@TracingRobots]

@@timothyricks thank you. It works. Would like to add links to each panel image, any tips on how to see all panels so we could add links to parts of the image then. only see first panel image. thanks you!!

[@timavodah5864]

@@TracingRobots it is in the video, while working on it, switch the sitcky element to "Scroll" which adds a scroll bar .

[@TracingRobots]

have you tried to add a section link so as to go directly to section wrapper 2 (skipping section wrapper 1). I tried it and when i click the section link button it goes to section wrapper 2 but first it rapidly scrolls through section wrapper 1 then it stops at the start of section wrapper 2.

[@NoahTrierHertel]

Genius solution! Although I noticed with all types of browsers, the section loads with a delay before it being visible to the user. Is there a way to fix this?

[@timothyricks]

That might be because images are set to lazy load by default in WebFlow. Switching them to auto load might help

[@NoahTrierHertel]

@@timothyricks Thanks for the suggestion but unfortunately setting them to "eager load" did not help. Besides it's not only images that has delayed loading time - it's text too.

[@NoahTrierHertel]

@@timothyricks I just found out the section is only being loaded when fully visible in the viewport. Perhaps that helps explain what the problem is?

[@NoahTrierHertel]

@@timothyricks I fixed it! Dunno what was wrong. This time I simply copied over yours.😅

[@timothyricks]

@@NoahTrierHertel Oh awesome! So glad it's working!

[@pawelgola8269]

Since Google Chrome version 117 it's not working anymore. Any idea why?

[@tentonhead]

I believe I've found a solution. Set .section-wrapper to position: relative. Then, remove .sticky-element's margin-bottom, and wrap it inside another div set to position: absolute with top, bottom, left, and right all set to 0.

[@pawelgola8269]

@@tentonheadThanks! it works!

[@flannigan5893]

Legend thank you@@tentonhead

[@lewislatham661]

Thank you this has saved me hours!@@tentonhead

[@NicolasGavrilenko]

thank you @@tentonhead