Detecting onWheelEnd while using Observer

[PixeledCode]

So I tried looking through docs but I couldn't find a way to detect when the wheel event ends when using Observer. Is it possible through GSAP or there needs to be a custom solution to detect when it ends?
 

I only need the function to trigger when the scrolling ends, otherwise it will go to the end on a single wheel scroll. 

 

Thank You

See the Pen RwdVvPY?editors=0010 by PixeledCode (@PixeledCode) on CodePen

[Rodrigo]

Hi,

 

There is no such event (wheel end) on the browsers native API so there is no way for Observer to actually check for that.

 

If you want to prevent the natural scrolling you can prevent the default event with Observer as shown in this demo:

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

 

See the Pen 1ccf60146d680c09ba6074bf9132778d by GreenSock (@GreenSock) on CodePen

 

But beware that preventing the normal wheel event after the user can actually scroll through your page, would result in some odd looking behaviour and odd UX (personally I wouldn't enjoy it). It would be far better to enclose that in a particular container that is clearly delimited by some specific color/border so the user can infer that interactions in that particular section work in a different way, make your UI as intuitive as possible.

 

Finally this seems odd to me:

function handleMouseUp(e, isScrolled) {
  const { x, startX, deltaX } = e;
  console.log("wheel handler");
  console.log(deltaX, startX, isScrolled);
  if (isScrolled) {
    if (deltaX < -15) {
      updateSlides("prev");
      return;
    }
    if (deltaX > 15) {
      updateSlides("next");
      return;
    }
  }
  if (x > startX && x - startX > 50) {
    updateSlides("prev");
    return;
  }
  if (x < startX && startX - x > 50) {
    updateSlides("next");
    return;
  }
}

If you're checking for the mouse wheel event, the deltaX value will always be 0 because the mouse wheel works on the Y axis by default unless you hold the shift key while moving the wheel, so regardless of the isScrolled boolean, the rest of your conditions will never met and nothing will happen.

 

Happy Tweening!

[PixeledCode]

10 minutes ago, Rodrigo said:

Hi,

 

There is no such event (wheel end) on the browsers native API so there is no way for Observer to actually check for that.

 

If you want to prevent the natural scrolling you can prevent the default event with Observer as shown in this demo:

 

 

 

 

 

 

But beware that preventing the normal wheel event after the user can actually scroll through your page, would result in some odd looking behaviour and odd UX (personally I wouldn't enjoy it). It would be far better to enclose that in a particular container that is clearly delimited by some specific color/border so the user can infer that interactions in that particular section work in a different way, make your UI as intuitive as possible.

 

Finally this seems odd to me:

function handleMouseUp(e, isScrolled) {
  const { x, startX, deltaX } = e;
  console.log("wheel handler");
  console.log(deltaX, startX, isScrolled);
  if (isScrolled) {
    if (deltaX < -15) {
      updateSlides("prev");
      return;
    }
    if (deltaX > 15) {
      updateSlides("next");
      return;
    }
  }
  if (x > startX && x - startX > 50) {
    updateSlides("prev");
    return;
  }
  if (x < startX && startX - x > 50) {
    updateSlides("next");
    return;
  }
}

If you're checking for the mouse wheel event, the deltaX value will always be 0 because the mouse wheel works on the Y axis by default unless you hold the shift key while moving the wheel, so regardless of the isScrolled boolean, the rest of your conditions will never met and nothing will happen.

 

Happy Tweening!

Yes that deltaX things is indeed weird. I only added it to showcase what issue I am facing. I only want the wheel to trigger when swiping on a trackpad from laptop

[Rodrigo]

27 minutes ago, PixeledCode said:

Yes that deltaX things is indeed weird.

Mhhh.... what's weird about it? If the Observer event has a variation on the X axis the deltaX value will be different than 0. When using the mouse wheel, the variation of the Observer event will only be on the Y axis, so deltaX will always be 0. That's the way it should be.

 

Here is a fork of your codepen that shows a simple way to achieve what you're looking for (just for the wheel event):

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

 

For the rest of the events, better create a different event handler.

 

Hopefully this helps.

Happy Tweening!

[PixeledCode]

36 minutes ago, Rodrigo said:

Mhhh.... what's weird about it? If the Observer event has a variation on the X axis the deltaX value will be different than 0. When using the mouse wheel, the variation of the Observer event will only be on the Y axis, so deltaX will always be 0. That's the way it should be.

 

Here is a fork of your codepen that shows a simple way to achieve what you're looking for (just for the wheel event):

 

 

 

For the rest of the events, better create a different event handler.

 

Hopefully this helps.

Happy Tweening!

oh this got closer to result. it's still triggering the function 2-3 times before `isTweening` state is changed. I cleaned it up a bit, created different handler

See the Pen JjzyjqQ?editors=0010 by PixeledCode (@PixeledCode) on CodePen

[Rodrigo]

Hi,

 

In your latest demo there is nothing related with deltaY. I mentioned that the wheel event only reports a deltaY value and you're still using deltaX in your demo.

 

Please create a minimal demo that actually reflects the issue you're having. The demo I added in my previous post is working fine with the wheel event on the latest chrome and firefox.

 

Happy Tweening!

[PixeledCode]

6 hours ago, Rodrigo said:

Hi,

 

In your latest demo there is nothing related with deltaY. I mentioned that the wheel event only reports a deltaY value and you're still using deltaX in your demo.

 

Please create a minimal demo that actually reflects the issue you're having. The demo I added in my previous post is working fine with the wheel event on the latest chrome and firefox.

 

Happy Tweening!

Oh. Sorry, I think I did a bad job on explaining. I was trying to do this https://gsap.com/community/forums/topic/37731-horizontal-scroll-on-trackpads/

[Rodrigo]

Hi,

 

As mentioned in the thread you linked trackpads normally trigger wheel events, you can console them in order to check them and see the event being triggered/reported by the browser. You're going to have to run your own custom logic in order to safely detect whether or not the trackpad event is on the X axis or the Y axis checking the deltaX/Y values, but that is mostly a custom logic scenario and not a GSAP related issue.

 

As far as I can see in my laptop, the trackpad does reports deltaX and deltaY values depending on the direction of the gesture with two fingers on it.

 

Happy Tweening!