Jump to content
Search Community

Need help with ThrowPropsPlugin track()

martis 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

Hey all,


I want to track a timelines time() getter, then later do a ThrowProps tween using dynamic time...


I figured out how to track the timeline's time() with

ThrowPropsPlugin.track(tl, "time");
console.log("velocity is: " + ThrowPropsPlugin.getVelocity(tl, "time")); //works

later I call this tween and I get no results, any suggestions?

ThrowPropsPlugin.to(tl, {throwProps:{time:targetTime}}); //nothing? targetTime exists


Link to comment
Share on other sites



time() is a method not a timeline property.

ThrowPropsPlugin.track(timeline, "time");

Give that a try and let us know how it goes.


Also if you can set up a live sample, fork this codepen of the GreenSock collection:


See the Pen HjfsK by GreenSock (@GreenSock) on CodePen


It has Draggable as well, but you can remove that if you want.



Link to comment
Share on other sites

In the ThrowPropsPlugin call, you're not adding the the duration. Remember that throw props animates a given property, at a certain speed until it stops after the time you indicate:

// this animates the time property at a given speed -> targetTime
// after 1.5 seconds (second parameter) the property won't be animated
ThrowPropsPlugin.to(tl, 1.5, {throwProps:{time:targetTime}});


  • Like 1
Link to comment
Share on other sites

Not sure, but I'd suggest you pause() the timeline as soon as you create the throwProps tween.

If the timeline is trying to play (which adjusts time()) and throwProps is trying to adjust time() there could be a conflict and the timeline might win.


If that doesn't solve it, please create A CodePen demo as Rodrigo suggested. It would alleviate a lot of guesswork.

Link to comment
Share on other sites

Rodrigo, matris is correct - the ThrowPropsPlugin.to() method has no duration parameter because the entire point of that method is to create a tween that automatically figures out the appropriate duration dynamically based on velocity and a bunch of other throwProps-specific factors. 


I also suspect Carl is correct about maybe your timeline not being paused or something (tough to say without seeing a codepen demo). 


For the record, when a timeline is playing at a normal timeScale, the velocity of the "time" would always be exactly 1. 

  • Like 1
Link to comment
Share on other sites

Hey all,


I made a simple codepen that closely illustrates my logic setup.


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


When you hold the button down I am manually changing the time() of the timeline


When you release the button I am performing a throwProps tween. Notice that the time() does not tween to the desired targetTime (6).


Thanks, getting closer!

Link to comment
Share on other sites

There were a few problems. First, here's the fixed codepen:




  1. You set the throwProps value to the END value rather than the velocity. In other words, throwProps:{time:6} is interpreted to mean that the initial "time" velocity should be 6 units per second but you meant to define the max/min end values.
  2. In order to deliver the most intuitive behavior, the plugin will automatically speed up the tween in certain situations like when the initial velocity is adequately slow and there's a max/min/end value that's exceeded. For example, imagine dragging past the end of a scrollable area, slowing your mouse down a lot and then releasing - you probably wouldn't truly want ThrowPropsPlugin to match the velocity and proceed to the snapped/capped value because it would go REALLY slow even though it's technically accurate. So there are some thresholds that the plugin imposes but they're based on a unit-to-time ratio of common properties like x, y, rotation, etc. which tend to be within a certain range. However, in your case you're animating the "time" value itself which has a much different/smaller unit ratio, so it was much easier to trigger that threshold that speeds things up. I needed to set a special "unitFactor" property to 1000 (or some high value - there's no magic to 1000 exactly, but the default is 1 and setting it to 1000 basically prevents the auto-shortening of the duration from kicking in). This is a VERY rare scenario. In fact, I don't think anyone else has ever run into it, hence my decision not to document the "unitFactor" property (potentially confusing users). 

The next release of ThrowPropsPlugin will have some logic that automatically looks for if it's a tween of "time" or "totalTime" and it'll automatically adjust the unitFactor so you don't need to. One other thing I needed to do was accommodate unitFactor when "end" was defined instead of a "max" and "min". That'll be fixed as well. But you don't need the updated plugin to get the correct behavior you were looking for - just define the unitFactor and the max/min/velocity properly as I did in the example and you should be golden. 


Does that resolve things for you? 

  • Like 3
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...