Jump to content
Search Community

interrupting ScrollToPlugin

erikb test
Moderator Tag

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

What is the recommended way to interrupt the ScrollToPlugin?

 

http://api.greensock.com/js/com/greensock/plugins/ScrollToPlugin.html

 

Example: If the window scrollbar is tweening and the user grabs the scrollbar, I want to stop the tween.

 

It seems it should be as easy as stopping the tween, but I see in the source there is an underscore / private method in there called _kill ... should I call that directly?

 

Thanks

Link to comment
Share on other sites

No no, you don't need to call that _kill() method - that's for internal use (as is almost everything that has a "_" prefix). There are two much easier ways:

  1. Store a reference to the tween and just call its kill() method, like this:
    var myTween = TweenLite.to(window, 1, {scrollTo:{y:0}});
    //then later...
    myTween.kill();


    -OR-

  2. Kill all the tweens of a particular object (in this case I assume you're tweening the window or maybe a div) like this:
    TweenLite.killTweensOf(window);


  • Like 1
Link to comment
Share on other sites

Got it, thanks. A related question about my aforementioned example:

 

If the window scrollbar is tweening and the user grabs the scrollbar, I want to stop the tween.

 

I was planning to accomplish this by noting the scrollTop position of the scrollable div before the animation, and during the animation update this value in the onUpdate callback. Also in the onUpdate callback, I was planning on checking if scrollTop was a different value than it was last step of the tween, indicating something else had moved the scrollbar.

 

However, since onUpdate is called after the new value is set, I am not sure where to make this check to stop the tween. Is there a way to get a callback before the new value is updated, or to get the previous value in onUpdate? Or maybe there is a different way to solve this problem.

 

Thank you.

Link to comment
Share on other sites

Good idea putting the logic into the setRatio function. However, this does not kill the tween, right? ( myTween._active returns true until the full duration of the tween is completed ).

 

Would it be good practice to kill the tween if skipX or skipY is true in the setRatio function?

Link to comment
Share on other sites

Yes, it does NOT kill the tween. I don't think it would be good to kill it because that assumes that there are no other properties that need to be tweened and that the onComplete shouldn't be fired. I don't feel comfortable making those assumptions. See what I mean? What if I was tweening a div's scroll and its width or height or backgroundColor - if the user grabbed the scroll bar it would suddenly stop tweening the color and all other properties in that tween too if I killed it automatically.

Link to comment
Share on other sites

Yes, if I bundled all of my tweens together, then they would all be killed. Good point.

 

However, if I don't design my tweens this way, and only used one tween to move my scrollbar, then I am left with a running tween in the background.

 

For situations like this, I think I will use the aforementioned proxy object. Thank you, this has been an informative exchange.

Link to comment
Share on other sites

Yes, if I bundled all of my tweens together, then they would all be killed. Good point.

 

However, if I don't design my tweens this way, and only used one tween to move my scrollbar, then I am left with a running tween in the background.

How about if I add a "autoKill" boolean option that'll give you that behavior? So the tween might look like:

 

TweenLite.to(window, 2, {scrollTo:{y:500, autoKill:true}});

 

See the attached updated plugin file - does this work well for you?

ScrollToPlugin.js.zip

Link to comment
Share on other sites

  • 3 weeks later...

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.
×
×
  • Create New...