Jump to content


Freelancer for SVG animation wanted

Recommended Posts

Dear Greensock Pros, 


We are developing a Formular 1 Race Game. The game is mostly of strategic nature but as a visualisation we also want to show the final races in a very plain and 2Dish style like shown in the codepen.

We would like to pass an array of objects to GSAP-Module with all the data of the 18 participating drivers:

  • id
  • name
  • avg time (this player will need for one round based on his settings)
  • pitstops (array of lap numbers in which the players plans to do pitstops)
  • pitstop delay (s)
  • probability of accident
  • probability of technical problems

All the GSAP has to do now is to animate those 18 dots along the SVG track according to the avg time every player needs for each round, which should have a little fluctuation, maybe 2%, each round. We dont have to show a realistic movement (slower in curves and faster on straights) but if that can be done easily it would look nicer. The dynamically drawn course color based on speed as shown in the pen is NOT neccessary. A plain black track would do just fine.

If one of the two events (accident or technical problems) happen the car slows down and comes to a halt. 

On rounds stated as pitstop rounds, the car should follow a second SVG track which is identical to the first one, but has a pitstop-lane instead (compare: http://internet-agentur-bodensee.com/intern/pm/f1/trackItaly.html). The car will slow down on the pitstop lane and stop there for the players pitstop delay time. Afterwards it will resume the race. 

After a predefined number of rounds (48 to 62) the reace is over. 

Meanwhile the script should fill another array with the race times of each player. Thats it...


I am looking forward to your proposal and will be glad to answer questions if there are any.







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

Link to comment
Share on other sites

Here's a lead for you. Chris Gannon just posted that he is looking to take on a new project...



He's done a lot of stuff similar to your requirements. Here's a demo he created that uses a lot of SVG based motion paths.

See the Pen VeaBVv by chrisgannon (@chrisgannon) on CodePen

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