Tween Rotation Jumps

[JarethB 4 Likes (Newbie)]

Hi, I have an X speed and a Y speed. I use Math.atan2() to calulate the angle from them, and use it to tween rotation. The following code is what I use to continually update the rotation:

setInterval(() => {
            TweenMax.to(e, 1.5, {
                rotation: (Math.atan2(targetTimeScaleX(), -targetTimeScaleY()) / Math.PI * 180)
            });
        },30)

where e is an <image> inside an SVG tag. 

 

My issue is rotating from 179deg to -180 deg, for example, rotates backwards 359deg rather than forward 1deg. Is there something I am doing wrong here?

 

 

Thanks in advanced.

Jareth

[PointC 8,599 Likes (Superhero)]

Hi @JarethB

 

You may want to take a look at the docs for the DirectionalRotationPlugin here:

https://greensock.com/docs/Plugins/DirectionalRotationPlugin

 

Happy tweening.

[OSUblake 9,990 Likes (Superhero)]

3 hours ago, JarethB said:

My issue is rotating from 179deg to -180 deg, for example, rotates backwards 359deg rather than forward 1deg. Is there something I am doing wrong here?

 

That's expected. The value needs to be mod like ((-179 - 180) % 360) + 360. Play around with SVG arc paths, and you'll see why.

 

Just wanted to point out the DirectionalRotationPlugin is part of the CSSPlugin, so you don't have use it directly. And you don't have to convert to degrees... although I'm wondering if your x and y values are reversed?

 

TweenMax.to(foo, 1, {
  rotation: Math.atan2(dy, dx) + "rad_short"
});

 

 

[JarethB 4 Likes (Newbie)]

16 hours ago, PointC said:

You may want to take a look at the docs for the DirectionalRotationPlugin here:

Hi @PointC,

 

Thanks a lot for this. I have successfully used the "_short" which has solved the issue!

 

13 hours ago, OSUblake said:

And you don't have to convert to degrees... although I'm wondering if your x and y values are reversed?

 

@OSUblake, 

That's a great option, I've switched it to rad, thanks! Also, yeah, I have the Y direction backwards atm, meaning to fix that at some point. 

 

Take it easy, and here's my revised code:

setInterval(() => {
            TweenMax.to(e, 1.5, {
                directionalRotation: (Math.atan2(targetTimeScaleX(), -targetTimeScaleY()))+"_rad_short"
            });
        },30)

 

Jareth