Anime.js

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:

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. 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: 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:

Timelines let you synchronize multiple animations together. By default each animation added to the timeline starts after the previous animation ends.

Conclusion

Anime.js is robust and easy to use framework for animations in web browsers. Check out their docs here and start creating amazing animations.