Jump to content
Search Community

Avoid flattening of stagger arrays

bannerboy test
Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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)
});

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...