What are the staggering options in anime.js?

Anime.js provides the anime.stagger() method to animate multiple elements withParts of the animation continue moving after the animation has ended to create more physically realistic animations follow-throughParts of the animation continue moving after the animation has ended to create more physically realistic animations. and overlapHaving different parts of animation be executed together to create more fluid animations.

We can customize staggering with some built-in options.

Syntax

The following is the syntax for using the anime.stagger() method with the options parameter.

anime({
    ...
    property/property parameter: anime.stagger(value, options),
    ...
});

The options parameter (optional) is an object which accepts the following key-value pairs:

  • start

  • from

  • direction

  • easing

  • grid

  • axis

Note: Click here to learn about staggering and the value parameter.

The following examples demonstrate the use of each option. All the blue boxes are made by styling a <div> tag with a class called box.

The start option

We use this option to specify a starting value for the stagger effect. The following example shows five boxes moving left due to the translateX property.

Using the 'start' option to set the starting value of the translateX property
anime({
    targets: '.box',
    translateX: anime.stagger(25, {start: 100}),
    ...
});

Here, the first targeted element (Box-0) gets a translation of 100. The translations for the following boxes increase by 25px. Box-1 gets a translation of 125px, box-2 gets 150px, and so on.

The from option

This option lets us decide which element we want to be the starting point for the stagger effect. It can take the following values:

  • first: Start the stagger from the first targeted element. This is the default value.

  • last: Start the stagger from the last targeted element.

  • center: Start the stagger from the middle element.

  • Any integer index: Start from the specified index.

We take the previous example and insert the from option with a value of 2.

Using the 'from' option with index 2 to start the stagger from the 2nd box
anime({
    targets: '.box',
    translateX: anime.stagger(25, {start: 100, from: 2}),
    ...
});

Here, the stagger starts from the 2nd box. Keeping 0-indexing in mind, the 2nd box moves 100px due to the start option. The boxes above and below box-2 (box-1 and box-3) move 125px. Similarly, box-0 and box-5 move 150px.

Since 2 is also the middle index, we can achieve the same effect by setting from to 'center'.

The direction option

This option lets us decide the order in which the stagger effect occurs. It can take two values:

  • 'normal': The stagger moves from the first to the last element. This is the default value.

  • 'reverse': The stagger moves from the last to the first element.

Continuing the previous examples, we insert the direction option and set it to 'reverse'.

Using the 'direction' option to reverse the distribution order of translations
anime({
    targets: '.box',
    translateX: anime.stagger(25, {start: 100, from: 'center',
                                       direction: 'reverse'}),
    ...
});

Since the direction is set to 'reverse', box-0 and box-5 move 100px, box-1 and box-3 move 125px, and box-2 moves 150px.

The easing option

We may also provide an easing to determine the distribution of values. This easing may also be a custom easing.

In this example, we have ten boxes that will move right by the translateX property. However, we insert the easing option and set it to 'easeInQuad'.

Using a quadratic easing to distribute translations between boxes
anime({
    targets: '.box',
    translateX: anime.stagger(25, {easing: 'easeInQuad'}),
    ...
});

Here, the first box gets a translation of 0px, while the last box gets a translation of 225px (translation increases by 25px for each box).

The easing option determines the translation for the boxes in between. Since we use the easeInQuad easing, the translations are determined by a quadratic curve.

The grid and axis options

The grid and axis options are used to animate a 2D grid of elements. Their use and effects are explained in this Answer.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved