What are specific property parameters in anime.js?

Anime.js is a lightweight JavaScript animation library. It provides the anime() function that takes key-value pairsPairs of two related elements "key" and "value" where the key defines the value as parameters. Some of these key-value pairs are the properties we wish to animate, such as color, size, position, and so on.

Note: To get familiar with the properties in anime.js, click here.

For each property we wish to animate, we can also supply additional parameters like duration and delay. These additional parameters are called property parameters.

Note: Click here to learn more about property parameters.

To make complicated animations, we may define more than one property to animate. We can provide each of these properties with its own property parameters. Such property parameters are called specific property parameters.

Syntax

We can write specific property parameters in the following way:

anime({
  ...
  property: {
    property parameters
  }
  ...
});

Code example

The following example demonstrates how we can set specific property parameters:

Specifying different property parameters for each property
Code explanation
In this example, we animate four properties of the box: translateX, scaleY, scaleX, and backgroundColor. Each property has its own property parameters that apply only to that property.
  • Lines 4–8: We specify the translateX property. We pass an object as the value that contains multiple parameters. These parameters will only apply to the translateX property.
    • Line 5: We define the value parameter for the translateX property. This parameter represents the final point of the animation. In this case, we set the final point of the translation to 500px.
    • Line 6: We define the duration parameter for the translateX property.
    • Line 7: We define the easing parameter for the translateX property.
  • Lines 10–13: We define the scaleY property with its own value and duration parameters.
  • Lines 15–18: We define the scaleX property with its own value and duration parameters.
  • Lines 20–23: We define the backgroundColor parameter with its own value and duration parameters.
  • Line 25: We specify the delay parameter for the animation. This delay  applies to all the properties.
  • Line 26: We specify the easing parameter for the animation. This easing applies to all properties except for the translateX property.
We should note that the specific property parameters have higher precedence than regular property parameters. That is why the easing specified in line 26 is not applied to the translateX property.
Free Resources
Copyright ©2025 Educative, Inc. All rights reserved