Mit Anime.js animierst du CSS, SVG und mehr ganz einfach

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Zu den zahlreichen Frameworks für Animationen gesellt sich mit anime.js ein weiteres. Im Gegensatz zu den vielen anderen Frameworks erlaubt anime.js nicht nur die Animation per CSS-Eigenschaften. Du kannst damit auch SVG- und HTML-Eigenschaften per Animation verändern. Gerade im modernen Webdesign ist das SVG-Format kaum wegzudenken. Das Framework kommt jedenfalls zur rechten Zeit.

Einfache CSS-Animationen

Hast du die JavaScript-Datei von anime.js eingebunden, erstellst du auf CSS-Eigenschaften basierende Animationen recht einfach. Über den Aufruf von „anime()“ übergibst du eines oder mehrere Ziele – also Elemente, die animiert werden sollen. Anschließend definierst du die CSS-Eigenschaften, die per Animation verändert werden sollen.

anime({
  targets: [document.getElementsByTagName("div")[0]],
  translateX: "300px",
  rotate: 180,
  duration: 2000,
  direction: "alternate",
  loop: true,
  elasticity: 600,
  easing: "easeOutElastic"
});

Im Beispiel wird per „targets“ ein „<div>“-Element übergeben. Du kannst auch einfach eine ID angeben. Es folgen zwei CSS-Eigenschaften – „translateX“ und „rotate“ –, die animiert werden sollen. Anschließend wird per „duration“ die Dauer und per „direction“ die Richtung der Animation festgelegt. Die Animation dauert hier also zwei Sekunden. Anschließend wird die Animation rückwärts ausgeführt. Per „loop“ legst du noch fest, dass sich die Animation in einer Schleife wiederholt.

Während einer Animation

Grundsätzlich ist dieses einfache Beispiel auch ohne JavaScript möglich, indem man die „@keyframes“-Regel zusammen mit „animation“ einsetzt. Bei anime.js kommt jedoch noch die besondere Eigenschaft „elasticity“ hinzu, die es erlaubt, einer Animation eine Elastizität mitzugeben. Je höher der Wert ist, desto elastischer wird animiert. Das heißt, am Ende der Animation bleibt diese nicht sofort stehen, sondern pendelt sich aus. Hiermit lassen sich sehr natürliche Bewegungen realisieren.

30 Easingeffekte

Wie bei klassischen CSS3-Animationen hast du mit anime.js die Möglichkeit, einer Animation ein Easing hinzuzufügen. Insgesamt stehen dir 30 verschiedene Easingeffekte zur Verfügung – also deutlich mehr als bei CSS3.

Gibst du „anime.easings“ über die Browser-Konsole aus, erhältst du eine Liste aller Effekte. Zusammen mit „elasticity“ ergeben sich jenseits des sonst üblichen sehr interessante Effekte.

SVG-Pfadanimationen

Wie bereits erwähnt sind Animationen mit SVG-Eigenschaften wie beispielsweise der „d“-Eigenschaft eines Pfades möglich. So realisierst du sehr einfach etwa eine Animation entlang eines Pfades.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Dazu definierst du per SVG zunächst ein „<path>“-Element sowie ein weiteres Elements – zum Beispiel ein „<div>“-Container –, welches sich entlang des Pfades bewegen soll.

anime({
  targets: [document.getElementsByTagName("div")[0]],
  translateX: anime.path(document.getElementsByTagName("path")[0]),
  translateY: anime.path(document.getElementsByTagName("path")[0]),
  rotate: anime.path(document.getElementsByTagName("path")[0]),
  duration: 5000,
  loop: true,
  easing: "linear"
});

Per „targets“ wird wieder das zu animierende Element referenziert. Über „translateX“, „translateY“ und „rotate“ wird per „anime.path()“ der SVG-Pfad angegeben, an dem entlang das „<div>“-Element animiert werden soll.

SVG-Morphing

Mit dem von Google eingeläuteten Ende von SMIL sind animierte Formänderungen von SVG-Elementen nicht mehr möglich – zumindest in zukünftigen Versionen des Browsers. Mit anime.js realisierst du jedoch weiterhin ganz einfach solche Animationen.

Dazu definierst du zunächst einen SVG-Pfad, den du später ganz einfach in eine andere Form morphen lassen kannst.

anime({
  targets: [document.getElementsByTagName("path")[0]],
  d: "M140,51.75A51.75,51.75,0,0,0,99.2,35.27a83,83,0,1,0,65.13,65.67A51.76,51.76,0,0,0,140,51.75Z",
  duration: 1000,
  loop: true,
  direction: "alternate",
  easing: "linear"
});

Im Beispiel wird als „targets“ ein SVG-Pfad referenziert. Über „d“ gibst du einen Zielpfad an, der die Form definiert, in welche das „<path>“-Element morphen soll. Wichtig ist, dass die Anzahl der Punkte im Quell- und Zielpfad identisch sind. Sonst gibt es unschöne Effekte statt eines schönen Morphings.

Interaktive Animationen

Zu guter Letzt ermöglicht dir anime.js auch noch, interaktive Animationen zu erstellen. So gibt es mit „play()“, „pause()“ und „restart()“ Methoden, mit denen du das Abspielen steuerst. Mit „seek()“ springst du zudem an eine bestimmte Position innerhalb der Animation. Dazu übergibst du entweder eine Zeit oder einen prozentualen Wert.

Außerdem stehen die Eigenschaften „begin“, „update“ und „complete“ zur Verfügung, denen du eine Funktion übergeben kannst. Diese Funktion wird dann entsprechend beim Beginn, bei Veränderungen während der Animation oder am Ende der Animation ausgeführt.

Fazit

Beispiel auf CodePen

Beispiel auf CodePen

anime.js hat alles, was du für einfache und komplexe CSS- und SVG-Animationen brauchst. Es gibt eine übersichtliche API-Referenz mit einigen Beispielen. Zudem läuft das Framework unter allen gängigen Browsern einschließlich des Internet Explorers ab Version 10.

Die hier vorgestellten Code-Beispiele findest du auf CodePen:

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.