How to get staggers to end simultaneously

[Elusien 3 Likes (Newbie)]

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

[Rodrigo 5,068 Likes (Superhero)]

Hi @Elusien and welcome to the GreenSock forums!

 

As far as I can tell, the Staggers API doesn't include such tooling because we're talking about the duration of the animation with an equal stagger time. For that I can think of two alternatives.

 

Create a timeline and loop through the elements and change the duration of each animation on each loop:

const boxes = gsap.utils.toArray(".box");
const duration = boxes.length;
const tl = gsap.timeline({ paused: true });
boxes.forEach((box, index) => {
  tl.to(box, {
    y: 200,
    rotation: 360,
    ease: "none",
    backgroundColor: "#ff00ff",
    duration: duration - index,
  }, index ? "<=+1" : 0);
});

Create a single GSAP instance and use a function based value for the duration running basically the same code:

const boxes = gsap.utils.toArray(".box");
const duration = boxes.length;
const tl = gsap.to(boxes, {
  stagger: 1,
  y: 200,
  rotation: 360,
  backgroundColor: "#ff00ff",
  ease: "none",
  duration: (index) => duration - index,
});

Here is a live example with both approaches (just comment one and uncomment the other) and as you can see the result is the same:

See the Pen dyKRXgZ by GreenSock (@GreenSock) on CodePen

 

Hopefully this is what you're looking for. Let us know if you have more questions.

 

Happy Tweening!

[Elusien 3 Likes (Newbie)]

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

[Elusien 3 Likes (Newbie)]

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.

[GreenSock 18,243 Likes (Superhero)]

@Elusien, here's a strategy you could use: 

See the Pen vYrZMGa?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[Elusien 3 Likes (Newbie)]

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