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

Entwicklung & Design

Hat $.animate() ausgedient? So nutzt du den Performance-Boost von velocity.js

(Foto: funktionhouse / flickr.com, Lizenz: CC-BY)

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.

#FLICKR#
Velocity.js implementiert eine alternative $.animate-Funktion. (Foto: funktionhouse / flickr.com, Lizenz: CC-BY)

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.

Bitte beachte unsere Community-Richtlinien

3 Reaktionen
Hans Wurst

FYI: Im IE 11 und auf dem iPad gab es bei uns zuletzt einige Probleme mit Velocity.js, weshalb wir auf die animate-Methode zurückkommen mussten.

Mario Janschitz

Hallo Hans! Danke für die Info. Wo gab es denn genau Probleme?

irgendeinem Spinner

Velocity ist nicht nur ein jQuery-Plugin sondern kann auch ohne jQuery genutzt werden. Schön wäre es, wenn das grundsätzlich der Fall wäre, dann bräuchte jQuery auch gar keine Animationen mehr mitliefern. do one thing and do it well ist mir immer noch das liebste.

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

Jetzt anmelden

Finde einen Job, den du liebst