Lottie ist ein Open-Source-Dateiformat und eine Rendering-Bibliothek, die After-Effects-Animationen als JSON-Datei exportiert und diese verlustfrei, skalierbar und interaktiv steuerbar im Web (und in Apps) abspielt.
Was ist Lottie?
Lottie wurde 2017 von Airbnb entwickelt und als Open-Source-Projekt veröffentlicht. Der Name ist eine Hommage an die Stummfilm-Regisseurin Lotte Reiniger. Das Projekt löste ein zentrales Problem: Wie bringt man hochwertige Motion-Graphics-Animationen ins Web und in Apps, ohne auf Videos oder komplexe CSS/Canvas-Implementierungen zurückgreifen zu müssen?
Der Workflow ist zweistufig: Ein Motion Designer erstellt eine Animation in Adobe After Effects und exportiert sie mit dem kostenlosen Plugin Bodymovin als JSON-Datei. Im Browser lädt die Lottie-Web-Bibliothek diese JSON-Datei und rendert die Animation als SVG oder Canvas.
Vorteile gegenüber Video und GIF
| Format | Dateigröße | Skalierbar | Steuerbar | Transparenz |
|---|---|---|---|---|
| Lottie (JSON) | Klein | Ja (Vektor) | Ja | Ja |
| GIF | Sehr groß | Nein | Nein | Begrenzt |
| Video (MP4) | Groß | Nein | Begrenzt | Nein |
| CSS Animation | 0 (im CSS) | Ja | Ja | Ja |
| SVG-Animation | Klein | Ja | Ja | Ja |
Erklärung
After Effects → Lottie Workflow
1. Plugin installieren
- Bodymovin-Plugin für After Effects: aescripts.com/bodymovin
- Alternativ: LottieFiles for After Effects (offizielles Plugin)
2. Komposition vorbereiten Nicht alle After Effects Features sind Lottie-kompatibel. Unterstützt werden:
- Shapes, Pfade, Text
- Masken und Matten (teilweise)
- Expressions (begrenzt)
- Viele Effekte (aber nicht alle)
Nicht unterstützt: Raster-Effekte, 3D-Layer, Particles, bestimmte Blending Modes.
3. Export In After Effects: Fenster → Erweiterungen → Bodymovin → Komposition wählen → Rendern
Das Ergebnis ist eine .json-Datei, die alle Keyframes, Kurven und Layer-Informationen enthält.
Integration im Web
Variante 1: lottie-web (npm)
``bash npm install lottie-web ``
```javascript import lottie from 'lottie-web';
const animation = lottie.loadAnimation({ container: document.querySelector('#lottie-container'), renderer: 'svg', // 'svg', 'canvas', oder 'html' loop: true, autoplay: true, path: '/animationen/meine-animation.json' // Pfad zur JSON-Datei }); ```
Variante 2: lottie-player Web Component
```html <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="/animationen/success.json" background="transparent" speed="1" style="width: 200px; height: 200px;" loop autoplay> </lottie-player> ```
Variante 3: dotlottie (modernes Format)
Das neuere .lottie-Format (Zip mit JSON + Assets) bietet kleinere Dateigrößen:
```html <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.js"></script>
<dotlottie-player src="/animationen/animation.lottie" autoplay loop></dotlottie-player> ```
Steuerung per JavaScript
```javascript const animation = lottie.loadAnimation({ container: document.querySelector('#container'), renderer: 'svg', loop: false, autoplay: false, path: '/data.json' });
// Playback-Kontrolle animation.play(); animation.pause(); animation.stop(); animation.setSpeed(0.5); // halbe Geschwindigkeit animation.setDirection(-1); // rückwärts abspielen animation.goToAndStop(50, true); // Frame 50 anspringen, stoppen animation.goToAndPlay(0, true); // von Frame 0 abspielen
// Auf bestimmten Frame-Bereich beschränken animation.playSegments([0, 30], true); // Frame 0–30
// Events animation.addEventListener('complete', () => { console.log('Fertig!'); });
animation.addEventListener('loopComplete', () => { / ... / }); animation.addEventListener('enterFrame', (e) => { console.log(e.currentTime); // aktueller Frame }); ```
Interaktive Lottie-Animationen
```javascript // Animation an Scroll-Position koppeln window.addEventListener('scroll', () => { const fortschritt = window.scrollY / (document.body.scrollHeight - window.innerHeight); const frame = Math.round(fortschritt * animation.totalFrames); animation.goToAndStop(frame, true); });
// Animation bei Hover abspielen const container = document.querySelector('#lottie-btn'); container.addEventListener('mouseenter', () => animation.play()); container.addEventListener('mouseleave', () => { animation.setDirection(-1); animation.play(); }); ```
Beispiele
Ladeanzeige
```javascript // Lottie-Spinner als Ladeindikator const spinner = lottie.loadAnimation({ container: document.querySelector('#spinner'), renderer: 'svg', loop: true, autoplay: true, path: '/loading-spinner.json' });
// Nach Laden der Daten ausblenden fetch('/api/daten') .then(res => res.json()) .then(daten => { spinner.destroy(); document.querySelector('#spinner').remove(); renderDaten(daten); }); ```
Success/Error-Feedback
``javascript async function formSubmit(formData) { try { await api.senden(formData); lottie.loadAnimation({ container: document.querySelector('#feedback'), renderer: 'svg', loop: false, autoplay: true, path: '/success-checkmark.json' // Häkchen-Animation }); } catch (e) { lottie.loadAnimation({ container: document.querySelector('#feedback'), renderer: 'svg', loop: false, autoplay: true, path: '/error-shake.json' // Fehler-Animation }); } } ``
In der Praxis
LottieFiles (lottiefiles.com) ist die zentrale Community-Plattform mit Tausenden kostenloser und kostenpflichtiger Animationen. Designers können dort Animationen hochladen, teilen und direkt in Websites einbetten.
Wann Lottie einsetzen:
- Illustrierte Animationen, die detaillierter sind als CSS es erlaubt
- Marken-spezifische Animationen (Logos, Icons, Mascots)
- Erfolgs-/Fehler-Feedback mit polierter Optik
- Ladeanimationen mit Marken-Charakter
- Onboarding-Illustrationen
Grenzen von Lottie:
- Nicht alle After-Effects-Features werden exportiert
- Sehr komplexe Animationen können große JSON-Dateien erzeugen
- 3D und Partikel-Effekte nicht unterstützt
- Expressions müssen manuell überprüft werden
Tipp: Vor dem Export mit LottieFiles Preview testen, ob die Animation korrekt aussieht.
Vergleich & Abgrenzung
| Lottie vs. | Unterschied |
|---|---|
| [SVG Animationen](/wiki/mediendesign-digitale-medien/web-animation/svg-animationen/) | SVG-Animation ist Code, Lottie exportiert aus AE. Lottie einfacher für Motion Designer, SVG besser für Entwickler-Kontrolle. |
| GIF | Lottie viel kleiner, vektorbasiert, steuerbar. GIF braucht keine Library. |
| CSS Animation | CSS für UI-Übergänge, Lottie für illustrative Animationen. |
| Video | Video für filmisches Material. Lottie für Grafiken und Illustrationen. |
Häufige Fragen (FAQ)
Wie groß werden Lottie-JSON-Dateien? Typischerweise 20–200 KB. Einfache Icons oft unter 10 KB. Bei großen Animationen kann man das dotlottie-Format verwenden (bis 70% kleiner durch Kompression).
Welcher Renderer ist besser – SVG oder Canvas? SVG: Scharf auf allen Auflösungen, DOM-zugänglich, besser für Text und Formen. Canvas: Besser für viele Partikel oder sehr komplexe Animationen (höhere Performance bei Partikel-Systemen).
Muss ich After Effects haben? Für die Erstellung komplexer Lottie-Animationen: Ja, oder Figma mit LottieFiles-Plugin. Es gibt auch den LottieFiles Editor für einfache Anpassungen direkt im Browser.
Verwandte Einträge
- SVG Animationen – Alternative für Vektor-Animationen im Web
- Loading Animationen & Skeleton Screens – Lottie als Ladeanimation einsetzen
- Micro-Interactions im UI Design – Lottie für UI-Feedback-Momente
- GSAP (GreenSock) – Grundlagen – Alternative Tool für ähnliche Ergebnisse ohne AE
Weiterführend
- LottieFiles: Documentation (2024) – lottiefiles.com/documentation
- Airbnb Engineering: Introducing Lottie (2017) – airbnb.io/lottie
- GitHub: airbnb/lottie-web – github.com/airbnb/lottie-web
- Bodymovin Plugin: aescripts + aeplugins – aescripts.com/bodymovin
- dotLottie Format: dotlottie.io (2023)
