Jetchy Jetchy - 5 months ago 67
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.,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', {
  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=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>

<img id="dial" src="" width="250" height="250">