Timings with Advanced Staggers

[Fakebook]

While the video about Advanced Staggers was really helpful, I got left with two main questions afterwards.

 

First, how to play the stagger earlier in the animation. In the pen example I'd want it to play 1 second after the previous tween, so I used , "-=4" - however, I'm lead to some confusion with using amount now, since I don't have to specify the the duration between each staggered animation. Previously I would've put something like:

.staggerFrom(".block", 0.8, {opacity:0, y:"50%", ease: Power1.easeOu}, 0.4, "-=4")

 

I'm wondering if something if the correct sort of syntax would be:

 .staggerFrom(".block", 0.8, {opacity:0, y:"50%", ease: Power1.easeOut, stagger: {
    from: "left",
    amount: 2
  }}, 0.4, "-=4")

However, having the additional 0.4 when using the amount: 2 for the timing is a bit confusing. Perhaps setting the 0.4 to null is the correct way? 

 

Finally, when using amount, should I be doing a similar approach with the timing each ease. In my example it's 0.8, should this be set to null as well?

See the Pen mdbRRbZ by fakebooked (@fakebooked) on CodePen

[PointC]

Hi @Fakebook 

 

When you use the special advanced stagger property in the vars it will overrule the normal stagger parameter. Here's a fork of your pen in which you can see I just made the stagger parameter 100, but everything works as expected. You can put null in that spot too so your position parameter is correct.

 

See the Pen xxKggye by PointC (@PointC) on CodePen

 

Does that help?

 

Happy tweening.

 

[Fakebook]

Perfect, makes sense and helps!

 

It looks like I was getting confused with amount as well, I was assuming it was the total time of the tweens + the stagger, and not the amount of time for just the staggers to happen.

 

Your example or below works perfectly - thanks! 

 

.staggerFrom(".block", 0.8, {opacity:0, y:"50%", ease: Power1.easeOut, stagger: { from: "left", amount: 2 }}, null, "-=4")

 

[PointC]

Happy to help. Sounds like you've got it now. ? You can also use each: instead of amount if you need exact staggering durations for each element.

 

Stay tuned for the next release of GSAP 3.0 when advanced staggering adds some fun new features.  Happy tweening.

 

[Fakebook]

Each is great, but having amount is actually insanely useful and solved a problem I was working through with dynamic content... can't wait for GSAP 3.0