Anime.js ist eine Animation Engine für JavaScript, die nun bereits in Version 3.0 veröffentlicht wurde. Mit dabei in der neuen Version ist Support für ES6 Module, aber auch eine neue Website hat die Library bekommen, die zeigt, was das Projekt kann.

Die Website der Library Anime.js wirbt mit dem Slogan „Animate anything“ und meint damit, dass HTML, JS, CSS und SVGs animiert werden können. Dazu werde ein einzelnes, zentrales API verwendet. Geschrieben ist die Animation Engine selbst komplett in JavaScript, wie dem GitHub-Repository des Projekts zu entnehmen ist. Kürzlich erschien mit Anime.js 3.0 eine neue Major-Version der Library, die einige neue Features mitbringt. Darunter ist Support für ES6 Module, sowie eine Funktion zur automatischen Umwandlung von CSS-Einheiten. Für die verzögerte Darstellung von Animationen kann via endDelay nun ein Endpunkt definiert werden. Das Staggering wurde um einen Helper ergänzt. Außerdem bringt Anime.js 3.0 ein Keyframes-System mit, und neue Easings: spring(mass, stiffness, damping, velocity) und steps(x).

Das neue Callback change() ersetzt das bisher verwendete Callback run() und stellt somit einen Breaking Change für bestehende Projekte dar. Außerdem hat sich das Verhalten der Library in Hinblick auf inaktive Tabs verändert. Hier werden Animationen nun pausiert. Weitere Informationen zu den Neuerungen an Anime.js 3.0 können dem Changelog auf GitHub entnommen werden.

Anime.js: Animationen in den Docs testen

Aber was tut die Library nun genau? Die neue, zum Release von Version 3 von Anime.js veröffentlichte Website gibt im Rahmen einiger allgemeiner Beispiele einen Einblick in die Möglichkeiten zur Arbeit mit der Library. So kann dort unter anderem ein Wellen-Effekt beobachtet werden, der sich kreisförmig ausbreitet. Das ist Teil der Staggering-Animation. Diese kann allerdings noch mehr. Wer es genauer wissen möchte, kann einen Blick in die Dokumentation werfen, die die einzelnen Animationsoptionen illustriert, mit einer Beschreibung und einem Codebeispiel versieht. Auch die Dokumentation wurde zu Version 3.0 überarbeitet. Einige weitere Beispiele für die Anwendung von Anime.js können auf Codepen gefunden werden.

Anime.js 3.0 steht unter MIT-Lizenz kann via npm bezogen werden:

$ npm install animejs --save