[How to get staggers to end simultaneously]

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

[How to get staggers to end simultaneously]

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.

[How to get staggers to end simultaneously]

@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.

[How to get staggers to end simultaneously]

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}, ">")