Jump to content
GreenSock

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

Timings with Advanced Staggers

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

:)

 

  • Like 2

Share this post


Link to post
Share on other sites

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")

 

  • Like 2

Share this post


Link to post
Share on other sites

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.

:)

 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

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

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×