|

Unkompliziert ansprechende Web-Animationen bauen mit anime.js

Manchmal möchte man einfach mal schnell eine kleine Animation in eine Webseite oder Web-App einbauen. Oft reichen dann CSS transitions und animations einfach nicht mehr aus. Hier kann natürlich eine riesige Bibliothek wie GreenSock eingesetzt werden. Diese ist allerdings ziemlich groß und umfangreich und bringt daher eine relativ steile Lernkurve mit sich.
Hier kommt anime.js ins Spiel - eine kleine, aber feine Animations-Library ohne Abhängigkeiten.

Eine Animation mit anime.js zu machen, benötigt im Prinzip nur einen Befehl:

anime({
  targets: ".my-target", // Element, das animiert wird (Kann ein CSS-Selektor oder eine DOM-Node sein)
  translateY: "300", // einer der Parameter, der animiert wird (hier der einzige)
  duration: 1000, // Dauer der Animation
});

Dieser Befehl schiebt das Zielobjekt mit der Klasse .my-target in einer Sekunde um 300 Pixel nach rechts.

Natürlich besteht auch die Möglichkeit, eine Callback-Funktion auszuführen, sobald die Animation abgeschlossen ist:

anime({
  // restliche Optionen
  complete: () => console.log("Animation ist fertig!"),
});

Um Animationen vorzubereiten oder nach Animationen einen bestimmten status (wieder-)herzustellen, können auch CSS-Eigenschaften ohne Animation gesetzt werden:

anime.set(".my-target", { opacity: 0, scale: 0.1 });

In vielen Fällen möchte man aber nicht nur eine Bewegung ausführen, sondern eine Abfolge von Bewegungen, womöglich auch von unterschiedlichen Objekten. Dies kann mit anime.timeline einfach erreicht werden:

// Timeline-Object (optional mit default-Parametern) initialisieren
// Timeline-Object (optional mit default-Parametern) initialisieren
const tl = anime.timeline({ duration: 500, loop: true });

// erster Animationsschritt
tl.add({
  targets: ".my-target",
  opacity: 0,
  scale: 0.1,
  rotate: "-15deg",
  duration: 1500, // Dauer des Animationsschritts in ms
});

// zweiter Animationsschritt
tl.add({
  targets: ".my-target",
  opacity: 1,
  scale: 1,
  rotate: 0,
  duration: 1000, // Dauer des Animationsschritts in ms
});

Das Ergebnis sieht dann so aus:

See the Pen anime.js Demo Bitspeicher 1 by Hannes (@MrJeffrey) on CodePen.


Um zu demonstrieren, was sich mit anime.js so alles anstellen lässt, habe ich diese Demo gebaut:

See the Pen animejs Demo Bitspeicher 2 by Hannes (@MrJeffrey) on CodePen.


Mehr Infos findest du auf der anime.js Website, in den anime.js Docs oder auf dem GitHub-Repo von anime.js.