Staggering an array's child elements

[DanielHoff]

Hey!

 

I've tried to simplify my issue as much as possible in the codepen. I was wondering if there was a way to select a child element inside an array to stagger? In the codepen example I would like to stagger all red boxes and at the same time stagger all blue boxes.

 

Working under the constraints of:

 

a large amount of grouped content (100 +)

multiple child elements (up to 6)

array will be in a randomised order

 

I know I could group all the child elements into seperate arrays but was wondering if there was a simpler way!

 

Thanks in advance!

 

See the Pen qgqxKP by anon (@anon) on CodePen

[Shaun Gorneau]

Hi @DanielHoff,

 

Hopefully I'm not misunderstanding ... but you can use a pretty straightforward selector natively in GSAP to target these. Here is a CodePen

 

See the Pen vbyjOO by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

[Dipscom]

Hi DanielHoff,

 

Welcome to the forums!

 

You can target them by their individual classes:

 

// select all red boxes to stagger
timeline.staggerTo('.box1', 0.2, {x: 50}, 0);

// select all blue boxes to stagger
timeline.staggerTo('.box2', 0.2, {y: 50}, 0);

 

That way, you won't even need to do a select into a var beforehand. Less code, less potential for bugs.

[Dipscom]

@Shaun Gorneau You undercut me!

 

Damn!

[Shaun Gorneau]

4 minutes ago, Dipscom said:

@Shaun Gorneau You undercut me!

 

Damn!

 

Oh no!! I didn't see you in here ... sorry @Dipscom!

[Dipscom]

Low blow! I'mma gonna get the referee to sort you out.

[DanielHoff]

Hey guys!

 

Thanks for the quick responses! I fear I may have over simplified. I think the elements need to be in array because the order will be randomised everytime the timeline is run. 

 

In short im taking inspiration from this:

 

See the Pen XXdNjR by jonathan (@jonathan) on CodePen

 

Ive created muitiple cubes and trying to stagger their animations so put each cube into an array to then stagger but I can’t access the child elements to animate. 

[Dipscom]

It will make troubleshooting easier for us if you could provide us with a less simplified demo of what you are trying to achive.

[DanielHoff]

Will do, currently at work and this is a personal project, I’ll link it ASAP 

[Dipscom]

Coolio, we'll have a look when ready.

 

[DanielHoff]

Cool! So here is a more involved pen. (Managed it on the sly, very covert!)

See the Pen vbyrZd by danielhoff (@danielhoff) on CodePen

 

I've created a grid with 36 cubes, selected the .box class and shuffled the array. It's the next bit where i get a bit confused, so to stagger I would have thought the selector would have to be: 

 

 

boxes(the array) .front(the child) 

 

to then stagger those specific elements. 

 

the only other way I think is to put each child into an individual array but that could get messy with the randomising. 

 

I also think maybe Three.js might be the way to go as atleast then the cube is one object rather than seperate divs!

[Dipscom]

Hello!

 

Sorry for the delay, I did not manage to go into an covert operation myself until just now.

 

Let me see if I understood what you are after:

 

You want each of those cubes to move with its own rotation, not together as it now.

 

If that's the case, you will have to create a timeline for each of the cubes. Once you shuffle your array, you have to loop over it and give each item there its own timeline. Then, you will need to set them off at different starting points as you have created infinite timelines.

 

Actually, that made me very confused. You are asking about staggering yet you have infinite timelines, so I am not too sure what is the effect you are after.

 

Bellow is a setup that might help you out. Have a look. Note that I made a few small changes on your code and disabled a few bits that did not seem necessary.

 

See the Pen zeNjab?editors=0010 by dipscom (@dipscom) on CodePen

 

Also, you should not have multiple elements with the same ID. An ID should be unique in the document.

Edited January 31, 2019 by Dipscom
Sorry, I thought I had posted this earlier...