Streaming live at 10am (PST)

One Section without Horizontal Scrolling / Another With

I feel like I’m going insane trying to solve this, and can’t figure it out…

I want the hero/top section to NOT scroll horizontally (just vertically)
I want the second section (photos) to a) stick at 0 and b) scroll horizontally (via horizontal scroll animation - which is actually a vertical scroll)
I then want the third second to NOT to scroll horizontally (just vertically)

Note:

  • The problem seems to be that if I turn overflow OFF for the parent element, the sticky / nor the scroll will work
  • If I leave overflow ON, it does what you see in the link (wants to scroll horizontal and vertical)
  • I’ve tried wrapping everything in a div without overflow (it prevents the horizontal scrolling - but also on second section)
  • I’ve tried wrapping first section in div without overflow and not the second, but it still scrolls horizontally while in the first section
  • I’ve tried max width to 100vw
  • Currently my “horizontal track” is 400vw in height - the length of all 4 photos at full viewport
  • I’ve tried publish vs unpublish

Please help!


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