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

Hi @steph72. The thing is that the whole sections movement is just an animation (a timeline). The page is forced to have a height just to provoke the scroll necessary to connect this timeline animation to the page scroll, but the sections are not really scrolling. From there, I'm afraid that any function or animation related to the section's positions should be called inside this timeline at the point that you need.

You could even create different timelines for the inner sections animations, and add() to the main timeline at the right position.

Does it help?

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

Hi!

Sure, I've added a nav.

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

 

I have used ScrollTo plugin and a helper function to scroll to a timeline label.

function labelToScroll(timeline, label) {
  let st = timeline.scrollTrigger;
  return st.start + (st.end - st.start) * (timeline.labels[label] / timeline.duration());
}

 

Helper function found here: 

 

Then you can do something like this:

gsap.to(window, {
  duration: .6,
  scrollTo: labelToScroll(tl, 'your-label'),
})

 

You could add a data-scroll-to to the nav links with the label you want to target.

 

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

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

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

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!

 

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

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!