Jump to content
GreenSock

styke

Throwprops + draggable | Get velocity and time onDragEnd?

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'm very new to the amazing GS and having some trouble wrapping my head around it. 

 

I've got an element I'm initializing like so: 

 

 roulette = Draggable.create(".roulette", {
    type:"rotation", 
    throwProps: true,
    onDragEnd : function(){
              
    }, 
    onThrowComplete : function(){
              
    },
    onThrowUpdate : function(){

    }
  });

Is there anyway I can return the velocity with which the the rotation was thrown and rotation time onDragEnd? Ideally I would be able to return the velocity of the spinning roulette at any time as it slows down.

I've tried using the track() function, but I can't get it working properly. This stuff is very confusing to me!

 

Thanks in advance.  

Link to comment
Share on other sites

Sure, you can tap into ThrowPropsPlugin's getVelocity() method for any properties that are being tracked. Draggable automatically turns on velocity tracking for the target based on whatever type you're using. So, for example:

Draggable.create(".roulette", {type:"rotation",
	throwProps:true,
	onDragEnd:function() {
		console.log("velocity is: " + ThrowPropsPlugin.getVelocity(this.target, "rotation"));
	}
});
  • Like 3
Link to comment
Share on other sites

 

Sure, you can tap into ThrowPropsPlugin's getVelocity() method for any properties that are being tracked. Draggable automatically turns on velocity tracking for the target based on whatever type you're using. So, for example:

Draggable.create(".roulette", {type:"rotation",
	throwProps:true,
	onDragEnd:function() {
		console.log("velocity is: " + ThrowPropsPlugin.getVelocity(this.target, "rotation"));
	}
});

Thanks so much! One more question - is there any way I can return the duration of the animation? 

Link to comment
Share on other sites

Sure, the Draggable instance has a "tween" property that refers to the TweenLite instance, so you can grab its duration() if you'd like:

Draggable.create(".roulette", {type:"rotation",
	throwProps:true,
	onDragEnd:function() {
		console.log("velocity is: " + ThrowPropsPlugin.getVelocity(this.target, "rotation") + " and the duration is " + this.tween.duration() + " seconds.");
	}
});

Just make sure you've got ThrowPropsPlugin loaded and throwProps:true set so that a tween is created when you release the mouse/touch. 

  • Like 3
Link to comment
Share on other sites

EDIT: I think I've worked it out, thanks so much for your replies. Have a nice day!

 

Link to comment
Share on other sites

  • 1 year later...

Hey Jack, I'm trying to track the velocity on rotation, using your example above.

But the console always spits out the velocity as being: NaN.

 

Can you help me identify, why I'm not getting the velocity?

 

Here's my Draggable instantiation:

myDraggable = Draggable.create('#wheel', {
      type: "rotation",
      throwProps:true,
      onRelease:someReleaseMethod,
      onDrag:updateDirections,
      onDragEnd:function() {
        console.log("velocity is: " + ThrowPropsPlugin.getVelocity(this.target, "rotation") + " and the duration is " + this.tween.duration() + " seconds.");
      },
      snap:function(endValue) { 
          return Math.round(endValue / rotationSnap) * rotationSnap;
        }
      });

function someReleaseMethod()
{
      myDraggable[0].disable();
}
Link to comment
Share on other sites

Hey buddy!

 

Thanks for the codepen example!

 

It turned out though, that I was disabling the draggable instance, onRelease as well.

 

I had a function to fire, when I released, to set the Draggable object to disabled, so the user couldn't drag until the end of the animation.

This I moved into the enDragEnd method, after the line where I use the getVelocity method, and that worked for me. 

 

I updated my previous post, to show the mistake I was making.  

 

Thanks for the quick response! :)

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