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

[Hermes Grau 2 Likes (Newbie)]

Hi!

 

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?

Thanks!

[Cassie 5,071 Likes (Superhero)]

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

[GreenSock 18,231 Likes (Superhero)]

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

[Hermes Grau 2 Likes (Newbie)]

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!

 

[Cassie 5,071 Likes (Superhero)]

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

[Hermes Grau 2 Likes (Newbie)]

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