Want to achieve same functionality based on scroll event

[akrdesign]

I have created this 3D carousel, currently it is working based on click event but I want to get this functionality based on scroll event. I set the height of the container is 100vh that's why scroll event is not calling anyone please help me with this.

See the Pen ZEPgKde by akrdesign (@akrdesign) on CodePen

[mvaneijgen]

Have you seen the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ with it you can watch for scroll events (and all other kind of events), so I've wrapped your animation code in a function and on click or on scroll it now calls next(), as you can see you could also implement a previous() function and have it work the other way round. Hope it helps and happy tweening! 

 

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

 

Side note: you probably also want to page to scroll normally at some point,  so here an example that mixes normal scroll with the Observer plugin

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