How to animate a grid of elements in anime.js

Anime.js is an easy-to-use JavaScript animation library. It lets us create complex animations with multiple moving parts and varying effects. A grid is a 2-dimensional distribution of elements. Anime.js provides a technique called staggering to animate a grid of elements quickly.

Syntax

To animate a grid, we'll use the anime.stagger() method with the grid option.

The grid option takes an array of two values:

• nx: Number of elements along the x-axis or the number of columns.

• ny: Number of elements along the y-axis or the number of rows.

Example

In the following example, we implement a 'shrinking-tile' effect on a grid of $10\times25$ boxes. We break the implementation into two steps, creating the grid of boxes and then animating it.

Create the grid

To make a grid, we use a container element and then place all of the box elements inside of it. We use div elements to implement both the container and the boxes.

Explanation

In the HTML section, we create a single div element and give it the class container.

In the CSS section, we define the box and container classes. For the container class, we use the flex display property with wrapping to make sure only 25 boxes appear in one row.

In the JavaScript section, we create boxes.

• Line 1: We set ny, the number of rows, to 10.

• Line 2: We set nx, the number of columns, to 25.

• Line 5: We use the querySelector() method to get the container element.

• Lines 6–10: We create a loop to create the 250 boxes that will fit into our grid.

  • Line 7: We create a new div element using the createElement() method.

  • Line 8: We set this box's class attribute to the box class using the setAttribute() method.

  • Line 9: We add this box to the child list of the container element using the appendChild() method.

Animate the grid

Now that we have a grid of elements, we can animate it by using the grid option in the anime.stagger() method.

The following code implements the shrinking tile effect.

Explanation

In the JavaScript section, we add a call to the anime() function.

• Line 13: We target all the elements with the box class.

• Line 14: We define the scale property and give it an array of two values, the start and end points. Each box will start at a 100% scale and shrink to a scale of 50%.

• Line 15: We define the delay property parameter and call the anime.stagger() method. We pass 200 as the value parameter, and for the options parameter, we pass an object with a single property, grid. This tells the animation the dimensions of the grid that we set earlier.

As we can see, the animation starts from the top-right and ripples its way across the grid. We can use the from option to change this starting point.

Now, the animation starts from the grid's center.

The axis option

Instead of letting the animation progress element by element, we can let it progress row by row or column by column using the axis option.

The axis option takes two values:

• 'x': Animation progresses column-wise.

• 'y': Animation progresses row-wise.

The following example repeats the same animation, but the animation progresses column-wise.