Avoid flattening of stagger arrays

[bannerboy]

So, I'm pretty sure in past versions of gsap, target arrays were non-recursive; meaning if you pass in an array like [[element_0_0, element_0_1], [element_1_0, element_1_1]], it would treat it as two items. But it appears in gsap 3 it will be flattened into one big array of four items. Is there a way to turn this off?

 

I'm looping through an element's children and bundling each child with a corresponding child in another element, and these pairs need to animate together in a stagger (meaning each pair is synced). Any ideas?

[mikel]

Hey @bannerboy,

 

Welcome to the GreenSock Forum.

 

Maybe I don't understand your intention correctly,
it would definitely work that way.

 

See the Pen KKZNvbN by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[bannerboy]

Hello @mikel, thanks for your quick reply!

So, when creating a codepen to show, it did behave as expected, which was really confusing. After messing around with it a bit, I found that the difference seems to be how the array is created; whether it uses query strings or actual element references. So [[el_0_0, el_0_1], [el_1_0, el_1_1]] behaves differently than [['#el_0_0', '#el_0_1'], ['#el_1_0', '#el_1_1']].

 

See the Pen oNpYezq?editors=0110 by axeen (@axeen) on CodePen

[OSUblake]

4 hours ago, bannerboy said:

But it appears in gsap 3 it will be flattened into one big array of four items. Is there a way to turn this off?

 

 

No, all GSAP is using is the toArray utility.

 

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

 

It would be better to not even attempt to use nested arrays, but if you do, you should probably loop through them kind of like this.

 

[['div#box-0-0.box', 'div#box-1-0.box'],['div#box-0-1.box', 'div#box-1-1.box']].forEach(targets => {
  tl.to(targets, { scale: 1, stagger: 1 }, 0)
});

 

[mikel]

 

Fascinating what you can do with arrays.
I've learned something.

 

See the Pen ExoNwdJ?editors=1010 by mikeK (@mikeK) on CodePen