How to rotate using MotionPath

[Karliky]

Hi all,

 

First of all, thanks for creating such an amazing library.

 

I'm trying to animate a custom object, not an element.

 

I have an issue by rotating an angle in the shortest path when using the MotionPath plugin.

 

The codepen attached shows this output:

339.13821_short
337.09226_short
...
235.45931_short
227.64605_short
218.87541_short
211.19844_short
...
162.97689_short
154.24792_short
146.05995_short
138.41946_short
130.7989_short
122.80199_short
115.38985_short
...
61.25881_short
55.98172_short
50.92818_short
46.11003_short
41.53912_short
37.47354_short
33.7308_short
30.77445_short
27.65545_short
...
12.07978_short
11.33946_short
10.7879_short
10.35917_short
10.09559_short
10.00119_short
10_short

 

I expect it to follow the shortest path, so the values would look more like this:

351.13821_short
....
359.24124_short
....
1.13821_short
....
5.13821_short
....
10_short

Please note that I'm using the MotionPath API, I need to rotate that angle to many different values.

 

Setting autoRotate: true sticks the value at 18.43495_short which is weird.

 

thanks in advance,

Cheers

See the Pen rNOzjLv by karliky (@karliky) on CodePen

[ZachSaucier]

Hey Karliky and welcome to the GreenSock forums!

 

You should include the _short as the value of the property in the tween vars, not the actual value of the object:

See the Pen oNjewvJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that make sense?

[Karliky]

That makes sense but the values are still wrong in that codepen. The shortest path for an angle at 350 degrees to 10 would be to go from 350 to 351, 352, 353..360...1,2,3,4,5,6,7,8,9,10.

 

And not going down from 350 to 10.

[GreenSock]

Yeah, the built-in directional rotation is for DOM elements, but this is probably what you're looking for: 

See the Pen OJJBRWp?editors=0010 by GreenSock (@GreenSock) on CodePen

[Karliky]

I've already tried that before opening this issue. That doesnt work for MotionPath values, right? That's just a rotation from angle A to angle B. But how do I anímate it like angle A to angle B to angle C...

 

I expect the MotionPath to animate angles too as It can animate normal values.

[GreenSock]

Actually, sorry, I hadn't read the whole thread. I thought you were just trying to do normal directional rotation for generic objects. Now I see that you're trying to connect it to a MotionPath that you're building with generic objects/coordinates. That's definitely more tricky. I think the most efficient way would be to use a cleanup function that converts your rotational values into relative ones. Let me get back to you about that. Stand by.

[GreenSock]

Alright, you can leverage the "relative" feature of MotionPathPlugin and use a helper function to rip through your array of points and convert them into relative values. This is where you'd do the conversion of rotational values into the "shortest" direction: 

// converts the points into RELATIVE values, optionally making rotational values go in the shortest direction.
function relativize(start, points, rotationProperty, useRadians) {
  let cur = start,
      cap = useRadians ? Math.PI * 2 : 360,
      result = [],
      p, i, point, rel, dif;
  for (i = 0; i < points.length; i++) {
    point = points[i];
    rel = {};
    for (p in point) {
      rel[p] = point[p] - cur[p];
      if (p === rotationProperty) {
        dif = rel[p] % cap;
        if (dif !== dif % (cap / 2)) {
          rel[p] = dif < 0 ? dif + cap : dif - cap;
        }
      }
    }
    result.push(rel);
    cur = point;
  }
  return result;
}

Here's a fork that shows it in action: 

See the Pen MWavvQM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

The only thing it won't do (which shouldn't really matter) is convert the final rotational value to be the "real" one that was fed in via the points array.  In other words, a value of 10 may end up being 370 but in terms of rotational values that looks identical anyway, so it shouldn't matter in the vast majority of cases. 

 

Does that help? 

[Karliky]

Hey @GreenSock! Thanks for your help.

 

To me, that looks defenitely closer to what I'm looking for.

 

However, I've implemented it and it looks like there is something wrong.

 

 I'm not sure if it's ready to manage multiple values of a motion path in a linear way - ease:none-.

 

It looks like it moves "erratic" somehow.

 

Just take a look at this video I recorded, it uses your relativize function.

 

 

 

As you can see, on second 0:33, the camera starts looking to the right, it should look forward.

 

so, I decided to break the problem into a small test.

 

Here, I just make the camera rotate around. I expect Gsap to move the camera smoothly among all the points. Instead, what I see is that the angle goes from one point to another one then STOP, again one to another then STOP, and so on.... So, it looks that the angle is not being interpolated in a linear way like the X/Y/Z values. 

 

Take a look here at second 0:17:

 

 

The camera angle should move smoothly as you can see in this video - which uses a custom code I wrote, not using TweenMax-:

thanks for your help.

[GreenSock]

It's very difficult to troubleshoot just by looking at videos. I updated my codepen to show that it is indeed interpolating as expected (I put a red box that implements the rotation value just so we can see it visually rather than interpreting a bunch of logged values): 

See the Pen MWavvQM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Am I missing something? 

 

Can you please provide a reduced test case in codepen that clearly shows the problem? 

[Karliky]

I will try to reproduce It in a test case but It will take some time to do It, thank you!