Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

anime.js
javascript
animation

What are property parameters in Anime.js?

Rana Abdul Muneem

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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

anime({
targets,
properties,
property parameters,
...
});

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.
Controlling the timing of animations

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

Rounding

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

Rounding off to different decimal places

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.

Using different easings on the same sliding animation

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

RELATED TAGS

anime.js
javascript
animation

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring