GSAP 3 change in yoyo behavior for staggers

[PhilipF5]

I've been upgrading a WIP project to GSAP 3 and I'm really digging the simplified API. I did run across an interesting behavior change that I wanted to ask about:

 

In GSAP 2.1, `.staggerTo` seemed to yield an array of Tweens. This meant that setting the `yoyo` property would cause each individual Tween to yoyo, allowing for a very easy "wave"-like effect, in which the first element to animate forward was also the first to animate backward.

 

In GSAP 3, the `stagger` prop just applies to a normal Tween. Setting the `yoyo` property causes the entire stagger to yoyo, so the first element to animate forward is the last element to animate backward.

 

You can actually even look at your own Codepen demos to see what I mean. Just open up the GSAP 2.1 Advanced Stagger demo and the GSAP 3 Advanced Stagger demo and observe the difference in the animation that plays in one versus the other.

 

So my question is, is the GSAP 2.1-style functionality of yoyo-ing the individual "sub-Tweens" of a stagger still available and I just haven't been able to find it? Or has that functionality been removed in favor of just always yoyo-ing the whole stagger as if it's one animation?

[GreenSock]

It's actually quite easy to get the effect you're after - just add the repeat/yoyo to the stagger object itself! Think of that almost like a vars object that gets passed to the sub-tweens. For example:

 

gsap.to(".class", {
  duration: 1,
  x: 100,
  stagger: {
    each: 0.1,  // stagger each by 0.1 seconds (or use amount for an overall value to distribute)
    repeat: -1, // <-- LOOK! It's nested, so each sub-tween will repeat independently
    yoyo: true  // again, passed to each sub-tween.
  }
});

So you'll get different behavior if you put the "repeat" and "yoyo" in the main vars object (top level) or nested in the stagger. Lots of flexibility. 

 

Does that help? 

[PhilipF5]

Yep, that is exactly what I was looking for! I had previously tried putting the `yoyo` in the stagger object, but not the `repeat`. Thinking of it "like a vars object that gets passed to the sub-tweens" makes perfect sense with the new API.

 

Thanks!