Jetchy - 1 year ago 166
jQuery Question

# Get rotation direction during drag - GSAP

I'm using the Greensock Spin functionality for a dial. I've seen that the getDirection() outputs whether the dial is going clockwise or counter clockwise when rotating past the starting point but I'm unable to get the clockwise/counterclockwise to work when not going past its starter point.

I'm assuming there is a way just being doing some calculations with the x/y coordinates but I just cannot figure out what.

http://jsbin.com/xudipudaku/edit?html,js,output

The rotation seems to be bound to the dial's `rotation` value. Positive / negative angle means clockwise / counter-clockwise.

You'll need to compare the current angle with the previous angle to see what direction the button is being rotated to.

``````var previousRotation = 0;

Draggable.create('#dial', {
type:'rotation',
throwProps: true,
onDrag: function() {
var yourDraggable = Draggable.get('#dial');

var dir = (yourDraggable.rotation - previousRotation) > 0 ? "clockwise" : "counter-clockwise";
console.log("Direction: " + dir + ", angle: " + yourDraggable.rotation);

previousRotation = yourDraggable.rotation;
}
});``````
``````<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>