Animatable attributes in Anime.js

Anime.js - Interview Questions

Now that we are familiar with the different target element specifications that we want to animate, it is the right time to learn more about specific properties and attributes than animate with Anime.js.

CSS Properties : Anime.js allows us to animate various CSS properties like color, width, and height for different target elements. The final values are specified using a camel case version that specifies background color, border-radius, etc. For instance, consider we are using background color. Hence, after camel casing, it becomes backgroundColor, and for border radius, it becomes border-radius. See the below code snippet of how these CSS properties work.

var animateLeft = anime({  
  targets: '.square',  
  left: '50%'  
});  
   
var animateBackground = anime({  
  targets: '.square',  
  backgroundColor: '#f96'  
}); â€‹

The above-shown properties can accept various types of values in regular CSS. For instance, we can change the attribute to 50vh or 500px, or 25em. All of these formats are acceptable in CSS properties. We can specify these values as a bare number with instances like background color in hexadecimal, RGB, or HSL values.

CSS Conversion : We can use Anime.js to animate different transition properties in CSS. This can be done using use translateX with translateY properties along with an axis centered to X and Y. Similarly, skewwithrotateThe value can be used with scale and can be rotated along a specific axis. Moreover, for angle properties, orturnAngle can be used to specify a revolution which is 360 degrees. This helps us to make calculations easier. Below is a sample code snippet that shows how to animate the zoom, translate or rotate an element with all these animations taking place at once.

var animateScaling = anime({  
  targets: '.square',  
  scale: 0.8  
});  
   
var animateTranslation = anime({  
  targets: '.square',  
  translateX: window.innerWidth*0.8  
});  
   
var animateRotation = anime({  
  targets: '.square',  
  rotate: '1turn'  
});  
   
var animateAll = anime({  
  targets: '.square',  
  scale: 0.8,  
  translateX: window.innerWidth*0.8,  
  rotate: '1turn'  
}); â€‹

SVG Attributes : We can make use of Anime.js even to animate SVG elements. The only condition that we need to follow is to keep the value of the attributes in numbers. The usage of numbers makes it relatively easy to animate some excellent stuff, which seems complicated with average SVG properties. Let's visualize this using a sample code snippet shown below.

var animateX = anime({  
  targets: '.circle',  
  cx: window.innerWidth*0.6  
});  
   
var animateStrokeWidth = anime({  
  targets: '.circle',  
  strokeWidth: '25'  
});â€‹

In the example snippet, it is finely illustrated how numbers can be put to use in SVG elements. Although to create more complex animations, we can opt for rounds, cywithstroke-width for the property animation. Just like we use CSS properties, we can use usesstroke-widthThe camel case version to make our code work out.

DOM Attributes : DOM attributes can also be easily animated, just like SVG attributes. One example where the DOM attribute can be animated is the HTML5 progress element. This element can have two attributes like valuewithmax and valuewithmin. In the below example, it is shown how the file transfer progress animation takes place. It will make the use of makevalueThe code for the property animation.

var animateProgress = anime({  
  targets: 'progress',  
  value: 100,  
  easing: 'linear'  
}); â€‹