Throwprops + draggable | Get velocity and time onDragEnd?

[styke]

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.  

[GreenSock]

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"));
	}
});

[styke]

 

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? 

[GreenSock]

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. 

[styke]

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

 

[Isobar]

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();
}

[Diaco]

Hi Isobar 

 

pls check this out : 

See the Pen VYJaKg by MAW (@MAW) on CodePen

[Isobar]

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!