Jump to content
Search Community

Achieve Horizontal scroll with immediate snapping of sections on scroll

toosumit test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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.

Web 1920 – 1.png

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

Link to comment
Share on other sites

This isn't actually horizontal scrolling. It looks like that site is listening for touch or mouse wheel events and then advancing an animation.

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.

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • Solution
13 minutes ago, Cassie said:

This isn't actually horizontal scrolling. It looks like that site is listening for touch or mouse wheel events and then advancing an animation.

 

Yup, I'm with Cassie on this.

 

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

 

See the Pen YRzRyM by PointC (@PointC) on CodePen

 

See the Pen MzWzyv by PointC (@PointC) on CodePen

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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. 😎

  • Like 3
Link to comment
Share on other sites

Timeline first and then hooking it up is almost always the way to go! Glad we could help!

 

3 hours ago, toosumit said:

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.

And thanks for this. ☺️I've got two talks this week - I sometimes get a bit stressed in advance and forget to focus on why I do it.
Super happy to hear they've inspired you. Worth the nerves!

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...