What is staggering in anime.js?

Staggering in anime.js

Anime.js is a JavaScript library that lets us easily create complicated animations. It provides a staggering technique that enables us to animate multiple elements simultaneously. It also helps in creating animations with 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..

Syntax

To introduce staggering to our animation, we must use the anime.stagger() method. This method can be used as a value for any property or property parameter, given that it accepts a numerical value or a numerical string like '50%'.

The following is the syntax:

Here, a value is a number, a numerical string, or an array. The options parameter (optional) is an object that accepts the following key-value pairs:

• start

• from

• direction

• easing

• grid

• axis

The value parameter

As mentioned above, the value parameter can take a number, a string, or an array. The following examples demonstrate the use of each type. All of the blue boxes are made by styling a <div> tag with a class called a box.

Number

Each element's value for the concerned property increases by the number passed as the value parameter.

We target all elements with the box class and translate them right along the X-axis to $500$px.

For the delay parameter, we use the anime.stagger() method and give it a number, 500. Now, box-1 will have its delay set to $0$ms, box-2 to $500$ms, box-3 to $1000$ms, and so on. The delay for each targeted element increases by $500$ms.

String

Similarly, we can use staggering with percentage values given as a string.

Once again, we target all elements with the box class. We specify the borderRadius property and use the anime.stagger() method with the value 25%. Doing so sets the borderRadius of the first box to $0$%, the next box to $25$%, and the last box to $50$%. The percentage increases by $25$ for each element.

Array

If we want to specify a range of values to be distributed among the elements, we can use an array of two values, that is, the start and end points.

In this case, the translation is distributed from $50$px to $250$px equally among all elements using the following formula.

Here, $start$ and $end$ are $50$px and $250$px respectively. $n$ is the number of targeted elements and is equal to $5$. $i$ is the element's index whose value needs to be found, keeping in mind the first index is $0$.

According to the distribution formula, box-1 gets a translation of $50$px, box-2 gets $100$px, and so on.