Bind Values Between 0 and 360

[Greg Stager 52 Likes (Contributor)]

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.

[GreenSock 16,954 Likes (Superhero)]

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

 

[Greg Stager 52 Likes (Contributor)]

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.

1=30

2=60

3=90

etc.

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.

[Greg Stager 52 Likes (Contributor)]

Worked like a charm!

Thank you.

 

wrap360(this.rotation);   //spot on