What are properties in Anime.js?

Anime.js is a lightweight and easy-to-use JavaScript animation library.

Note: If you are unfamiliar with Anime.js, click here to read a basic overview first.

To create animations, we use the anime() function. The anime() function takes an object with certain key-value pairsPairs of two related elements 'key' and 'value' where the key defines the value. that define the target and nature of the animation. In Anime.js, properties are the key-value pairs describing what visual aspect we want to animate, like color, size, position, and so on.

The following code shows how to add properties to the animation:

We can define these properties in the parameter object using the following:

• CSS properties

• CSS transform properties

• Object properties

• DOM attributes

• SVG attributes

CSS properties

We can animate any numerical CSS property such as color, background-color, border, left, margin, and more.

Explanation

In the above example, we demonstrate the animation of various CSS properties using a <div> tag:

• Line 1–2: We create an animation using the anime() function. We select the <div> tag using the .box class selector.

• Line 4: We specify an animation for the left property. The anime() function will change the box's left value from its current value to 200px over the duration.

• Line 5: We specify the animation for the top property. The top value for the box is gradually moved to 200px.

• Line 6–7: We specify an animation for the backgroundColor and borderRadius.

• Line 8: We specify an animation for the borderWidth property. Instead of a target value, we give a pair of from and to values. We'll specify borderWidth: [0,5].

• Line 10–11: We provide some parameters for the duration and delay of the animation, each value given in milliseconds.

Note: Click here if you are unfamiliar with targets in Anime.js.

CSS transform properties

Similar to CSS properties, we can also animate the CSS transform property. The transform property allows us to translate, rotate, scale, and skew elements via CSS.

Here's how to use the transform properties in Anime.js:

Explanation

We performed animations on the box using CSS transform properties.

• Line 4: We specify an animation for the CSS transform property translateX. In this case, we want the box to move left to 200px.

• Line 5: We specify an animation for translation on the Y-axis.

• Line 6: We use the rotateZ transform property to rotate the box 360 degrees.

• Line 7: We use the scaleY transform property to stretch the box on the Y-axis.

Object properties

Since we can target JavaScript objects for animation, we can animate the numerical properties of JavaScript objects.

Here's how we can access the numerical properties of objects for animation:

Explanation

In this example, we animate the properties of a JavaScript object and display the object's contents using a <p> tag.

• Line 1: We select the paragraph element with the ID, loadingDisplay, from the DOM. We use this element to display the object.

• Lines 2–5: We create a JavaScript object with one numerical value, progress.

• Lines 6–18: We create an animation targetted on the loading object. We specify animations on the numerical values of the loading object. In this case, we determine that the progress value will transition to 100.

• Lines 15–17: We use the update callback to update the <p> tag after each animation frame.

DOM attributes

Similar to JavaScript objects, we can also animate numerical properties of DOM nodes. DOM attributes are the HTML attributes that the node has.

Note: If you are unfamiliar with the DOM in JavaScript, click here.

We show how to animate DOM attributes below:

Explanation

In the above example, we animate the DOM property innerHTML of the box.

• Line 4: The DOM property innerHTML is animated to go from 0 to 100.

• Line 5: We use the round property parameter. This signifies how many decimal places to use to round off numerical values.

Note: Click here to learn about property parameters and here for using the round property.

SVG attributes

Just like DOM attributes, numerical SVG attributes can also be animated in the following manner:

Explanation

For this example, we create a square polygon and animate a transition to a pentagon.

• Line 1: We create an animation that targets the polygon element type.

• Line 4: We specify a new set of coordinates for the polygon's path. The new set of coordinates defines a pentagon.