Mason
Mason

Reputation: 11

Snap scroll to div in horizontal scroll via lenis smooth scroll and framer motion

I have a section on a portfolio site that turns to a horizontal scroll. I am using lenis smooth scroll on the site at-large, and framer motion to achieve the 'sticky' section that turns to horizontal scroll. Within the section, there are 'cards' that display a project image and some info about the project...

I want each div within the section to stop automatically as the user scrolls through each project. I have tried using CSS 'scroll snap', but haven't been able to get it to work. Possibly because I'm missing some CSS for both the section that contains the divs and each div itself, but I'm not sure, I've tried it every which way...

Should I be using some kind of JS solution? Maybe react-use-scroll-snap? Is there something in Lenis or Framer that is disagreeing with the CSS solution? Posting pics of the section in question here, I think there's a simple solution, just need some guidance, thanks!

section code for project cards div that I want to 'snap' to current functionality where it just scrolls through the divs without stopping

I've followed tutorials on CSS scroll snap to no avail.

Upvotes: 0

Views: 953

Answers (0)

Related Questions