Karliky Posted April 29, 2020 Share Posted April 29, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 29, 2020 Share Posted April 29, 2020 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? 1 Link to comment Share on other sites More sharing options...
Karliky Posted April 29, 2020 Author Share Posted April 29, 2020 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. Link to comment Share on other sites More sharing options...
GreenSock Posted April 29, 2020 Share Posted April 29, 2020 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 1 Link to comment Share on other sites More sharing options...
Karliky Posted April 29, 2020 Author Share Posted April 29, 2020 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. Link to comment Share on other sites More sharing options...
GreenSock Posted April 29, 2020 Share Posted April 29, 2020 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. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted April 29, 2020 Share Posted April 29, 2020 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? 2 Link to comment Share on other sites More sharing options...
Karliky Posted April 29, 2020 Author Share Posted April 29, 2020 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. Link to comment Share on other sites More sharing options...
GreenSock Posted April 29, 2020 Share Posted April 29, 2020 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? Link to comment Share on other sites More sharing options...
Karliky Posted April 29, 2020 Author Share Posted April 29, 2020 I will try to reproduce It in a test case but It will take some time to do It, thank you! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now