News

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.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ein Kommentar
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

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.