Jump to content


ThrowPropsPlugin: need different event handler to get correct draggable.x

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

This is incredibly fun software to work with.  I'm fairly new to JavaScript and your docs and samples have been fantastic. 


In the Codepen I have a series of rectangles drawn on a canvas.  When you drag or throw the canvas the expected rectangle index is shown below the canvas container.  In the onThrowComplete handler I set up ThrowPropsPlugin.to so that one of the rectangles stops at the center of the screen.  


During onThrowUpdate and onThrowComplete I update the expected rectangle index but sometimes the value is off.  This can usually be observed by slowly dragging the canvas to the right so that a rectangle almost snaps to the center of the screen.  The position is also updated when onClick occurs so then the correct index is observed.


Am I not using the code correctly or is there an event I can use that fires when the canvas finally snaps into position?

See the Pen epRxqv by picadipity (@picadipity) on CodePen

Link to comment
Share on other sites

Glad to hear you're enjoying the tools. 


We actually created ThrowPropsPlugin to solve a very particular problem that it looks like you're attempting to solve too - smoothly adjusting the landing position to "snap" to specific values or ranges without that sudden jerk at the end. It can do all the calculations for you as soon as the mouse/touch is released and ensure that it glides to a stop exactly where you want perfectly smoothly. 


I forked your demo and simplified the Draggable code to rip out all your custom tweening logic and instead just apply a "snap" in the Draggable with your values:



Is that what you're looking for? 

  • Like 1
Link to comment
Share on other sites

Yes, this is exactly what I am looking for.  So nice to see the code is much simpler.



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