scroll snapping and pinning effect while translateY

[BhaskarG]

Hello,

I want to achieve a scroll snapping and pinning effect on a website

I want each section to scroll one card (height 100vh), and to pin. I don't want a user to scroll through several sections at once. I have been able to achieve the stack cards vertical carousel(code pen attached) with help from this community but I can't figure out how to make it pin, and not scroll multiple sections at once.

Thanks in advance.

See the Pen ExOLgaj by Bhaskar-Guthula (@Bhaskar-Guthula) on CodePen

[mvaneijgen]

Are you sure ScrollTrigger is the correct tool for that? Sounds more like you're are describing what the Observer Plugin is build for! Check out the docs and this demo https://greensock.com/docs/v3/Plugins/Observer

 

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

 

Here is your pen with snapping enabled, but ScrollTrigger is build to animate things on the users scroll, if you want to ensure only ever one card is scrolled you'll need to look in the the observer plugin. Hope it helps and happy tweening! 

 

See the Pen zYMjoxz?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[BhaskarG]

@mvaneijgen Thank you so much for your help!