Jump to content


animating a draggable ?

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've a draggable component, replete with rules for onDragStart, onThrowComplete, etc. which, in turn, animate other effects.


I am now tasked with implementing a button which will simulate dragging and throwing that component so it hits a snappable target. (as the dragging behavior was not discoverable)


Is there a straightforward way to do this?  A phantomDragAndThrower?

Link to comment
Share on other sites

From what I understand of your explanation it sounds like you could just create throwProps tween on the target of the Draggable.

When the tween is done you may have to call update() on the Draggable instance.


If you need your phantomDragAndThrower to pretend to drag to a few different locations you could put a few tweens in a timeline that have the target moving around back and forth and then create a ThrowProps tween.




I'm exactly sure what you mean by the snappable target. if you can provide a very simple,  reduced CodePen demo that shows the basic features it will help us consider solutions.

  • Like 2
Link to comment
Share on other sites

Thanks Carl and sorry for not providing an example codepen.  


Your own example is a good one to use an example: 

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


I've added two buttons to the bottom -- I am trying to understand how I would simulate throwing the rectangles so they hit specific targets on the grid.  In this case green would move over to the right 1 and red would move down 1.  


I am sorry to say I do not understand how I 'create a throwPropsTween on the target of the Draggable', but am encouraged that it sounds like it will be straight forward.

Link to comment
Share on other sites

Thanks Carl, but I am still having trouble.  Take a look:

See the Pen yaEPZd?editors=0010 by jedierikb (@jedierikb) on CodePen


When I manually drag the red block, it is locked to the Y axis and also it moves another block via `onDrag` and `onThrowUpdate` callbacks.


But when I initiate a simulated drag via ThrowPropsPlugin, the locking and callbacks are ignored.  Is there a way for the ThrowPropsPlugin to simulate a drag so that those callbacks are honored?  Or how should I re-organize my code (hopefully keeping it DRY) so the throw logic for locking and callbacks works manually (e.g. via the mouse) and automatically( via the ThrowPropsPlugin)? 

Link to comment
Share on other sites

WHat are the possible animation effect available in ThrowsPropsPlugin please

Link to comment
Share on other sites



ThrowProps doesn't support any sort of snapping.

However you could apply your own onUpdate callback to force certain values during the tween.


You may also want to check out the ModifiersPlugin: http://greensock.com/modifiersPlugin

The first demo on that page gives an example of snapping rotation. 




Hi John Angularjs,


Welcome to the forums.


ThrowProps is most commonly used in conjunction with Draggable so that elements can be dragged and then thrown respecting the exact speed of the drag.

However, you can use it totally on its own. ThrowPropsPlugin can track the velocity of any value and apply it to a tween. 

Its great if you have objects already moving and you need to create a new animation on them to a new end value and you want to perfectly match the existing speed.


If you need more help, please start a new thread. It makes it difficult when issues are mixed like this.



  • Like 3
Link to comment
Share on other sites

Using `onUpdate` will make it work with just a bit of code refactoring.  Thank you.


However, it would be cool to have ThrowPropsPlugin called on a Draggable execute that Draggable's logic as they're all tools in the same toy box.  I was surprised it did not 'just work'.

Link to comment
Share on other sites

Not sure what you're trying to do, but perhaps these demos will help you out.


A simple throw tween on 1 target...

See the Pen 57f44ec67cc82f1166db185dcf5ff7f1?editors=0010 by osublake (@osublake) on CodePen


Throw tweens on several different targets...

See the Pen PNYZEB?editors=0010 by osublake (@osublake) on CodePen


And you can setup a throw tween to go to particular position. In this demo I'm using a reversed throw tween to intercept a moving target.

See the Pen QEOEAN?editors=0010 by osublake (@osublake) on CodePen


You can apply those techniques to animate different Draggable instances. Notice how I DO NOT set throwProps: true on the Draggable instances. I initialize the throw tweens in the onDragEnd callback.

See the Pen 9b67c34586f62058091ed16829c58ed5?editors=0010 by osublake (@osublake) on CodePen


And you can call different callbacks/methods for a Draggable using call, apply, or bind. Please see this post.




  • Like 5
Link to comment
Share on other sites

erikb, we really try to make everything "just work" in the most intuitive way across all our products but the behavior you anticipated here would have some negative consequences if we made that all "automatic", like:

  • It would force a backwards dependency from ThrowPropsPlugin onto Draggable, but I think that's inappropriate. In other words, lots of people might want to use ThrowPropsPlugin on its own, completely detached from anything Draggable-related. But if we made ThrowPropsPlugin automagically check if the target is also Draggable and then reach into Draggable and enforce its logic, it suddenly creates that dependency and requires loading Draggable too (even if it's not necessary in their project). 
  • Doing so assumes that the user WANTS all that Draggable logic applied, but I don't think that's a solid assumption to always make. In other words, guys like Blake to all kinds of crazy innovative stuff with the tools and probably don't want to have their hands tied in that way - they should be able to create a ThrowPropsPlugin that isn't shackled by the logic that Draggable was imposing on manual dragging. 
  • It actually seems a little counter-intuitive in some ways, like you have a ThrowPropsPlugin tween that defines both "x" and "y" velocities (and bounds), but it sounds like you're expecting it to just completely ignore the "x" aspect. If it's defined in a tween, it'd probably feel weird to most people to have it ignored because there's some other Draggable instance somewhere that has different logic applied. 

We really try not to make too many assumptions about how people code their stuff. We don't want to overreach in the name of "convenience". It's a fine line to walk sometimes. We generally air on the side of caution because GSAP caters to advanced animators who do aggressive stuff and need robust, extremely flexible solutions.


We definitely appreciate hearing suggestions, though. We're always striving to make things better and there's surely room to improve. 

  • Like 2
Link to comment
Share on other sites

Thanks for the explanation.  I appreciate the reasons given and agree with you on flexibility first.


To recap: for a project I was asked to implement a draggable with some moderate logic (locking axis depending on current state, moving other elements in tandem).  It was really easy to do with Draggable.  I was pleased.


Seeing how great the Draggable looked, I was asked to simulate the draggable when a button was pushed (in addition to the implemented click and drag behavior).  My first thought was, 'oh, I bet when I use ThrowPropsPlugin it will engage all of the existing Draggable callbacks' and when it did not I was surprised it did not work. 


So I came to the forum for guidance.  Thanks to Carl I quickly understood how to refactor my code and completed the requirement.  Thanks to Blake I have a lot of inspiration and examples.  Thanks to greensock I understand the design decisions behind the tools I use.  Much appreciated.

  • Like 3
Link to comment
Share on other sites

You're welcome. Thanks for taking the time to share your appreciation.  :mrgreen:

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