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:

Exemplarischer Screenshot einer LottieFiles-Bibliothek

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.

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

Geschrieben von Robert Menzel

Benutzerbild

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause. Zu seinen Aufgaben gehören die visuelle Gestaltung und die technische Umsetzung von Websites, eCommerce-Shops oder dessen Kombination. Besonders gerne übernimmt er die Entwicklung individueller und anspruchsvoller Websites mit umfangreichen ineinandergreifenden Funktionen, getreu dem Motto: »Der beste Lack bringt nichts, wenn die Maschine darunter nicht läuft.«

Feedback & Ergänzungen – 2 Kommentare

  1. Simon Schröder
    schrieb am 02.12.2022 um 11:58 Uhr:

    Hi Robert,
    danke für den tollen Beitrag!

    Besitzt Du Kenntnis darüber, wie sich LottieFiles ggü. der DSGVO verhalten? Aus meiner Sicht müsste das ja wie GoogleFonts behandelt werden und daher lokal gehostet werden ohne externe Verbindungen.

    Beste Grüße
    Simon

    Antworten
    • Jonas Hellwig
      schrieb am 09.12.2022 um 13:57 Uhr:

      Hallo Simon,
      wenn die Lottie-Animationen als Drittanbieter-Integration von einem fremden Server geladen werden, dann ist es denkbar, dass hier datenschutzrechtliche Probleme bestehen. Die Frage ist immer, ob getrackt wird (betrifft eher DSGVO) und/oder ob Daten in Staaten außerhalb der EU abfließen (betrifft eher Privacy Shield).
      Auf der sicheren Seite bist du, wenn du die Daten (Fonts, Lottie etc.) selbst hostest. Wobei auch hier Tracker in den Dateien versteckt sein könnten. Bei Schriften haben wir einen solchen Fall schon erlebt. Im Zusammenhang mit Lottie haben wir aber noch nie davon gehört.
      Bei Drittanbieter-Integration muss man ganz genau im Einzelfall schauen. Dazu können wir dir keine pauschale Antwort geben.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →