What are function-based values and parameters in anime.js?

The anime() function provided by anime.js takes several key-value pairsPairs of two related elements 'key' and 'value' where the key defines the value. such as properties and property parameters.

The values we provide for properties and property parameters don't have to be strings or numbers. They can also be functions.

Function-based values and parameters are used for customizing the animation based on the targetThe element that is being animated..

Syntax

The given code describes the syntax for creating a function-based value or property parameter.

Whether for a property or a property parameter, the function is called separately for each targeted element. The function takes three arguments:

1. target: The currently targeted element

2. index: Index of the currently targeted element

3. targetsLength: Total number of targeted elements

The function's return value is assigned to that specific target's property/property parameter. See the examples below for elaboration.

Example: function-based value

For properties, such as translations or rotations, we can functionally set the value for each element. In the following example, we set the translateX property of each element based on its index.

Explanation

In the HTML section, we create 5 div elements and style them to look like boxes using the box class.

In the JavaScript section of the code, we use the anime() function to animate each box.

• Lines 1–2: We create an animation and target all elements with the box class.

• Lines 3–6: Instead of giving a single value for translateX, we provide a function that takes the three parameters.

  • Line 4: We set the element's display value to its index using the innerHTML attribute. This demonstrates that the target parameter is just a normal DOM node.

  • Line 5: We return a value for translateX that is calculated based on the index. The element with index 0 will have translateX set to 100, index 1 to 200, and so on.

• Lines 7–8: We set the duration and delay to 1000 milliseconds each.

Note: Click here to learn about the innerHTML attribute.

As we can see, each box has a different value for translateX. These values were set using a function-based value within a single call to the anime() function. Function-based values save us from calling the anime() function separately for each box.

Example: Function-based parameter

Just as we provided a function for a property, we can also pass a function for a property parameter. In the following example, we set the delay of each element based on its index.

Explanation

For simplicity, we replicate the previous example but set the translateX property to be 500 for all elements.

• Lines 5–8: We give a function instead of providing a single value for delay. The function returns a value for each targeted element based on its index. In this case, index 0 will have delay set to 500, index 1 to 1000, and so on.