Anime.js
Tags: javascript
Published: 2021-01-19 06:04:16

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, Dom attributes and JavaScript Objects. Anime.js has many customizable properties that can manipulate and transform anything you can put on a screen. Virtually everything is done within the single `anime` function which takes an object as its argument. This object is the basis for the abundance of customization options that anime.js offers. We will talk about a few important ones now.

##Options

####Targets
The first and most important property that every `anime` call should have is `targets`. It selects which DOM elements to apply the animation to. There are a few ways to select targets. First is to directly grab a single element from by using a string using CSS selector formats such as `’div’` or `’.className’`. The next is to target a JavaScript object which is then used as data for an element. The final way is to target an array of elements, objects, or any combination thereof. For example you could grab all the `div` elements and apply the same animation to them by using `document.querySelector(‘div’)` and setting that to the target. 

####Properties
Whichever way you decide to target, you need to be able to manipulate it. This is where the rest of the props come in. If you target any normal DOM element, including SVG, you can set a prop as any CSS property or DOM attribute that applies to that element type. For example, sliding a square across the screen while doubling its size, rotating it 360 degrees and changing its color to red is as simple as: 
{% codepen https://codepen.io/agrem28/pen/dypaLeW default-tab=js,result %}

####Property Parameters
The next category of options are parameters which affect the way in which properties are transformed. The following are examples of such parameters:
* duration: indicates how long the animation lasts (in milliseconds),
* delay: indicates a wait time (in milliseconds) after which the animation starts,
* endDelay: attaches extra time to the end of the animation (in milliseconds),
* round: rounds up to the nearest decimal.
A more complex parameter is `easing`. Easing refers to the rate of change of an object over time. In our case the changes are the transforming properties, so easing changes how fast or slowly they animate at a given moment. For more information check out [this link](https://easings.net/). As well as setting these parameters to affect an entire animation, you can designate specific properties to behave differently from others. This is done by assigning the property to an object whose properties include a `value`, which is the normal value for the animation, and any of the parameters which you want to single out. For example:
{% codepen https://codepen.io/agrem28/pen/MWjLdYa default-tab=js,result %}
As you can see the box moved before starting to grow or spin which each had a different easing.

####Animation Parameters
The last category of props consists of the types of parameters which affect the animation as a whole. These are the simplest types of parameters. They include direction, loop, and autoplay. Direction defines the direction in which the animation will play: `’normal’`, `’reverse’`, or `’alternate’`. Normal plays the animation from 0% progress to 100%. Reverse plays it from 100% to 0%. Alternate will first play a normal animation then a reverse animation in sequence. Adding a delay will affect the time between the normal play and the reverse play. Loop defines the number of times an animation will play. Setting the value to `true` will cause the loop to play infinitely. Autoplay defines whether the animation will play automatically at render. This value is set to `true` by default.

####Keyframes and Timelines
Keyframes and timelines serve the purpose of setting a sequence of animations to play one after the other. Keyframes set a sequence on a single element and will count as a single animation in the course of a timeline. Keyframes are defined using an array either within the keyframes property or as a value for a CSS property. By setting keyframes to CSS properties, you can overlap animations since each property has its own keyframes array. Here’s an example:
{% codepen https://codepen.io/agrem28/pen/jOMdomP default-tab=js,result %}

Timelines let you synchronize multiple animations together. By default each animation added to the timeline starts after the previous animation ends.
{% codepen https://codepen.io/agrem28/pen/yLaZWzJ default-tab=js,result %}

####Conclusion
Anime.js is robust and easy to use framework for animations in web browsers. Check out their docs [here](https://animejs.com/documentation/) and start creating amazing animations.