Create Horizontal Scroll section within Entire page

Hey gang, I’m working on creating a website that starts with two sections and the third section has a horizontal scroll animation. After that i want to continue down the page. I recently created a horizontal school interaction via workshop tutorial but now can’t find a way to add additional sections and build out a page. IF anyone has any experience with this please help me out. My working link is this one

Read- only: https://preview.webflow.com/preview/tg-exp?utm_medium=preview_link&utm_source=dashboard&utm_content=tg-exp&preview=6a800e5eeee9569486043c4d66fa63d3&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I made this: http://horizontal-scrolling-sticky-section.webflow.io/

It’s describing the principle of making such an horizontal scrolling section in the middle of a page.

This worked really well! thanks for creating this, i was able to duplicate and create my own horizontal scroll. I’ve got one more question, that maybe you also encountered: If i wanted the scrolling section to stack on mobile how would i change my current structure?

read-only: https://preview.webflow.com/preview/tg-exp?utm_medium=preview_link&utm_source=dashboard&utm_content=tg-exp&preview=6a800e5eeee9569486043c4d66fa63d3&mode=preview

1 Like

on mobile, you’ll set the horizontal section width to Auto, and the parent element (the one with the big height) height:auto. Then you’ll set the flexbox of the horizontal section to vertical and wrap.