How to stagger and array of objects?

[nardove 1 Likes (Newbie)]

I'm working on animating a grid of threejs boxes and I would like to implement the grid option available in the stagger object of the timeline, but when doing so I get an error:

Quote

a[(tonumeric wrapAt)].getBoundingClientRect is not a function

 

The example code only shows how to use the stagger options applied to DOM elements so I wonder if I'll need to create my own objects with properties that the grid optins will understand, which I can easly do, but I dont know what it is required. Hope that makes sense.

 

Here is my setup:

- There is an array of threejs Meshes layout in a grid

- I want to create a timeline to animate all elements in the grid using the stagger grid options like:

stagger: {
  amount: 1.5,
  grid: "auto",
  from: "center"
}

- But I'm getting the error quoted above

 

Any help will be much appreciated.

[OSUblake 18,497 Likes (Superhero)]

"auto" only works for elements. Use an array with the number of rows and cols in the grid.

grid: [rows, cols]

 

[ZachSaucier 7,152 Likes (Superhero)]

To be more explicit, it only works for DOM elements. 

[nardove 1 Likes (Newbie)]

@OSUblake,

 

Thank you, when tweening threejs onbjects we have to select the object and the property to tween like mesh.rotation then tween the x, y, or z values

how can I stagger a collection of threejs elements to they animate like the stagger example using a DOM element?

 

Also where can I find the stagger object properties documentation?

 

Cheers

[OSUblake 18,497 Likes (Superhero)]

Did you try explicitly specifying the rows and cols for grid? Under the hood, stagger uses distribute to get the stagger value.

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

 

Can you make a simple demo showing what you're trying to do?

[nardove 1 Likes (Newbie)]

Sure, have a look at my codesandbox

 

At the end of the createGrid() method you will find the timeline object I'm trying to create, but the animation goes one at a time

[ZachSaucier 7,152 Likes (Superhero)]

Hey @nardove. That's because you're looping through trying to animate each specific mesh rotation. Thus there's nothing to stagger because it's affecting one element. Instead you should affect all of the meshes with one tween like so: https://codesandbox.io/s/threejs-mesh-grid-1qxbr

[nardove 1 Likes (Newbie)]

Legend! thanks a lot