Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
qqignatqq

Why Stagger not worked?

Recommended Posts

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/

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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!

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