Jump to content
Search Community

Draggable Position Event Listener

G. Scott 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

Struggling a little with Draggable + throwProps. First time using this and am trying to build a div containing a long single row of objects (images, etc) that is draggable left to right, continues moving endlessly on release, and loops. So far, setting a VERY high minDuration does the trick as far as movement and overall feel. However I need a way to poll the offset position of the objects inside of the container so I can reposition as needed to achieve the endless loop.


I feel like some kind of listener where I can retrieve the X position of the objects would work best... at least thats the way I typically do it when using simple click events to trigger the movement. Are there any listeners in place that I can tap into? Or maybe there is a better way to do all of this?


Feels like I'm very close  :|

Link to comment
Share on other sites

A few thoughts:

  1. You can use an onDrag to update every time the user moves their mouse/finger
  2. You can use an onThrowUpdate to call a function every time the resulting throwProps tween renders (after the user flicks/throws). This will happen roughly 60 times per second until the tween is done.
  3. You can reference "this.x" in the onDrag or yourDraggable.x to get the x position of that Draggable's target. 
  4. You probably don't need to be setting a minDuration - you can alter the throwResistance to increase/decrease the amount of "friction" (thus affecting the duration of the tween)

Does that help?

Link to comment
Share on other sites

Yes, Thanks! I think the onThrowUpdate is what I'm looking for.


However I can't seem to get the results I want with throwResistance. It should basically feel like once it starts moving, it won't stop. Using a high minDuration seems to be achieving that for me. Are there drawbacks?

Link to comment
Share on other sites

Well, the only drawback I suppose is that you may create SUPER long tweens that go on almost forever, but you can kill() the tween when you don't need it anymore, and when another tween is created for the same property it'll kill the old one automatically for you anyway, so I suppose it's not a big deal. 


Are you saying that setting the throwResistance doesn't have any affect? Or that even setting it to a very low number still makes things stop too quickly?

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