Elusien

Brilliant! That is exactly what I need. Thank you for coming up with this solution.

I think I am going to have to go down the route of looping over each element since the "stagger" solution will not work for 'from: "random"', since the indexes always appear as 0 to N-1, not the random order. It's a pity as now I have to write the code to generate my own "random", "edges", "center" etc... It isn't insurmountable, but it is a bit fiddly. Thanks again, for setting me on the right track though.

@Rodrigo Thank you for providing this solution. I find a lot of staggered animations look better when they terminate simultaneously. At present I am working on creating animated masks for video editing and would like to try your solution on some of the ones I have already done without the co-ordinated ending and see how well they work I've been using GSAP on and off for some while, and find it amazing. I keep forgetting you can use functions and not just variables. Thanks again.

I have a timeline tween that uses "stagger". The starts of the animations for each element will be staggered, but so will the ends of the animations. I would like the ends of the animations to happen simultaneously. Is there an option for this? e.g. The 1st element starts animating at 0 sec and finishes after 5 seconds (time: 0sec to 5sec, duration 5secs); The 2nd element starts animating at 1 sec and finishes after 4 seconds (time: 1 sec to 5sec, duration 4 secs); The 3rd element starts animating at 2 sec and finishes after 3 seconds (time: 2 sec to 5sec, duration 3 secs); My current code (which does not do this) is: tl .to (".circle", {"background-color": to_color, stagger: {amount: 5.0, grid: [nh, nw], from: stagger_from}, duration: 0}, ">")