Lottie-Animationen in Websites integrieren
Mit Lottie könnt ihr unkompliziert skalierbare und interaktive Animationen in Websites integrieren. Das sog. Lottie-File basiert auf JSON und wird mittels JavaScript in die Website integriert.
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 sollanimType
= gibt an, was animiert wirdloop
= gibt an, ob die Animation in einer Schleife abgespielt werden sollautoplay
= gibt an, ob die Animation automatisch starten sollpath
= 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);
});
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
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.