Jump to content

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

Change speed of 'snap to' on Draggable?

Go to solution Solved by Diaco,

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



When using Draggable and ThrowProps and using snap to certain points, is there a way to increase the speed that snap happens at? Currently the div settles into position slowly, I'd like the tension to be much higher. Thanks.


Ignore: maxDuration works.

Link to comment
Share on other sites

  • Solution

Hi mrEmpty  :)


with these options you can config the ThrowProps duration  :
minDuration : Number - the minimum duration (in seconds) 
maxDuration : Number - the maximum duration (in seconds) 
Link to comment
Share on other sites

Yep, you can also tweak that using "throwResistance" :)

Link to comment
Share on other sites

  • 6 months later...

Hey guys!


I am using your suggestions above to make a wheel of fortune spin for a longer duration, but it seems that the "minDuration" option adds it throughout the entire animation. That is the "overshoot" animation takes longer as well.


I am using snap to snap to 20 degree increments, and need this to check whether the user wins or loses at the end of the spin.

Is it possible to add time (or lower the resistance enough) to the initial spin, so that my animation takes longer on the first part of the animation, and the overshoot animation just takes half a second or so? Otherwise it doesn't look soo much as a "wheel of fortune" as it looks like a "wheel of cheats" hehe. ;)

Heres a codepen example I made, to illustrate the issue:

See the Pen jEjyLK by anon (@anon) on CodePen


Thanks guys. :)

Link to comment
Share on other sites

Hey OSUblake.


Thanks man! :)

I've tried to use your codepen example, and the documentation states that the default value for the overshootTolerance is 1.

However, when I change the value to something as small as 0.1, it doesn't really minify the overshoot animation time. (I'm guessing this number is representing "seconds"?)


You see, I want the animation time to be five seconds or more, but that little "easing animation" that we call the overshoot, is not responding, as I would expect.

It's basically ignoring the overshoot, as it seems, with any other value than 0.

Take a look at the codepen here. (I forked yours).


See the Pen VYJpwW?editors=001 by anon (@anon) on CodePen



EDIT: Just found a demo, which is basically the feel I am going for! Have a look here please. :)

Link to comment
Share on other sites

That works! He makes awesome draggable stuff.


If you still want the overshoot, I was going to suggest slowing down the tween inside the onThrowUpdate function when it starts to reverse.


See the Pen xboqjr?editors=001 by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Yea, he's pretty cool. :)


Awesome, thanks for the help!
I changed the min and max duration properties to 30, so the animation would continue longer, and set the scale down tween to a duration of .2 seconds, and it looks awesome! Thanks. :)


However, I just noticed that the rotated wheel does not end in the specified rotation snap. :(

You can have a look at the codepen here, where I have changed the knob image with a wheel of fortune, to explain it more easily:


See the Pen myZwEE by anon (@anon) on CodePen


I suppose this is because the scale down tween, doesn't let it animate to the end?


Oh, and the onThrowComplete:myMethod, doesn't fire now, since the scale comes to a halt before the complete animation is done. :(

Link to comment
Share on other sites

Aha, this exposed an issue in ThrowPropsPlugin that'd feed the wrong value as the endValue to the snap function if the minDuration was very high. I have corrected this in the version that's up on codepen - https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js


(note: you may need to clear your cache or add ?revision=randomNumber to the end of the .js URL to make sure you're getting the new version)


Would you mind giving that a shot and letting me know if it resolves things for you? Sorry about that. 


To be clear, you should no longer need any of that onThrowUpdate logic, since this fix will prevent it from having to go backwards during the tween like it did before. So delete your timeScale hack :)

  • Like 1
Link to comment
Share on other sites

Nice Job!


It's not ending on the snap because the timeScale pauses the tween before it finishes. But right above it in the commented out code, is a different way to alter the rotation, which tweens the progress. If you use that one instead, it will play to the end, so it will last a little bit longer. It will also fire the onThrowComplete callback.

Link to comment
Share on other sites

Yup! That fixed it.

Link to comment
Share on other sites



Thanks for the help! It did in fact work in the codepen example, with your updates, Jack! I need to test it when I'm done with the project I'm working on right now. I'll let you know later during the day. :)


Thank you both, very much for your help. :)

Link to comment
Share on other sites

All right, I'm ready to test it now, but where do I download the newest version of the ThrowPropsPlugin?

I suppose the one in the codepen is restricted to that specific purpose?

Link to comment
Share on other sites

It's in your bonus zip download now - snag it from your account dashboard. 

Link to comment
Share on other sites

Thanks buddy. I just downloaded, and updated my entire greensock library, but the issue still exists there. :S I even tried to copy the codepen example over to my server to test the exact same code, but the overshooting still occurs. 

Am I doing something wrong, or haven't you submitted your changes yet?


I'm seeing version 1.16.1 in my dashboard, and the download popup screen says: Version: 1.16.1 updated 2015-04-09.

Link to comment
Share on other sites

Hi Isobar  :)


you ThrowPropsplugin.js version should be 0.9.9 , and seems you need to clear your browser's cashe

Link to comment
Share on other sites

Arh, it wasn't my cache. I'm using the minified classes. :) The ThrowPropsPlugin.min.js is still version 0.9.8, and that's why I didn't get the updates. :)

It works with the uncompressed class, and that should be it! 

Thank you guys very much for all your efforts! I really appreciate it! :)

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.