[Achieve Horizontal scroll with immediate snapping of sections on scroll]

17 hours ago, Cassie said:

I would probably start off by creating the animation timeline. Then once that was looking how I wanted I'd use event listeners to listen for the right events and then advance or reverse the timeline as needed.

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.

 

 

17 hours ago, akapowl said:

@PointC actually made some neat sliders some time ago - horizontal and vertical - that could maybe serve as inspiration or a starting point at least.

Thanks @akapowl , made the final solution using this reference. 😎

[Achieve Horizontal scroll with immediate snapping of sections on scroll]

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.

See the Pen ExWLxyp by spark25 (@spark25) on CodePen