Lottie-Animationen in Websites integrieren

Mit Hilfe von Lottie-Animationen lassen sich frei skalierbare und interaktive Animationen in Websites integrieren. Da Lottie-Dateien keine pixelbasierten Animationen sind, sondern auf SVG und JSON basieren, können sie sich positiv auf die Performance der Website auswirken.

Was ist Lottie?

Lottie ist ein, von Airbnb entwickeltes, vektorbasiertes Grafikformat basierend auf SVG und JSON. Alle Informationen zu Vektoren, Aussehen und Funktion werden in einer einzigen JSON-Datei, dem sogenannten »LottieFile« gespeichert. Mit Hilfe von JavaScript kann das LottieFile anschließend interpretiert und die Animation gesteuert werden.

Der große Vorteil von Lottie-Animationen ist, dass sie systemübergreifend funktionieren und pixelbasierte Animationen, wie beispielsweise GIFs oder Videos, welche deutlich mehr Ressourcen verbrauchen, ablösen können.

Lottie kann unkompliziert mit Hilfe von JavaScript in eine Website integriert werden. Auch Design Tools wie XD oder Figma sind in der Lage Lottie Files darzustellen.

Woher bekomme ich Lottie-Animationen?

Eigene Lottie-Animationen erstellen

Um eigene Lottie-Animationen zu erstellen könnt ihr zum Beispiel Adobe After Effects verwenden. Dazu benötigt ihr das Plugin »bodymovin«, welches ihr hier findet. Zusätzlich gibt es auf dieser Seite auch eine Einführung und weitere Informationen zur Erstellung eigener Lottie-Animationen mit Adobe After Effects.

LottieFile aus Bibiothek verwenden

Es gibt eine Vielzahl an fertigen, teilweise kostenfreien LottieFiles auf der gleichnamigen Website lottiefiles.com:

• Kostenfreie LottieFiles: https://lottiefiles.com/featured
• LottieFiles zum Kauf: https://lottiefiles.com/marketplace

Wie baue ich Lottie-Animationen in meine Website ein?

JavaScript-Bibliothek lottie.min.js einbinden

Grundvoraussetzung für den Einsatz von Lottie-Animationen ist die Einbindung der lottie.min.js. In diesem Script enthalten ist der sogenannte Lottie-Player, der für das Ausspielen von Lottie-Animationen benötigt wird.

Die lottie.min.js könnt ihr hier herunterladen oder direkt über ein CDN in eure Website integrieren.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.1/lottie.min.js"></script>

Positionierung der Lottie-Animation im HTML-Code

Für die Positionierung der Lottie-Animation im HTML-Code muss ein Container angegeben werden, in dem später die Animation positioniert wird. Im Beispiel haben wir dem Container dafür die ID lottie-container gegeben. Mit einem Button starten wir später die Animation.

<div class="container">
  <div class="lottie-container" id="lottie-container"></div>
  <button>Animation starten</button>
</div>

Lottie-Animation über JavaScript einbetten und steuern

Anschließend wird über JavaScript eine Variable item mit der Funktion bodymovin.loadAnimation erstellt, an die nun die Eigenschaften übergeben werden, die für die Animation relevant sind.

• wrapper = gibt den Container an, in den die Animation gerendert werden soll
• animType = gibt an, was animiert wird
• loop = gibt an, ob die Animation in einer Schleife abgespielt werden soll
• autoplay = gibt an, ob die Animation automatisch starten soll
• path = gibt den Pfad zum LottieFile an

Im Beispiel wird über einen EventListener gesteuert, dass die Animation über den Klick auf den Button gestartet wird.

var item = bodymovin.loadAnimation({
  wrapper: document.getElementById('lottie-container'),
  animType: 'svg',
  loop: false,
  autoplay: false,
  path: 'https://assets10.lottiefiles.com/packages/lf20_jR229r.json'
});

document.querySelector('button').addEventListener('click', () => {
  item.goToAndPlay(0,true);
});

Beispiel anschauen