Jump to content
Search Community

Possible to know if throw will happen onDragEnd?

jomifo test
Moderator Tag

Go to solution Solved by GreenSock,

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

Hello-

 

When using Draggable with throwProps enabled, Is it possible to know if a throw will happen during the onDragEvent?

 

My end goal is that I would not perform certain actions if the target was thrown.

 

Thanks.

Link to comment
Share on other sites

Hi jomifo  :)

 

you can call your Fn with " onThrowUpdate " &  " onThrowComplete " , and set the throw duration with " minDuration " and " maxDuration " in Draggable Vars .

 

pls read the GSAP Draggable Doc. : http://greensock.com/docs/#/HTML5/Drag/Draggable/

 

and try this :

Draggable.create("#box", {
  throwProps: true,
  onDragStart: function() {  console.log("DragStart")  },
  onDrag: function() {  console.log("Dragging")  },
  onDragEnd: function() {  console.log("DragEnd")  },
  onThrowUpdate: function() {  console.log("ThrowUpdate")  },
  onThrowComplete: function() {  console.log("ThrowComplete")  }
});
Link to comment
Share on other sites

  • Solution

To add to Diaco's great advice, you can also check the Draggable's endX and endY and compare them to the x and y to see if they're beyond a certain threshold that you decide, and if not, just kill() the tween. For example (untested, theoretical code):

Draggable.create("#box", {
    throwProps: true,
    onDragEnd: function() {
        var tolerance = 5; //make this whatever you want (minimum throw distance).
        if (Math.abs(this.endX - this.x) < tolerance && Math.abs(this.endY - this.y) < tolerance) {
            this.tween.kill(); //didn't "throw" hard enough.
        } else {
            //throwing! Do something here...
        }
    }
});

Another option is to set the minDuration super low, and then you can just check this.tween.duration() and if it's below a certain threshold, you know it didn't get thrown very hard and you can kill() it. There are other options too, but I don't want to overwhelm you :)

  • Like 3
Link to comment
Share on other sites

Thanks Jack, I didn't read the docs thoroughly enough- using endX and endY solves my use case perfectly.  I think I was presuming Greensock would not even instantiate a throw tween if the movement was so minuscule and because of that there would be a higher-level api abstraction that could be called in onDragEnd to determine if Greensock triggered the throw or not.  But doing the calculations with endX, endY works for me.

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