Disable Mousewheel Events Durring A Tween

[kreendurron 3 Likes (Newbie)]

I’m working on a site that has full height sections. It is laid out as one big page with a few sections.

The user has two options to navigate the site:

They can use the mouse wheel to go back and forth to the next/previous “section”.

They can quickly tween to which ever section they choose via the standard off-canvas menu on the side.

 

Codpen Here:

 

The problem I'm having is that if you scroll the wheel quickly multiple mouse wheel events fire before the animation can complete its tween. This interferes with the next sections animations.

You can see this in the console as shown in the attached screenshot.

 

I hope someone can point me in the right direction as to how I can temporarily disable the mouse wheel until the entire animation has played out and is ready to accept another scroll wheel event.

 

Thanks,

Nicholas Brown

See the Pen ryBrLY by kreendurron (@kreendurron) on CodePen

[Jonathan 5,176 Likes (Superhero)]

Hello kreendurron, and welcome to the GreenSock forum!

I'm not near my computer right now. But you could wrap the inner function of your mousewheel event handler with a if check isTweening() which returns a boolean. Either true or false.

https://greensock.com/docs/#/HTML5/GSAP/TweenMax/isTweening/

TweenMax.isTweening( element );

So could be something like this

if(TweenMax.isTweening( element )){
   // is tweening
} else {
   // not tweening
}

[PointC 8,599 Likes (Superhero)]

Hi kreendurron 

 

In addition to Sir Jonathan's excellent wisdom, you can also look at the isActive() method.

 

https://greensock.com/docs/#/HTML5/GSAP/TweenMax/isActive/

 

Happy tweening.