Jump to content
PointC

New advanced stagger

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Cool updates here Jack. 👍

 

The new video is really good too. @Carl sounds a bit different in this one. I didn't know he could suppress his accent. Very talented. :D

 

 

  • Haha 1

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.