Jump to content


Animations along a SVG path

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

Dear Green Sock pros,


We are developing a Formular 1 simulation for which we depend on "cars" (=dots) moving on tracks, that we already built as SVG path. We are delighted by GSAPs animation capabilties so we would very much like to use it. 

Sadly it seems, it supports animation along a path only based on bezier curves with a value list, but not on SVG path'.

Does anyone know a workaround or have information about the implementation of SVG path support.


Thanks a heap!



Link to comment
Share on other sites

Thanks a lot for your quick response. That sounds like our solution! 

Which membership do I need to use that? Is the "green" enough? 


Thanks again

Link to comment
Share on other sites

  • 3 months later...

Dear Superheros, 


Thanks for sheding light on this feature. 

The last thing I cant grasp is, if its possible to alter the timing of the animation during runtime. Working on a race game its necessary for example to slow down the movement speed of items after certain events. 

As we are looping the track for up to 60 rounds, altering the animation duration (in SMIL)setting produces unwanted/unrealistic effects. Is there a solution within the bezier/morph plugin?


Thanks again for a hint!

Link to comment
Share on other sites

You can adjust the speed of your animation(s) by using another tween to change something like its duration or timeScale. However, pulling something like this off in a racing game sounds pretty involved. You might be better off animating it using the ticker/requestAnimationFrame. But of course this all depends on the type of game you're making.
First off, here's a couple threads about using a tween to change the speed of another tween.
I created an animation that does something similar to what you're asking, but it's based more on simulating gravity. It also has speed based events, triggering a barrel roll when the jet falls below a certain speed threshold.

See the Pen XXbLer?editors=0010 by osublake (@osublake) on CodePen


I'm using canvas to do the rendering there, but the underlying data is pulled from an SVG using the MorphSVG plugin. Understanding how everything works in that demo can be a little difficult, so I made a reduced version using SVG as the renderer.

See the Pen LGpzBo?editors=0010 by osublake (@osublake) on CodePen


Here's an overview of how it works. I first create a paused Bezier tween and then loop through its progress in 1000 steps. At each step I record a timeScale value based on the rotation of the element. So if the the rotation value is positive, I decrease the running timeScale value. If the rotation is negative I do the opposite. When the tween is playing, I just update the timeScale to a value I recorded earlier, which is based on the tween's current progress. 


BTW, SMIL is going to be removed from the next version of Chrome.

  • Like 3
Link to comment
Share on other sites

Hi Blake, 


Thanks for your very helpful hints and links. 

I studied your last example and played around with it to simulate the pit stop but it produces funny results:

See the Pen MyKEyB?editors=0010 by Montego (@Montego) on CodePen


Now as I dont want to overstress your helpfullness and as this feature is only  a visualisation for our game which is mainly strategic, it would make sense to oursorce this part of development. Do you or Greensock offer that kind of service or how could I find someone to help us out here?


Thanks again for your ideas



Link to comment
Share on other sites

I'm not available at the moment for hire, but you could make another post looking for help. I'm sure there are plenty of other GSAP users out there who would be able to help you out.


But it looks like you are pretty close. Instead of doing it like I did, another approach you might take is to trigger different events based on the progress of the tween. So if you know that a pit stop should be triggered when the progress is 0.9, add it to a timeline that way instead of checking for the speed. 

  • Like 1
Link to comment
Share on other sites

Yes, as you said: the solution is pretty close but I would even have trouble converting the whole thing to a timeline. Also I am not really sure if thats the best way to go as we have 18 cars in the race and they all need their independent timeline and speed. 

Too bad we cant get you for this litte mod ;-)


Well i'll try to post a freelnace offer in the forum then. 


Thanks for your help.

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.