Julian Garnier recently released Anime 3.0. The third major iteration of Anime features new animation options, ES6 module support together with a new build process, and a new showcasing website which doubles as documentation.
Anime 3.0 supports the modules introduced in ECMAScript 6 with a new build process. The ES6 module build can now be imported with
import anime from 'lib/anime.es.js';
while the CommonJS build can be required as
const anime = require('lib/anime.js');
An ES6 module distribution may allow to reduce the bundle size of applications using Anime, as it enables modern bundlers, such as Webpack or Rollup, to use tree-shaking.
Anime 3.0 features a new keyframes system, a helper for staggering, extra easings and callbacks, and automatically converts CSS units. This means a richer range of animations being available to developers together with more customization flexibility.
Anime.js now pauses animations when the browser window or tab is no longer in the foreground. The resulting decrease in battery consumption may be important in a mobile context.
In addition to the new features, Anime 3.0 also brings two breaking changes at the API level, which are particularly relevant for older projects. The callback change supersedes the former run, while get replaces getValue.
Anime additionally ships with a new, fully-featured documentation site that visually illustrates the numerous features of the library:
Anime describes itself as "a lightweight JavaScript animation library. It works with any CSS properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects". As a matter of fact, an Anime user mentioned on reddit:
The main advantage to
anime.jsis that it's really tiny, it's like 1,200 loc unminified.
Other Anime users also value the open-source license of Anime as an advantage over other full-featured for-pay alternatives, such as GSAP. Unlike GSAP, which only has a tick callback, Anime lets the developers for instance manually adjust the animation tick to any requestAnimationFrame (raF).
Anime exposes a unique function anime as part of its API:
anime({
targets: 'div',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800
});
The previous code sample will animate all divs by translating the div content horizontally, while rotating it, all this for a duration of 800ms.
Anime is available under the MIT open-source license. Contributions are welcome via the GitHub package.
