Everything posted by 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.