Jump to content
Sign in to follow this  
erikb

interrupting ScrollToPlugin

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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

I have, for now, opted to update a proxy javascript object, check its tweened value against the scrollable div's current value, and decide to either apply the new tweened value via css or to cancel the animation.

Share this post


Link to post
Share on other sites

Ah yes, I see what you mean. Good point. Please try the attached [revised] ScrollToPlugin.js file and let me know if it works well for you. It should automatically do exactly what you're talking about internally (stops controlling the scroll if the user does it manually).

ScrollToPlugin.js.zip

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

NandiTo:

 

Attached is an example of using a proxy object animate the scroll position (using jQuery).

 

:Erik

proxy.html

Share this post


Link to post
Share on other sites

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

 

Yes, that looks like it would work. Very helpful to see the implementation.

 

Thank you!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.