In der Webentwicklung manuell brauchbare Animationen einzubauen kann schnell sehr aufwendig und umständlich werden. Abhilfe können JavaScript-Libraries schaffen. Eins davon ist Anime.js, welches nach längerer Pause kürzlich ein neuen Major-Release auf Version 3.0 verpasst bekommen hat.

Doch wie einfach werden Animationen dadurch wirklich? Im Grunde ermöglicht euch Anime.js auf verschiedenste Art und Weise Animationen auf eure Website zu bringen: Über CSS-Eigenschaften sowie individuelle Transformationsfunktionen (mit der CSS-Eigenschaft transform), HTML-DOM-Attribute sowie JavaScript-Objekte und sogar in dem Vektorgrafik-Format SVG. Mit Anime.js können nicht nur Animationen eingebunden werden. Die Library bietet zusätzlich verschiedene Features, die die Möglichkeiten zum Erstellen von bewegten Objekten erhöhen.

Um beispielsweise eine einfache Animation des Retro-Spiels Pong mit Anime.js zu implementieren, wird kaum Sourcecode benötigt. Drei HTML-Elemente werden mithilfe von leicht lesbarem JavaScript-Code animiert. Genutzt wird dabei eine der Hauptfunktionen: Timeline. Damit lassen sich verschiedene Animationen synchronisieren. So könnte die Eine starten, sobald die Andere beendet wurde. Mithilfe von Parametern kann das zusätzlich geändert werden.

Das ist beispielsweise Staggering. Damit lassen sich mehrere Elemente gemeinsam animieren. Die könnten beispielsweise zusammen in eine Richtung bewegt werden. Es kann auch eine Verzögerung eingebaut werden, sodass die Elemente nacheinander animiert werden. Das Feature kann auch mit verschiedenen Optionen auf ein ganzes Gitter Anwendung finden. Eine etwas aufwendigere Staggering-Animation lässt sich dann mit relativ wenig Code so umsetzen:

Das Herzstück der Library dürften aber Keyframes sein. Damit können in einem Array beliebig viele solcher Keyframes in einer Animation definiert werden. Diese durchlaufen dann alle Zielobjekte. Mit translateX beziehungsweise translateY und einem zugehörigen Wert bewegen sich die Objekte eine bestimmte Anzahl an Pixeln in die eine oder andere Richtung. Auch die Dauer oder Verzögerung für eine solche Bewegung sind mithilfe von Parametern einfach definierbar.

Zusätzlich liefert die Library JavaScript-Funktionen mit, welche eine Animation starten, pausieren, neu starten, invertieren oder zu einem bestimmten Zeitpunkt springen lassen können. So könnten Buttons beispielsweise eine Animation starten oder pausieren. Auch einige Callback-Funktionen sind an Bord: So können jedes Mal verschiedene Ereignisse eintreten, wenn sich eine Animation aktualisiert, gestartet, beendet und so weiter wird. Für jede Animation kann zudem die Art und Weise der Durchführung festgelegt werden. Neben vorimplementierten Funktionen für lineare, elastische oder schrittweise Animationen können auch ganz eigene Funktionen erstellt werden.

Passend dazu:

• Animationen ohne JavasScript und mit animate.css
• Stehen wir am Anfang einer JavaScript-Ära?
• JavaScript: Die beliebtesten Frameworks und Tools in 2018