Jump to content
Search Community

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

Jaron test
Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...