ScrollTo and ScrollTrigger sometimes triggers onEnter and onEnterBack simultaneously

[BERGWERK]

In the video provided i was either simply scrolling down or scrolling up. But somehow it simply triggers the intended onEnter and shortly afterwards the onEnterBack. 

 

EDIT: Apperently it occurs more often on a mouse than on a touchpad. 

 

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

[OSUblake]

Welcome to the forums @BERGWERK

 

Any reason you are creating 2 scroll triggers for each panel? I think it might be better use onToggle and then checking the isActive state.

 

Quote

onToggle

Function - A callback for when the scroll position moves past the "start" or "end" in either direction. Basically when the ScrollTrigger toggles its state. It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity().

 

onToggle({ isActive }) {
  if (isActive) {
    goToSection(i);
  }
}

 

[GreenSock]

3 hours ago, BERGWERK said:

In the video provided i was either simply scrolling down or scrolling up. But somehow it simply triggers the intended onEnter and shortly afterwards the onEnterBack. 

 

EDIT: Apperently it occurs more often on a mouse than on a touchpad. 

 

It looks like there are scenarios in which you can scroll WHILE the scrollTo tween is in-progress and the browser attempts to alter the scroll value in an out-of-sync way (likely because scrolling is often handled in a different thread), triggering the entry of a different section slightly. It's pretty easy to work around that with some conditional logic in the onToggle - here's the updated CodePen: 

See the Pen NWxNEwY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Better? 

[BERGWERK]

Works like a charm! Thank you guys for the fast support! ❤️

[BERGWERK]

Apparently it's still happening on some occations.
Again i just tried to scroll through the whole page. It once happened while scrolling down jumping from section 2 to 1.
And while scrolling up jumping from 3 to 4 again.

[GreenSock]

I can only reproduce that in Firefox and it appears to be caused by the fact that it alters the scroll value by a fraction. So, for example, if GSAP does a scrollTo tween to 1698 and sets it to exactly that value at the end and then you check it, Firefox actually reports it as 1698.3333740234375! So that goes beyond the threshold and triggers the next section. 🙄  Don't you love browser bugs? 

 

Here's a fork that takes an entirely different approach, with just one ScrollTrigger on the entire page that does work in the onUpdate to figure out which section to snap to, and another key is that I added "wheel" and "scroll" listeners that event.preventDefault() when there's a scrollTo tween in-progress: 

See the Pen oNwMQXz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

[GreenSock]

And here's another strategy that simply offsets things by 2px so there's a little leeway inbetween the sections: 

See the Pen YzQOxxO?editors=0010 by GreenSock (@GreenSock) on CodePen