Jump to content
Search Community

ThrowPropsPlugin & Draggable oddity

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

I am using ThrowPropsPlugin on an element, $x.  When it is complete, I reset its position via 

set( $x,{x:0, y:0})

 and run the same ThrowPropsPlugin again.  It works like a baseball pitching machine.  Here it is:


See the Pen NRZRgz?editors=1010 by jedierikb (@jedierikb) on CodePen


Now, if I add this one line of code to that example, and also make the element Draggable via 

Draggable.create($x, {});

Then the baseball pitching machine does not work as expected -- the element $x begins out of bounds.  Here it is:



Advice?  Thanks.

See the Pen WGLGRy by jedierikb (@jedierikb) on CodePen

Link to comment
Share on other sites

First of all, thanks for providing an excellent reduced test case! I wish all questions were accompanied by those. It makes it so much faster to troubleshoot. 


The reason this is happening is that Draggable automatically turns on velocity-tracking for x/y properties (if you have ThrowPropsPlugin loaded). That's what allows it to so naturally respond to flicks/drags; when you release, it can instantly calculate the velocity based on the previous recordings (it's constantly tracking for the last few ticks and averaging those numbers, as that provides the most accurate, natural results).


In your example, you set the velocity for both x and y to "auto" which basically means "I have turned on tracking, so grab the current velocity from there". But remember, you're doing that tween immediately after having set the x value all the way back from 100 to 0 which means it's got a pretty high velocity backwards! Therefore, it's taking that into account, and going backward a bit before moving forward again. It's doing exactly what it's supposed to, believe it or not :) 


You can turn off tracking right after you create your Draggable if you want:

ThrowPropsPlugin.untrack($x, "x,y");

But that also means that it doesn't make a whole lot of sense to use "auto" for velocities in your ThrowPropsPlugin tween. The only reason that's kinda working right  now is that you've set your maximum and minimum durations to exactly 0.5, thus it's forcing the tween to be 0.5 seconds long AND you're forcing the end value to be exactly 100, thus it's fitting that in there. I don't see any value in doing a ThrowPropsPlugin tween at all the way you're doing it in fact - why not just do a regular tween that lasts 0.5 seconds and goes to x:100? 


"auto" velocity is really nice when you need things to be reactive and totally dynamic based on user interaction, or sometimes even when you're doing a different tween and want to smoothly take over mid-tween and pick up whatever momentum there was previously, redirecting it somewhere else. 


Make more sense now? 

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