What are property parameters in Anime.js?

Anime.js is a JavaScript animation library. The library provides the anime() function with which we can easily create complex animations.

Note: If you are unfamiliar with Anime.js, click here to learn the basics.

The anime() function takes a parameter object with certain key-value pairsPairs of two related elements 'key' and 'value' where the key defines the value. such as targets, properties, and property parameters. The property parameters define the qualities of the properties we've specified.

Note: Click here to learn more about properties in Anime.js.

Syntax

Property parameters are not to be confused with properties. Properties are the visual features of the animation that we want to animate, such as color, size, and position. Property parameters are settings we define for the properties, such as duration, delays, and so on.

Anime.js provides the following property parameters:

• Duration

• Delay

• End delay

• Rounding

• Easing

Timing parameters

Anime.js provides three parameters to control the timing of our animations. These parameters are as follows:

• Duration: This is the time taken by the animation.

• Delay: This is the waiting time before the start of the animation.

• End delay: This is the waiting time after the end of the animation.

Note: Click here to read about the above three parameters.

Rounding

The rounding parameter describes how many decimal places to display during animations.

Note: Click here to learn more about rounding values in Anime.js.

Easing

The easing parameter describes how the animation will progress from its starting point to its ending point. For example, we can make a sliding box move uniformly from start to end or make it slow down as it reaches the end.

Note: Click here to learn more about easing in Anime.js.