Jump to content

Greg Stager

Bind Values Between 0 and 360

Recommended Posts

Is there a way to bind values but not movement?

Here is the idea...

On a rotation type draggable, I know that I can always pull current value by using this.rotation and I can set bounds to lock the rotation of the object between 0 and 360.

I am wondering if I can allow the draggable to continue going forward or backward without binding the movement but have the rotation value only return a value between 0 and 360 regardless of the number of revolutions? I was hoping there was an easy way without figuring out some sort of formula.

So instead of 1 and a half revolutions returning  540 it will still just return 180 and backward rotation of -30 would return 330 but so would a backward rotation of -390.

I tried using an array but that actually had the same effect as setting boundaries.

Link to comment
Share on other sites

Not sure I'm understanding right, but I suspect gsap.utils.wrap() is exactly what you need. 

let wrap360 = gsap.utils.wrap(0, 360);

wrap360(540); // 180
wrap360(-30); // 330


  • Like 3
Link to comment
Share on other sites

That does sound promising. I will play with that tomorrow.

I am playing with an analog clock where you can drag the hands around to set the time.

Right now I am snapping every 30 so hours and minutes land on each number.





I want users to be able to drag any direction without restriction when setting the clock but using this.rotation to grab the “position“ of the hands and converting was getting hosed when going negative or into more than one complete revolution. I was looking there too, dang, looked at clamp and normalize but something didn’t seem right with those for this. Must have glanced over wrap. Its cuz I stayed up past my bedtime.

Link to comment
Share on other sites

Worked like a charm!

Thank you.


wrap360(this.rotation);   //spot on


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.