Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Disable Mousewheel Events Durring A Tween

Recommended Posts

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.



Nicholas Brown


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

Link to comment
Share on other sites

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.


TweenMax.isTweening( element );

So could be something like this

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


  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.