Anime.js is an animation engine for JavaScript that has already been released in version 3.0. Included in the new version is support for ES6 modules, but also a new website got the library, which shows what the project can do.

Animate anything

The website of the library Anime.js advertises with the slogan “Animate anything”, meaning that HTML, JS, CSS and SVGs can be animated. A single, central API is used for this. The animation engine itself is written entirely in JavaScript, as shown in the project’s GitHub repository. Recently, Anime.js 3.0 released a new major version of the library with some new features. Among them is support for ES6 modules, as well as a function for the automatic conversion of CSS units. For the delayed display of animations, an end point can now be defined via endDelay . The staggering was supplemented by a helper. In addition, Anime.js 3.0 includes a keyframes system, and new easings: spring(mass, stiffness, damping, velocity) and steps(x).

The new callback change() replaces the previously used callback run() and thus represents a breaking change for existing projects. In addition, the behavior of the library with regard to inactive tabs has changed. Animations are now paused here. For more information on what’s new in Anime.js 3.0, see the Changelog on GitHub.

Anime.js: Testing animations in the docs

But what exactly does the library do? The new website , released on the release of version 3 of Anime.js, provides some general examples of how to work with the library. Thus, among other things, a wave effect can be observed, which spreads out in a circle. This is part of the Staggering animation. This can, however, more. If you want to know more about it, you can take a look at the documentation that illustrates the individual animation options, provides a description and a code example. Also the documentation was revised to version 3.0. Some more examples of using Anime.js can be found on codepen.

Anime.js 3.0 is available under MIT license can be obtained via npm: