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.«

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Raimund Büchner

Benutzerbild

Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.

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.

Projekte mit kulturbanause

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

Design + Code

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.

Schulung + Beratung