Observer wheel question

[Palke]

Hi guys. I have a little "problem" that I am trying to solve. If there is a way, for now I am out of ideas. If anyone could pitch in, would be really awesome!

 

Attached is the observer demo where I added just timescale for the timeline, to demonstrate my struggle.

 

I do have some animations tied to the wheel event, that are pretty short > 0.5/1s each. I do want the wheel control the animations but the problem I am facing is while using touchpad / mouse that has infinite scroll enabled.

 

This is causing that when I scroll too fast / swipe fingers on the touchbar aggressively, the animations are playing as in "loop".

 

I was looking for a solution to actually run the "next" animation only, when person does another scroll / swipe and ignore it while the previous callback is being fired. For now, I am simply flagging variable to prevent this - in the "onDown" and "onUp" = true, and then in "onEnd" = false.

 

This somehow works, but if I continuously swipe on touchbar, the "onEnd" never fires and no animations is done (as expected)

 

Is there any possibility to get something as "onWheelStart" event? Is it even possible?

 

Thanks for any suggestions

 

[EDIT] Playing with wheelSpeed, tolerance and onStopDelay seems to resolve my case.

See the Pen vYzpgQM by Palke (@Palke) on CodePen

[SteveS]

I don't know of anything out of the box. It's kind of a complicated question because scroll implementations vary by browsers and the feature sets are not completely unified. Not to mention that it can be annoyingly difficult to work with scroll in the first place.

In the infinite scroll / trackpad scenario, I assume that once the user has stopped their physical motion, the velocity of the page scroll will always decrease. Therefore, we know if a new scroll has been initiated if the velocity of the page on the current tick is greater than on the previous tick. For every tick, or in our case in onChange, we compare the current velocity to the previous velocity and then save it for the next tick.

I roughly tried this, and the issue I ran into was that there is an acceleration period for trackpads. It takes several ticks to reach maximum velocity. This causes the system to detect a new scroll multiple times for a single scroll. In the ideal solution, we would observe for velocity increases and then start watching for a decrease to know that the interaction was completed. In a less ideal solution I whipped together just now; we can instead see if the animation is playing and only say there is a new scroll if that is the case.

 

onChange: function(self) {
    if (animating) return;
    const currVel = Math.abs(self.velocityY)
    if (prevVel < currVel) {
      newScroll = true;
      console.log(prevVel, currVel, "new scroll");
    }
    prevVel = currVel;
  },

onDown: () => !animating && newScroll && gotoSection(currentIndex - 1, -1),
  onUp: () => !animating && newScroll && gotoSection(currentIndex + 1, 1),

This works all right compared to the ideal. Not sure how much better you can get with it. I'd figure out the ideal but it's quite a bit of work and might be funky on various devices.

See the Pen XWPVMvw by StevenStavrakis (@StevenStavrakis) on CodePen

[GreenSock]

If you just want a relatively simple way to know when scrolling starts/stops, how about this?: 

let isScrolling = false,
    scrollTimeout = gsap.delayedCall(0.1, () => {
      isScrolling = false;
      console.log("scrolling ended");
    }).pause();
Observer.create({
  type:"scroll,wheel",
  onChangeY: () => {
    if (!isScrolling) {
      isScrolling = true;
      console.log("scrolling started");
    }
    scrollTimeout.restart(true)
  }
});

Of course if you're loading ScrollTrigger, that makes it super easy to just listen for those events, like ScrollTrigger.addEventListener("scrollStart", () => {...});

 

I hope that helps!