qqignatqq Posted December 10, 2019 Share Posted December 10, 2019 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 More sharing options...
ZachSaucier Posted December 10, 2019 Share Posted December 10, 2019 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 More sharing options...
qqignatqq Posted December 10, 2019 Author Share Posted December 10, 2019 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 More sharing options...
ZachSaucier Posted December 10, 2019 Share Posted December 10, 2019 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 More sharing options...
qqignatqq Posted December 10, 2019 Author Share Posted December 10, 2019 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 More sharing options...
ZachSaucier Posted December 10, 2019 Share Posted December 10, 2019 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 More sharing options...
qqignatqq Posted December 10, 2019 Author Share Posted December 10, 2019 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now