Stagger and total duration

[atran]

Hi,

 

I have a question regarding stagger and the total duration of the animation. This is a screenshot from a video from Carl where he visualises the animation using stagger 

 

gsap.to('.star', {stagger: 1, duration: 3});

 

According to the visualisation, the total duration for the animation of three stars is 3 seconds. But I tried this on CodePen and the output of the animation.duration() is 5 seconds which makes sense:

0 - 3

1 - 4

2 - 5

 

So wonder how he could achieve the total of 3 seconds with this ? gsap.to('.star', {stagger: 1, duration: 3});

[PointC]

If you want a total of 3 seconds for all elements, you'd take your duration (let's say 1 for this example) and subtract that from your desired total duration. That leaves you with 2 for your stagger amount. You'd then write:

 

gsap.to(yourtargets, { duration: 1, yourProperty: xx, stagger: { amount: 2 } });

Using that method, you could change from 3 to 20 targets and the duration would still be 3 seconds as GSAP will calculate the stagger for each target based on your total amount.

 

Happy staggering.