Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Soccer Simulation

Recommended Posts


i have an json file that contain 22 second of soccer match that contains data of 11 Home Player and 11 Away Player and 3 Referee and a Ball frame by frame.

for example: {"x":449,"y":358,"type":"H","jerseyNumber":"19"} ( type:H means Home)...


what is the best way to simulate this soccer match with pause and resume button in greensock.


sorry for my bad grammer  :|  :| 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Please understand that we can't advise you on how to organize your data or set up your interaction logic. But in simple terms the best thing to do is just loop through your data and insert tweens into a timeline based on that data. Once all the animations are in a timeline it will be very easy to play and pause. 

Here is a rough demo:



  • Like 2
Link to comment
Share on other sites

Carl beat me to it. 


Your didn't have any time data, which seems critical, but here's another example.

See the Pen XXMXBY by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

thank you so much!


i can add time to json file like your example and it's not a problem!

but in your example how can i add seek animation?



Link to comment
Share on other sites

Just like the play and pause buttons are doing.

someElement.addEventListener("click", function() {
  // Start at 1 second

anotherElement.addEventListener("click", function() {
  // Start at 25% completed
  • Like 2
Link to comment
Share on other sites

i could create nice timleline simulation with your helps!


but another problem is:

i want add or remove a player from json file, for example add a player from time 00:10 to 00:18 or remove player with jerseyNumber 19 from time 00:10 to 00:15.



how can i do it?

Link to comment
Share on other sites

no, i want dynamically add or remove player in simulation!


for example add player from 00:10 to simulation and then when time equal 00:18 remove that player from simulation

Link to comment
Share on other sites

Dynamically adding and removing animations is going to require a lot more work. You're going to have to come up with your own logic to handle that. I think hiding and showing the players using autoAlpha is going to be the easiest way to do that. You could also create a separate timeline for each player, and then you can add or remove them from a main timeline. But you would still need to hide/show them using something like autoAlpha.


Here's an example of that. You can add and remove the third timeline whenever you want, and it will sync up with the other timelines. You could add your own callbacks to the timeline to do something like that.


See the Pen fa778e7c1622e6a85c9de438fdab4319?editors=001 by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

I have to echo Blake's sentiment. Adding and removing players is certainly possible but will require a lot more logic that has very little to do with GSAP.

We have to keep our support focused on answering questions related to how the GSAP API functions. Unfortunately, it just isn't feasible for us to walk you through every difficult part of your project when it comes up. 

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