Jump to content
Search Community

Stagger and total duration

atran test
Moderator Tag

Recommended Posts



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});


Link to comment
Share on other sites

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.


  • 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.
  • Create New...