Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

News

anime.js: Schlanke Javascript-Bibliothek für Animationen

    anime.js: Schlanke Javascript-Bibliothek für Animationen

(Screenshot: anime.js)

Schicke Animationen mit Javascript: anime.js bietet eine überschaubare aber sehr sehenswerte Animations-Library. Wir haben uns die Lib genauer angeschaut:

Schlanke Library, dicker Inhalt

Das eher unscheinbare Library anime.js kommt mit einigen netten Funktionen. Auf Codepen gibt es bereits sehenswerte Animationen, die mit anime.js erstellt wurden. Der Einstieg ist schnell gemacht. Wir können direkt vom offiziellen Github-Repository  die anime.js-Datei runterladen und in unsere Seite einbetten.

<script src="anime.min.js"></script>

Ein Pluspunkt der Library: Sie wird von allen gängigen Browsern unterstützt – Chrome, Safari, Opera, Firefox und IE 10+. Alle Definitionen zu Funktionen sind anschaulich und verständlich auf Github beschrieben, diese können direkt mit Javaschript gesteuert werden. Nach dem Einbetten können wir auf eine Reihe von Funktionen zurückgreifen. Dazu zählt unter anderem das Definieren jeder einzelnen Animation. Ebenfalls lassen sich zum Beispiel Animationen entlang des SVG Pfads mit anime.path()umsetzten, die Wiedergabe manuell mit .play(), .pause(), .restart() und .seek() steuern.

Um die volle Animation zu sehen, klicke das Bild. (Screenshot: codepen)
Um die volle Animation zu sehen klicke auf das Bild. (Screenshot: Codepen)

Zusätzlich bietet anime.js kleine Helfer. So kann lassen sich zum Beispiel mit anime.list Arrays zurückholen oder mit anime.speed die Dauer aller Animationen steuern. Neben diesen Beiden findet ihr noch viele weitere anime.js-Helfer. Die Javascript-Bibliothek erfindet das Rad dabei allerdings nicht neu, schließlich bedient sich die Lib für die Animationen an gängigen CSS- und jQuery-Parametern. Für alle, die noch auf der Suche nach einer neuen und modernen Library sind, lohnt sich ein Blick auf anime.js aber auf jeden Fall.

Wer übrigens doch lieber auf CSS-Librarys zurück greift, sollte sich diese fünf praktischen CSS-Libs nicht entgehen lassen.

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

1 Reaktionen
Florian
Florian

Wo genau habt ihr euch denn die Lib angeschaut? Alles was ihr schreibt ist wieder einmal nicht der Überschrift entsprechend. Man man man ....

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden