Is there a way to know which direction 'clockwise' or 'anti-clockwise' a rotation is going when using the '_short' option ?

[Jaron 2 Likes (Newbie)]

I'm currently setting a rotation value on an element and using the "_short" option - so it'll choose the shortest way to rotate to object .  I need to alter some animations based on whether it decided to go clockwise or anti-clockwise but struggling to find the best way of finding this out. Any pointers appeciated?

[Jaron 2 Likes (Newbie)]

Think i figured it out with the help from https://math.stackexchange.com/questions/110080/shortest-way-to-achieve-target-angle

 

 

[Cassie 5,147 Likes (Superhero)]

Glad you figured it out. Beat me to it!

See the Pen XWayjrg?editors=1111 by GreenSock (@GreenSock) on CodePen

[Jaron 2 Likes (Newbie)]

Thanks Cassie for your CodePen. Its much appreciated. I actually learnt a new thing from your code regarding the 'getProperty' mothod.

 

For reference this is what i had (specific to the question).

 

function bearingDirection(currentBearing, targetBearing) {
    // Anything negative is anticlockwise, positive is clockwise
    // see https://math.stackexchange.com/questions/110080/shortest-way-to-achieve-target-angle
    return ((targetBearing - currentBearing + 540) % 360) - 180;
}

let currentBearing = gsap.getProperty(".circle-bg-svg", "rotation");  // get current rotation of .circle-bg-svg
let targetBearing = 250; // Set new rotation (e.g 250)

if (this.bearingDirection(currentBearing, targetBearing) > 0) {
   console.log("Clockwise");
} else {
   console.log("Anti-clockwise");
}