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)

Join my Webflow Wizards Community

Try Webflow using my affiliate link below.

[jellyholler]

Wow, just wow. Thank goodness for you, Timothy

[PrakashGD]

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

[silverprof]

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

[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

[vagifmammadov]

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!

[perlishely]

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

[momosch]

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

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

[timavodah]

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.

[shivudesign]

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

[KarlRanday]

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

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

[dimitrisqq]

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

[KatieM-ixjw]

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

[ArnabFouzder-ntpu]

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

[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-ntpu]

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

[dmytrokaraulov]

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