Jump to content


ThrowPropsPlugin can I have more customisable 'end' property

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

Hi there,


I am trying to use ThrowPropsPlugin, I'm using canvas, so I can't use Draggable.  I want to give my x and y 'end' property an array of end positions to throw to, but these positions are not arranged in a grid.. they are at different regions of the page.


Because I want to be able to throw to various offset regions on the page,,, snapping to a grid using the 'topNotches' and 'leftNotches' arrays in the example isn't good for me.


You mention that we can provide a function instead, but I can only give the function the x or y value as the parameter.. so the function in x's 'end' only knows about x, and the y only knows about y.,


I need to define non-grid like regions, do you think this is possible?



  • Like 1
Link to comment
Share on other sites

Interesting dilemma. Here are a couple of ideas:

  1. Create a tween that has NO limitations (no specific "end") and let ThrowPropsPlugin plot where the values would naturally land. Immediately jump to the end of that tween and grab the x/y. Like yourTween.seek(yourTween.duration()) and then look at yourTarget.x and yourTarget.y and run whatever logic you want on those to determine where you want to adjust them. Then, yourTween.seek(0).kill() to make the tween jump back to the beginning and kill it, and take your adjusted x/y values and feed them into a new throwProps tween. Obviously that x and y would be plugged into the "end" value for the new throwProps tween. 
  2. Or you could try leveraging the ThrowPropsPlugin API and get the velocity of each property using ThrowPropsPlugin.getVelocity(yourTarget, "x") and ThrowPropsPlugin.getVelocity(yourTarget, "y"), then feed those to the ThrowPropsPlugin.calculateChange() to figure out where they'll land, and then run your custom logic to make any adjustments and feed the new values into a throwProps tween as the end values. 

I suspect #1 might be slightly easier. 


Does that help?

  • Like 2
Link to comment
Share on other sites

:) eek, sounds like fun.. will let u know how it goes!

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.