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 $.anima
te()
-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.
Bitte beachte unsere Community-Richtlinien
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.
Hallo Hans! Danke für die Info. Wo gab es denn genau Probleme?
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.