25.10.2014, 09:03 Uhr Hinweis: Wir haben in diesem Artikel Provisions-Links verwendet und sie durch "*" gekennzeichnet. Erfolgt über diese Links eine Bestellung, erhält t3n.de eine Provision.

Performance von Bibliotheken ist alles. Sie beeinflusst nicht nur direkt das Anwendererlebnis, sondern auch, wie der Entwickler mit der Bibliothek arbeiten kann. jQuery ist wohl die beliebteste Bibliothek innerhalb der JavaScript-Welt, doch gerade wenn es um Animationen geht, hat jQuery eine ganz große Schwäche: $.animate(). In diesem Artikel lest ihr, wie ihr dieses Manko mit Velocity.js ausgleichen könnt.

Heutzutage ist es schwer eine Website zu finden, die nicht auf Animationen setzt, ein FadeIn hier, ein hereinfallendes Overlay dort, kurzum: Animationen sind allgegenwärtig, egal wie subtil sie auch sein mögen. Als Entwickler kann man sich oft auf transit.js oder andere Animations-Bibliotheken verlassen, die meistens auf Animate.css setzen. Sollten die Animationen aber komplexer werden, kommt der findige Entwickler nicht drumrum, selbst die Animation in JavaScript beziehunsweise jQuery zu programmieren. In der jQuery-Bibliothek gibt es dazu die $.animate()-Methode, die eine Implementierung einer individuelle Animations-Sequenz erlabut. Das Problem: Sie ist nicht gerade performant – Velocity.js ändert das.

Bei Velocity.js handelt es sich um eine alternative Implementierung der $.animate()-Methode, die sich aus einer CSS-Manipulations-Bibliothek und einem Animation-Layer zusammensetzt. Dabei soll Velocity.js schneller sein als jQuery, jQuery UI, CSS-Transitions und transit.js, ohne aber die Features der $.animate()-Methode zu verlieren.

Velocity.js in euren Webprojekten

Darüber hinaus aktiviert Velocity.js automatisch die Hardware-Acceleration auf mobilen Geräten, was in einem Performance-Boost resultiert, ohne dass ihr zusätzlichen Code schreiben müsst.

Hardwarebeschleunigung mit jQuery:

$div
  .css("transform", "translateZ(0)")
  .animate({ opacity: 1 })
  .css("transform", "none");

Mit Velocity.js sieht der gleiche Code so aus:

$div.velocity({ opacity: 1 });

Dieses Tutorial zeigt euch weitere Features, inklusive Code von Velocity.js.

Ist Velocity.js eine Alternative zu GSAP?

Nein, denn: Velocity.js ist ein jQuery-Plugin und unterliegt demzufolge auch den selben Limitierungen wie jQuery selbst. Dagegen ist GSAP ein selbstständiges Animations-Framework, das auch auf Non-DOM-Elemente anwendbar ist. Desweiteren ist Velocity.js nicht für komplexe Animationen geeignet wie zum Beispiel sich überlappende Tweens, auf Momentum basierende Bewegungen (Drag-&-Drop oder Throw-&-Drop-Animationen), genauso wenig wie die Animation von Non-DOM-Objekten.

Wer allerdings eine performante Neuimplementierung der $.animate()-Methode will und eine ähnlich geringe Dateigröße (sieben Kilobyte) wie jQuery bevorzugt, für den wird Velocity.js das Richtige sein. Ihr könnt euch Velocity.js auf der offiziellen Website runterladen. Ich kann euch darüber hinaus auch dieses praktische Tutorial zu Velocity.js empfehlen.