Jump to content


Scrolltrigger horizontal and vertical sections with snap

Recommended Posts

Hi y'all!


I've been trying for a few days to get my sections working horizontally and vertically () with snap to the next or prev section(depending if you're scrolling down or up), but i'm not able to get it


My logic tells me that it is not possible at all to have the first scrolled animation (the blue/white/orange svg) and then snap the sections but i'm not an expert and I tried everything😓 I only make it work in one direction, not both (

See the Pen JjOeZPL?editors=0010 by EricCV (@EricCV) on CodePen



Another option could be to do it in this way (

See the Pen dyZQKKE by EricCV (@EricCV) on CodePen

) but snapping the slides


Any idea to try something? I'm stuck and I need some push

I've created three different codepens to show the options I've tried to achieve it... Any help would be appreciated...

Also any feedback to improve my gsap code would be perfect


Many thanks 



See the Pen wvPQXKB?editors=0010 by EricCV (@EricCV) on CodePen

Link to comment
Share on other sites

Hi Vander, 


Have you checked out the ScrollTrigger demos page? There's lots of examples of snapping in there, like for a horizontal section.


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


For something more involved like your last one, use timeline labels (see using position parameter), and then use snap: "labelsDirectional".  If you need more granular control, you can use an array of function. Be sure to check out the snapping options in the ScrollTrigger docs.

Link to comment
Share on other sites

  • 5 months later...

@OSUblake thanks for the codepen Blake! How would you speed up the snap so that it's not so slow. I've tried changing the duration and ease with no luck.




Link to comment
Share on other sites

@Greensock thanks for the answer it works great. I'm curious if there is also a way to have the scrollTrigger trigger as soon as the mousewheel is scrolled instead of having it trigger when the mousewheel stops.


Thank you!

  • Like 1
Link to comment
Share on other sites

  • 4 months later...



Posting here as my issue is somewhat related.


Basically what I want to do is to snap to any specified elements inside the fake horizontal scrolling container.


Here's a demo: 

See the Pen VwBpdGE by matias_autio (@matias_autio) on CodePen


So in this demo, I would want to snap to all the .decades. And there can be a random number of .items between them.


Only thing I can think of is to calculate their relevant positions as percentages compared to the overall width of my ScrollTrigger but it seems rather complex and I was wondering if there is an easier way to do it. 

Link to comment
Share on other sites



Using the labels directional could be one option. Here is a live example:

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


Basically loop through the elements with the distance the container will move and create the timeline so it's duration is 1 second, which is super simple since it has only one instance in it. Then just add a label on the specific time which we get by dividing the offset left of the element by the total distance. Round to 0 and 1 for the first and last element.


It might not be perfect but is the simplest solution I can think of. You could explore other avenues but those will definitely be more complicated than this.


Hopefully this helps. Let us know if you have more questions.


Happy Tweening!

  • Thanks 1
Link to comment
Share on other sites

Thanks so much @Rodrigo! Exactly what I wanted to do. 😊  But now I thought of one more thing which would make it even better. Is it possible to have something like the native scroll-snap-type: proximity ? So that it would only snap when the scroller is closer to the element. I found a promising CodePen 

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

so I'm going to try it myself.

  • Like 1
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.