Jump to content

Hermes Grau

ScrollTrigger snap just if is close to label (something like css scroll-snap-type proximity)

Recommended Posts



I am looking for a way to prevent the snap to labels functionality of ScrollTrigger if it is not close enough to any label (like an amount of pixels, or a function to build a logic to prevent snapping).

The result I am looking for should be similar to the css property scroll-snap-type: proximity.


Is it possible?


  • Like 1
Link to comment
Share on other sites

There isn't a way (built in) right now but this sounds like a good feature request 👀

Link to comment
Share on other sites

You can use a function-based snap value and run whatever logic you want inside of that and return where you want it to snap (or not). 

Link to comment
Share on other sites

Thank you Jack!
I didn't notice that.


So, I've tested it and for now my solution could be:

snap: (value) => {
  const snapPoints = [0, 0.5, 1];
  const proximity = 0.1;

  for (let i = 0; i < snapPoints.length; i++) {
    if (value > snapPoints[i] - proximity && value < snapPoints[i] + proximity) {
      return snapPoints[i];

Now I just need to find the way to calculate the snap points dynamically from the sections/labels positions.


Working codepen:

See the Pen xxWQNWM by hermesgrau (@hermesgrau) on CodePen


Anyway, as Cassie said, could be great to have this as a built in option.
For whole page sections I feel more natural to let the user stop whenever he/she wants, and fix the position just on the edges.


Thank u both!


  • Like 1
Link to comment
Share on other sites

Nicely done!

Happy to help with the last little bit - This will be a good example for people to learn from, thanks for popping by.

See the Pen WNzLeWX?editors=0011 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Thank you Cassie!

This is much better


I've improved a little bit the example, because labels was being added to the end of the sections. If a section is taller than the window, it didn't snap to the start of the section, just to the end.


Here is the result with a larger section

See the Pen qBoLWeW by hermesgrau (@hermesgrau) on CodePen

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.