Create a horizontal scroll based on sections on the viewport

Hi guys!

What do you think it's the best way to create something like this?

https://vimeo.com/839876495

I already started building it this way:

  • each category inside the sticky div has an anchor link, assigned to each section of the corresponding products categories

  • with motion.page, I've changed the background color of the categories on top based on the scroll (trigger: when the category of products enter the viewport)

What I still cannot do is making the categories div horizontal scroll in a regular way while we scroll down the products list.

Do you have any guesses? Thanks in advance!

Screen Recording 2023-06-26 at 15.59.56.mov
4.5MB