gsap.effects Stagger a custom effect?

[bryanbuchs]

Is it possible to stagger a custom effect? In my example, I have an effect registered that returns a timeline -- fade in, then slide down and fade out as the slide finishes. I then run that effect on a group of elements - It works! But I would like to stagger the start time of the effect among the group. Adding a stagger:0.5  where I call the effect doesn't seem to do the trick. 

 

Do I need to manually loop through my elements and pass a delay prop instead?

See the Pen LYOBPrR by bryanbuchs (@bryanbuchs) on CodePen.

[OSUblake]

Welcome to the forums @bryanbuchs

 

Whatever you pass in as second parameter to the effect is just the config object, just think of it like options you want to pass in, so you should do the staggering inside the effect function.

 

See the Pen MWOBWXj by GreenSock (@GreenSock) on CodePen.

 

For the specialized stagger, you can use distribute utility. Internally, that's what GSAP uses for staggers.

 

https://greensock.com/docs/v3/GSAP/UtilityMethods/distribute()

 

Maybe @Carl has some resources on how to understand it better. 

[bryanbuchs]

Thank you @OSUblake - I was not aware of that distribute() method. Very helpful!

[Carl]

Hi @bryanbuchs

Just want to say that it's GREAT to see someone using registerEffect(). I'm surprised I don't see more of it as it is so helpful and powerful. Great demo you have there.

 

For more on distribute you can check out my video

 

here's a companion pen that should make sense after watching the video

 

See the Pen eYmKVBP?editors=0010 by snorkltv (@snorkltv) on CodePen.

 

************************

 

Hey @OSUblake

 

That's a very clever solution and I think I would have struggled to find a clean implementation like you did.

Very cool to just pass a stagger object into distribute() like that.

I was a bit confused how yours worked as I didn't understand how the "each" value was being applied.

It looks like it's being used as a multiplier on whatever index is being passed in.

 

had I thought of using distribute I probably would have done something like this

 

timeline.slideAway("ul>li", {
  stagger: {
    base:0,
    amount:0.2,
    from: "center"
  }
});

 

Did you just know that each was a valid property because staggers use it internally? 

I'm wondering if that's worth documenting or maybe it just has a very limited use.

 

Feel free to drop my video and demo in the docs if you like.

 

 

 

[OSUblake]

4 hours ago, Carl said:

Did you just know that each was a valid property because staggers use it internally? 

I'm wondering if that's worth documenting or maybe it just has a very limited use.

 

I knew, but now I see that it's missing from the documentation. I might need to ask Jack if that was intentional.

 

4 hours ago, Carl said:

I was a bit confused how yours worked as I didn't understand how the "each" value was being applied.

It looks like it's being used as a multiplier on whatever index is being passed in.

 

Right, so each would be the same as just using a number for the stagger on an animation.

 

gsap.to(el, {
  stagger: 0.5 // each
});

 

So ignoring all the grid and ease stuff, the value that would be returned can be calculated like this.

 

Each

let value = base + (each * index);

 

Amount

let each = 1 / (targets.length - 1) * amount;
let value = base + (each * index);

 

4 hours ago, Carl said:

Feel free to drop my video and demo in the docs if you like.

 

Thanks! That will definitely make it clearer why that utility is so powerful.

 

[Carl]

hey @OSUblake thanks for the detailed response. helpful as always.