Jump to content
Search Community

New advanced stagger

PointC test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm really loving the new advanced stagger. It certainly opens up some new possibilities. I have several animations that stagger from the center so this will be fantastic for that. On that topic, I have a question. In my existing 'stagger from the center' projects I use a delay with cycle. Switching to GSAP 2.1.0 seems to break these old projects. 

 

This works. (GSAP 2.0.2)

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

 

But breaks with GSAP 2.1.0.

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

 

Will I need to update these existing projects to the new advanced stagger? It's not a big deal, I just want to get that done before updating to 2.1.0 on some websites.

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

Thanks for the clear demos Craig!

 

It appears the absence of a stagger value in a staggerTo() does cause a problem.

 

To temporarily fix it you can add a 0 as shown below

 

tl.staggerTo(boxes, 0.5, {
  y: -100,
  repeat: 1,
  yoyo: true,
  cycle: {
    delay: function(i) {
      return Math.abs(Math.floor(boxes.length / 2) - i) * 0.25;

    }
  }
}, 0);

 

 

I will escalate the issue. I'm sure a fix is on the way.

 

  • Like 3
Link to comment
Share on other sites

Yep, great catch @PointC. Sorry about that - it'll be fixed in the next release. @Carl is right - all you need to do is define a 0 stagger value either as a parameter or as a special property. 

 

Hopefully 2.1 makes that effect in your codepen even easier and more concise to accomplish:

 

//OLD: 
cycle: {
  delay: function(i) {
    return Math.abs(Math.floor(boxes.length / 2) - i) * 0.25;
  }
}

//NEW: 
stagger: {
  amount: 0.5, //or if you want to make it dynamic, Math.floor(boxes.length / 2) * 0.25
  from: "center"
}

 

Happy tweening!

  • Like 4
Link to comment
Share on other sites

6 minutes ago, GreenSock said:

Hopefully 2.1 makes that effect in your codepen even easier and more concise to accomplish:

 

Oh definitely. The new way is much easier. I just didn't want to update some old sites with that effect to 2.1 and break the animation when I forget to update the stagger code too.

 

Thanks.

:)

 

  • Like 1
Link to comment
Share on other sites

This is fixed in 2.1.1, just released. 

 

I also added two new features to advanced staggers: 

  1. If you prefer to specify the amount of time between each tween's start time (rather than the total time that gets split up among them all), use "each", like: 
    //puts 0.1 second between each tween. Use "each" instead of "amount" to do this. 
    {each:0.1, from:"center"} 

    This just seemed like a handy thing to have at times. So "amount" is for if you want to specify the TOTAL amount of time to be split up among all the staggers whereas "each" lets you specify the time between each tween. It's one or the other. 
     

  2. Make the "amount" or "each" negative and it'll invert the timing! So, for example...
    //emanates out from the center to the edges
    {amount:1, from:"center"}
    
    //emanates in from the outer edges to the center!
    {amount:-1, from:"center"}

     

Enjoy!

  • Like 2
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.
×
×
  • Create New...