Changing stagger step size

[Stefanp]

Hi,

 

The default behavior of a stagger is that it will tween the objects one by one (like shown in the codepen).

Is it also possible to use a single tween to stagger in pairs of N. For example, tween the first two elements together, then the next two elements etc. etc. 

 

I have a thousand elements and I want to move them in little groups around the screen.

 

Thanks!

See the Pen RwqPZZg by stefanpullen (@stefanpullen) on CodePen

[mvaneijgen]

Here is a way of doing it, I'm trying out some more options if I find any I post back here. 

 

See the Pen qBQdPWm by mvaneijgen (@mvaneijgen) on CodePen

[Stefanp]

Nice solution. However, in my case, I'm actually tweening an array of objects. So I won't be able to utilize the nth-child css method. 

 

But  at least now I know i need to fiddle around with constructing a filter for the selector

[Cassie]

Or...

From the docs - you can create a stagger function

 

gsap.to(".box", {
  y: 100,
  stagger: function(index, target, list) {
    // your custom logic here. Return the delay from the start (not between each)
    return index * 0.1;
  }
});

Quote

 

Only use this if you need to run custom logic for distributing the staggers. The function gets called once for each target/element in the Array and should return the total delay from the starting position (not the amount of delay from the previous tween's start time). The function receives the following parameters:
 

index [Integer] - The index value from the list.
target [Object] - The target in the list at that index value.
list [Array | NodeList] - The targets array (or NodeList).

 

 

[GreenSock]

For example...

See the Pen YzRXjYK by GreenSock (@GreenSock) on CodePen