Jump to content


follow path and rotate at 360 different angles from array

Moderator Tag

Recommended Posts


I created this video from linkage(a program where you can link obkects and animate the links)


I wanted to create the same with gsap with the coordinates and angles that come from an array(or follow the two extend points off 'fxedbar' and 'pushbar'). The 'array solution' would be the fasted to code I think (but how to use those data)
I already arrived to the point where fixedbar rotates ok, and the pushbar follows the path in the middle, as you can see in the pen
My issue is the constantly changing angles, which I can code into the svg but it will become huge.
A link to a solution please?



See the Pen BaPrZQW by aanscharius (@aanscharius) on CodePen

Link to comment
Share on other sites

Hi @aanscharius welcome to the forum!


This really looks like the example on https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.convertCoordinates() 


See the Pen GRJEGzB by GreenSock (@GreenSock) on CodePen


I'm no pro at he convertCoordinates function but this video dives really deep in it. Hope it helps and happy tweening! 



Link to comment
Share on other sites

Yes, partially! Thanks! That is one solved partially,but is pure rotational, as in my animation the coordiantes come from an array and differ on each rotational angle, as I understand we can put whatever newcoordinates into the motionpathplugin.convertcoorinates, so I need to define an array for each angle, but I think that is pure Java? Nothing to predetermine in gsap? (gsap works with timelines, not with angles)

Link to comment
Share on other sites

Would you know where I can find the code for the second video?


Link to comment
Share on other sites

I'm not sure what you mean by "the code for the second video", but the blog post with some demos are here: 


Link to comment
Share on other sites

Thank you for that quick answer.
No it is not in that blog, I mean the code for the two squares, I comprehend how it works but I don't get it into code. I lack something, I think it is in the first jscript lines. If I would have the code it would be simpler. I get stuck when starting with multiple nested 'joints'.

As the start of the post says: "Warning: it's a bit advanced, but hopefully you'll see how crazy-useful these capabilities can be. "
I can handle advanced if I can reproduce the example, and start from there. I don't succeed in reproducing, so I miss something.

I want two points of a path following another path, that is the essence.


Link to comment
Share on other sites

Hi! I'm afraid I can't find that exact demo but I'm sure we can help you to figure out how to apply it to your demo.

Maybe you could show us where you're stuck?

Link to comment
Share on other sites

Ok, thanks a lot, blue numbered dots below:


1: the path1 to follow: not an issue

2: the path2 that will follow: the path itself not an issue, but the motionpath is an issue (please look at the video at the start of this topic, and also attached here)
3. A fixed rotating line 900px (point N connected to the center: so the N positions are a circle), not an issue to let this rotate but spline 2 has to follow point N

4: the center: not an issue

5: a fixed length line 800px , which follows path1 at point V (blue dot6), pulling/pushing point W (which in se could be seen as path3, which is an 800px offset of path1)

6: 360 points on the path1

7: the distance between N and W never changes= 80px


The latter is my big problem.: N follows a circle-path, N-W= 80 px, AND W follows also a path3 (red spline2 is always relative to N-W)

I was able to let the rectangle follow the path

See the Pen XWBEjmJ by aanscharius (@aanscharius) on CodePen

but this follows a linear center of the rectangle: how to do this with  spline2, which has to follow the circlepath AND path3(not drawn but easy to calculate) in my case, (which is a simple absolute offset of green path1)

to conclude: two points of spline2 need to follow each another path

remark: the paths need of course geometrical correct (this I calculate) and doable.



Link to comment
Share on other sites

That is definitely beyond the scope of help we can provide for free here in the forums, sorry. It's not a trivial thing but if you're trying to have two different points on the same element travel on two different paths, you'd probably have to map them independently and then in an onUpdate adjust the rotation accordingly. Like match up one set of points, and then rotate the element to align the others (if it's even within range which is another important limitation). Good luck with the project! 👍

Link to comment
Share on other sites

Hi, thanks for this quick answer. The solution you explain was my first idea, but then I changed when I found these opssibilities. And logically it has to be in range, or it won't work. Will send you an update when it's ready. Thanks very much for your swift feedback!


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