Die Entwickler von thednp und dalisoft haben eine nützliche Engine für DOM-Animationen in JavaScript veröffentlicht. Bei KUTE.js wurde laut der Macher der Fokus auf Übersichtlichkeit und Vielseitigkeit gelegt. Den Kern der Library bilden verschiedene Plugins, mit denen jeweils bestimmte Properties animiert werden können. Dadurch soll KUTE.js flexibel und leistungsstark bleiben. Dank dieser kleinen Demo kann man sich von der Performance selbst ein Bild machen, auch weitere hübsche Beispiele kann man sich zu Gemüte führen.

Kute.js – modularer Aufbau ermöglicht Vielseitigkeit

Zunächst kann KUTE.js u.a. folgende Properties animieren: die Opacity-Property, alle 2D-Transform- und 3D-Transform-Properties, mit Ausnahme von matrix, matrix3d, double axis skew, double axis scale, bzw. rotate3d. Ferner lassen sich die folgenden Box Model-Properties animieren: width, height, top und left, sowie Color und backgroundColor Properties. Außerdem lassen sich Scrolling-Animationen auf dem window Object und jedem scrollbaren DOM-Element erstellen.

Dank des modularen Aufbaus ist noch mehr möglich: Das CSS-Plugin erlaubt dann u.a. noch Box Model-Properties wie margin und padding zu animieren, sowie die borderRadius-Property und verschiedene Text-Properties. Zusätzlich ist noch ein umfangreiches Plugin für SVG vorhanden, womit sich SVG-Transforms für verschiedene Browser animieren lassen. Ebenso sind Plugins für Text und Attributes verfügbar.

Getting Started mit KUTE.js

KUTE.js ist unter MIT-Lizenz als Open-Source frei verfügbar. Es kann hier heruntergeladen und einfach in das HTML Dokument eingefügt werden. Alternativ können auch Bower und npm benutzt werden. Die Syntax ist zwar nutzerfreundlich und hat eine ausführliche Dokumentation, zusätzlich kann hier aber noch ein hilfreiches Tutorial gefunden werden.