Why Stagger not worked?

[qqignatqq]

Hello. I wanted to make sure that the new blocks appear alternately, where each block appears before the previous one's animation ends. Or did I misunderstand the work of "stagger"? 
I either get the blocks to appear at the same time or after the previous block's animation is over.

 

https://jsfiddle.net/onhmy1st/4/

[ZachSaucier]

Hey qqignatqq,

 

The issue here is that you're making a new tween for each new box you want to add and then trying to apply a stagger to it. But since only one element is being affected each tween, the stagger doesn't do anything  You can fix that by animating all of the new boxes in one tween. That way you don't need a loop at all!

 

Additionally it's good to point out that use can use any query selector string. So you can use things like nth-child like I did in the demo below. I also recommend using GSAP's .set() method because it allows you to simplify setting styles for elements. Altogether you get this demo.

 

Let me know if you have any questions about my approach or anything else! Happy tweening.

[qqignatqq]

Thank you, ZachSaucier!!!

 

How to remove the delay at the very beginning of the animation?

If you set "Stagger" to 5, the animation will start after 5 seconds. Is it possible to remove this delay?

[ZachSaucier]

2 minutes ago, qqignatqq said:

How to remove the delay at the very beginning of the animation?

Sorry, I'm not following.

 

2 minutes ago, qqignatqq said:

If you set "Stagger" to 5, the animation will start after 5 seconds.

If you set stagger: 5, each animation will wait 5 seconds from the start of the previous one before starting its animation.

 

3 minutes ago, qqignatqq said:

Is it possible to remove this delay?

Remove the stagger? Again, I must not be following.

[qqignatqq]

I just exaggerated to make it clearer, but on the contrary, it turned out that you didn't understand)))

 

See: https://jsfiddle.net/1pqdnm9c/
After pressing the button, the animation will start only after 1.5 seconds.

[ZachSaucier]

2 minutes ago, qqignatqq said:

After pressing the button, the animation will start only after 1.5 seconds.

Oops, good catch. My selector was off by an index of 1. Here's the fixed version: https://jsfiddle.net/uLx0sekf/

[qqignatqq]

I was sitting there trying to figure it out, but as it turned out)))

Really, it is. The last block is block 8, but the next block is block 9, i.e. 8+1. Thank you!