Jump to content
Search Community

Tween Rotation Jumps

JarethB test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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

 

 

  • Like 5
Link to comment
Share on other sites

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

  • Like 3
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...