ScrollTrigger snap on each section (vertical) & snap on each carousel item (horizontal)

[dplgngr]

I'm using ScrollTrigger with smooth-scroll.js here.

 

Here's the site im working on: https://bit.ly/3uPs1P8
Entire js animation: 
Please view on browser dev tools mobile mode at (375x812), responsiveness not yet completely done.

 

What I'm trying to achieve is that when the user scrolls they get snapped to the adjacent section (for vertically oriented sections) and then when the user reaches the bottom "Where Next?" section (horizontally oriented) the user gets snapped to each of the adjacent carousel item. Notice that the carousel item does not cover the entire width of the viewport (https://live.staticflickr.com/65535/51975827749_5af96f401a_o.png). I managed to get the horizontal scrolling but when i try to scroll down it does not snap to its adjacent carousel item most of the time. I also want to add a draggable functionality so the users can also drag through the horizontal carousel (with snapping).

 

Here's a video of what I'm trying to achieve: https://drive.google.com/file/d/1An5IZs2PqcTKP2x_iBn86mWgwMnlimYc/view?usp=sharing

 

See the Pen wvpPwaP by dplgngr (@dplgngr) on CodePen

[OSUblake]

Hi dplgngr,

 

Unfortunately we just don't have the resources to offer free general consulting services (please read the forum guidelines) but you're welcome to post in the "Jobs & Freelance" forum to see if you can hire someone to help. Or you can contact us directly if you'd like to engage GreenSock on a paid basis for consulting services.