Jump to content

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

Stop/pause auto scroll on hover on one div? (ScrollToPlugin)

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I'm very new to GSAP and am trying to figure out how to pause a tween on the hover of a specific div. The code for the auto scroll was corrected in a previous forum post, but I'm now trying to make this slight adjustment because the aforementioned div is a slider. So when the mouse hovers over this div, the animation needs to pause in order for the user to click through the slides. 


I'm not sure if I need to assign a timeline to my tween, etc. in order to accomplish this? I've tried to implement some examples from the docs, but nothing has worked; just wanting to see if there's a method simpler than determining if the cursor is in its bounds. 

Any help is greatly appreciated! 

See the Pen poowEyq?editors=1111 by jsprac (@jsprac) on CodePen

Link to comment
Share on other sites

Probably the easiest way to do that would be to use a variable to keep track of the hover state and disallow the movement tween if that variable is true:


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


Happy tweening!

Link to comment
Share on other sites

@ZachSaucier Thank you, this makes sense! 


I added a timeout in an attempt to detect if the user is actually trying to hover (so that it doesn't just stop abruptly every time the mouse happens to pass over the div). Even so, I'm wondering if there's a way to 'ease' the tween.kill() so that it's not as sudden? Or would I need to add to my auto scroll/slow down the animation itself as the cursor approaches the boundaries of the div? 


Thanks again for any insight!


See the Pen PoojEde by jsprac (@jsprac) on CodePen



Link to comment
Share on other sites

I would not use a setInterval for that. It will keep running while the element is hovered, quite uselessly. 


Most likely the best thing to do would restrict the areas that move the user around the screen to say, the last 15% of the page on every side. You can do that using some simple calculations. That way users can be in full control and not always moving somewhere.

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.