Jetchy Jetchy - 2 months ago 30
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

Answer

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>

<img id="dial" src="http://greensock.com/wp-content/uploads/custom/draggable/img/knob.png" width="250" height="250">

Comments