Jump to content


How to stagger and array of objects?

Moderator Tag

Recommended Posts

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:


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.

Link to comment
Share on other sites

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

grid: [rows, cols]


  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites



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?



Link to comment
Share on other sites

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

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.