toosumit

Thanks @Cassie for this direction. It never crossed my mind to build a timeline first. Got the desired result. Btw, big fan of your work. Discovered you 2 weeks back and have binged almost all your talks. I even used the color plum in my pen?. Keep inspiring. Thanks @akapowl , made the final solution using this reference. ?

Hey guys, I am trying to tell a story which can be achieved through simple slides and carousels, but I want to add some life to it. I came across a page that does exactly what I am trying to do - https://www.prevint.pt/. Fell in love with this implementation. From the source I can see that it has a wide <ul> with 100vw <li> sections and on scroll the <ul> is translated left ( amount = width of section ). Seemed life a fairly straightforward situation and I am sure that this page is using GSAP. But I am unable to figure out few things: Should I use any third party scroll library along with GSAP to do horizontal scroll ( as in the reference site there are no scroll bars ). Animate the<ul> to translate left on first mouse-wheel event and ignore subsequent mouse-wheel events until animation/transition is complete. Controlling/Scrubbing the slides with the custom navigation at the bottom( but that's secondary concern here). I have tried different approaches but none of them could do this. The attached codepen is the basic one with snapping sections but they don't snap immediately ?. Can someone please point me in the right direction. UPDATE: Attached codepen with the solution.