stagger is adding 0.5 seconds to total duration

[sukjae]

When only stagger is used, 0.5 is added to the total duration. I wonder where this value is coming from. Check out codepen's t3 example.🙏

See the Pen ZEREOwa?editors=1111 by leesukjae (@leesukjae) on CodePen

[mvaneijgen]

Hi @sukjae welcome to the forum!

 

The default duration of any tween (if not explicitly defined by you) is 0.5 seconds. All your tweens have a duration: 1 except your t3, so it will get the default duration: 0.5 seconds. I get why if feels weird, but with your logic the duration if not defined would be 0 and an animation that doesn't animate is no fun at all! 🎉

 

duration

The duration of the animation (in seconds). Default: 0.5.

 

See the docs if you want more in depth information https://greensock.com/docs/v3/GSAP/Tween

[sukjae]

Ah, that's right. Thanks for checking it out.

But what does duration mean when used with stagger?
The stagger is the interval between each starting point, I don't understand why the duration(duration of tween) is added to the total duration(duration of timeline).

 

If duration is the time of animation for each tween, shouldn't it be ignored if it is less than stagger?

[mvaneijgen]

The stagger is the time between the start of the next elements animation, the duration can be multiple times more or less to that duration.

 

This way you can have an animation that takes 5 seconds, but the stagger can start at 1 second in or the other way around.

 

See the Pen KKeKWgy?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Staggers can be really powerful that way. Your illustration reminds me of an amazing video by our own @Carl (second post to day sorry Carl) that really dives deep in what stagger makes possible.  Take a look at the stagger docs https://greensock.com/docs/v3/Staggers, there is so much more possible with it