Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

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.

  • 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

Geschrieben von Robert Menzel

Benutzerbild

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause®. Zu seinen Aufgaben gehören die Gestaltung und die technische Umsetzung von Websites mit Photoshop, Illustrator, WordPress, PHP, HTML, CSS (Sass) und JavaScript (jQuery). Besonders gerne übernimmt er die Erstellung individueller und anspruchsvoller WordPress-Themes mit umfangreichen ineinandergreifenden Funktionen.

Feedback & Ergänzungen – Schreibe einen Kommentar

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 →