BT

InfoQ Homepage News Anime.js 3.0 Released: New Animation Options, New Documentation Website

Anime.js 3.0 Released: New Animation Options, New Documentation Website

Bookmarks

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 new website screen capture

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.js is 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.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.