Lottie-Animation

Definition: Lottie ist ein Open-Source-Animations-Format das Airbnb 2017 entwickelte und das After-Effects-Animationen als kompakte JSON-Dateien ins Web und auf mobile Plattformen bringt. Lottie-Animationen sind vektorbasiert (verlustfreie Skalierung auf jede Auflösung); typisch 20–50 Kilobyte groß gegenüber 1–5 Megabyte für äquivalente GIF-Animationen (40× Dateigröße-Vorteil); über JavaScript-Bibliothek (lottie-web) oder Web-Component (dotlottie-player) in Webseiten integrierbar; per JavaScript-API steuerbar (play, pause, stop, setSpeed, goToAndPlay); auf iOS (Airbnb iOS Lottie-Library; Objective-C/Swift), Android (Airbnb Android Lottie-Library; Kotlin/Java) und React Native nativ renderbar. Lottie-Einsatzbereiche im UI-Design: Lade-Indikatoren (animierte Loader statt statischer Spinner); Success-States (Animierter Haken nach erfolgreicher Aktion); Empty-State-Illustrationen (subtil animierte leere Zustände); Onboarding-Screens (animierte Feature-Erklärungen); Icon-Transitions (Hamburger → X; Play → Pause); Micro-Interactions (kurze dekorative Animations-Akzente); Hero-Animationen (Splash-Screen, Landing-Page-Animation). Technische Architektur: Lottie-JSON beschreibt Animations-Keyframes in einem JSON-Schema; Lottie.js rendert via Canvas oder SVG; komplexe After-Effects-Features werden nicht alle unterstützt (Expressions werden teilweise, komplexe Layer-Effects werden oft nicht korrekt gerendert). Accessibility: animierte Lottie-Inhalte müssen prefers-reduced-motion respektieren; informative Animationen benötigen Textalternativen; dekorative Animationen pausieren bei prefers-reduced-motion.

Erläuterung

Lottie entstand als internes Airbnb-Projekt das das Problem lösen sollte dass Motion-Designer hochwertige After-Effects-Animationen erstellten die aber nur als schwere GIFs oder extrem aufwendige CSS/Canvas-Reproduktionen in der App landen konnten. Brandon Withrow (iOS-Ingenieur; Airbnb; San Francisco), Gabor Варга (Android-Ingenieur; Airbnb) und Gabriel Folgado entwickelten 2017 das Lottie-Projekt intern und veröffentlichten es im Januar 2017 als Open Source auf GitHub. Der Name «Lottie» ist eine Hommage an Charlotte «Lottie» Reiniger (Berlin; 1899–1981; deutsche Animationsfilm-Pionierin; «The Adventures of Prince Achmed», 1926 – ältester erhaltener Zeichentrickfilm in Spielfilmlänge). Die technische Grundlage von Lottie ist das Bodymovin-Plugin (Hernan Torrisi; argentinischer Entwickler; Buenos Aires; Argentinien; Open-Source-After-Effects-Plugin; erste Version 2015; wurde von Airbnb als Basis des Lottie-Exporters adoptiert): Bodymovin exportiert After-Effects-Compositions als JSON-Objekte die die Animations-Daten (Keyframes, Bezier-Kurven, Layer-Eigenschaften, Shapes, Text) in einer strukturierten JSON-Hierarchie beschreiben; das Format wurde nicht offiziell von Adobe spezifiziert sondern ist de-facto-Standard durch Lottie's Popularität. LottieFiles (Kuala Lumpur; Malaysia; gegründet 2017; Kshitij Minglani und anderen; 2021 Seed-Runde; 2022 Series A von Sequoia Capital Southeast Asia) wurde zur zentralen Community-Plattform: über 300.000 Lottie-Animationen; kostenlose und kommerzielle Lizenzen; Lottie-Editor im Browser; Lottie-Player-Komponente; über 5 Millionen registrierte Nutzer. DotLottie-Format (.lottie; LottieFiles; 2023): ZIP-Container-Format das JSON-Daten, Assets und Metadaten zusammenfasst; typisch 30–50% kleiner als JSON allein; unterstützt mehrere Animations-Varianten in einem File; dotlottie-player Web Component als moderne Alternative zu lottie-player. Rive (rive.app; früher Flare; Koen Bok und Jorn van Dijk; Amsterdam; Niederlande; gegründert 2018; Rebranding 2021): Alternative zu Lottie mit stärkerer Interaktivitäts-Unterstützung durch State Machines; Rive-Animationen können auf User-Input reagieren (Hover, Click, Drag); Rive-Dateien (.riv) sind noch kompakter als Lottie-JSON; wächst als nächste Generation von UI-Animationstools da Rive interaktive Zustände (Button Hover/Active/Disabled) ohne JavaScript-Kopplung ermöglicht.

Lottie-Integration, Performance und JavaScript-API

Lottie-Web-Integration und Player-Optionen: Lottie-Web (lottie-web; npm; Airbnb; Open Source; MIT): lottie.loadAnimation({ container: element, renderer: 'svg', loop: true, autoplay: true, path: 'animation.json' }); Renderer-Optionen: svg (Default; Accessibility mit ARIA; skalierbar); canvas (Performance-optimiert; kein ARIA; gut für komplexe Animationen); html (CSS-Transform-basiert; gut für einfache Bewegungen); dotlottie-player Web Component (LottieFiles; Custom Element): <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script> <dotlottie-player src="animation.lottie" autoplay loop style="width: 200px"></dotlottie-player>; Intersection Observer für Lazy-Loading: Animation erst laden wenn Element im Viewport sichtbar wird; spart initiale Bandbreite und CPU; const observer = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { loadLottieAnimation(); observer.disconnect(); } }); observer.observe(animationContainer); CDN-Optimierung: Lottie-JSON-Dateien über CDN hosten; Cache-Control: public, max-age=31536000 für statische Animations-Assets; WOFF2-Analogie: JSON-Dateien mit gzip oder brotli komprimieren (30–40% weitere Größenreduktion)
JavaScript-API und interaktive Kontrolle: Lottie-Animations-Kontrolle via API: const anim = lottie.loadAnimation({...}); anim.play(); anim.pause(); anim.stop(); anim.setSpeed(2); // 2× Geschwindigkeit anim.setDirection(-1); // Rückwärts anim.goToAndPlay(50, true); // Frame 50 anim.goToAndStop(50, true); anim.playSegments([0, 30], true); // Nur Frames 0–30; Event-Listeners: anim.addEventListener('complete', callback); anim.addEventListener('loopComplete', callback); anim.addEventListener('enterFrame', callback); anim.addEventListener('data_ready', callback); Hover-Trigger-Pattern: element.addEventListener('mouseenter', () => anim.play()); element.addEventListener('mouseleave', () => { anim.stop(); }); @media (hover: hover) Regel beachten: nur auf Geräten mit echtem Hover-Pointer; Scroll-gesteuerte Animation (Play-on-Scroll): Intersection Observer kombiniert mit currentFrame-Property: scroll-Position mappt auf Frame-Nummer; sehr effektiv für Storytelling-Seiten; Segment-Animationen: verschiedene Animations-Phasen in verschiedenen Frame-Ranges; play() für Idle-State (0–50); on-click playSegments([50, 100]) für Action-State
Lottie vs. GIF vs. CSS-Animation vs. Video: Dateigrößen-Vergleich (typische 3-Sekunden-Animation): GIF: 1–5 MB (verlustbehaftet; keine Skalierung; 256-Farben-Limit); Lottie-JSON: 20–100 KB (verlustfrei; beliebig skalierbar; volle Farbpalette); WebP-Animated: 200–800 KB (Raster; nicht skalierbar; geringere Browser-Unterstützung als GIF); MP4 H.264: 50–200 KB (Raster; nicht skalierbar; kein Transparenz-Kanal); CSS-Animation: 0 KB extra (nur CSS/HTML; begrenzte Komplexität; rein code-basiert; keine After-Effects-Integration); Wann welches Format: Lottie: komplexe After-Effects-Animationen; Icons; Loader; UI-Transitions; Illustration-Animationen; GIF: wenn Lottie nicht möglich; für soziale Medien (Lottie nicht unterstützt); CSS: einfache Bewegungen (Hover, Fade, Slide); kein After-Effects-Workflow nötig; Video (MP4): sehr komplexe Animationen mit vielen Layern die Lottie nicht korrekt rendert; realistische Simulationen; Rive: interaktive State-Machine-Animationen; erfordert eigenem Design-Workflow in Rive-Editor

Accessibility, prefers-reduced-motion und Best Practices

Accessibility für Lottie-Animationen: prefers-reduced-motion für Lottie: const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (!prefersReducedMotion) { lottie.loadAnimation({...}); } else { // Statisches Fallback-Bild anzeigen } ; oder via CSS: @media (prefers-reduced-motion: reduce) { .lottie-container { display: none; } .lottie-static-fallback { display: block; } }; WCAG 2.3.3 Animation from Interactions (Level AAA): Animationen aus Interaktionen können deaktiviert werden; für Level AA nicht verpflichtend aber Best Practice; informative vs. dekorative Lottie-Animationen: dekorativ (reine Stimmung; kein Informationsgehalt): aria-hidden="true" auf Container; informativ (erklärt einen Prozess oder State): ARIA-Label am Container: aria-label="Animation: Zahlungsvorgang erfolgreich abgeschlossen"; role="img"; für komplexe Erklär-Animationen: Textalternative oder Video-Transkript bereitstellen; Blitzen-Regel: WCAG 2.3.1 (Level A): keine Inhalte die mehr als 3× pro Sekunde blitzen; für Lottie-Animationen sicherstellen dass kein starkes Stroboskop-Effekt in der Animation; besonders wichtig für Epilepsie-Betroffene; Photosensitive Epilepsy Analysis Tool (PEAT; Trace R&D Center; University of Wisconsin-Madison) für Prüfung
Performance-Optimierung für Lottie: After-Effects-Optimierung vor Export: komplexe Effekte reduzieren (Glow, Motion Blur erhöhen Lottie-Dateigröße erheblich); unnecessary Layers löschen; Compositions verschachteln statt flach anlegen; Shape-Layers bevorzugen statt Bitmap-Layers (Bitmap-Referenzen werden als Base64 in JSON eingebettet – macht Dateigröße explodieren); Lottie-JSON-Optimierung: lottie-minify (npm): entfernt unnötige Spaces und Kommentare; lottie-compressor: vereinfacht Bezier-Kurven ohne visuelle Qualitätseinbuße; Adobe After Effects-Plugin LottieFiles for After Effects (offiziell; 2022): optimierter Export direkt aus After Effects; Preview in After Effects; Upload zu LottieFiles; Canvas-Renderer für Performance: für komplexe Animationen mit vielen Shapes: renderer: 'canvas' schneller als svg; Nachteil: kein ARIA möglich; kein CSS-Targeting; Performance-Budget: Lottie-Animationen über 200 KB auf mobile Low-End-Devices (CPU under 1GHz; unter 1 GB RAM) können zu Ruckeln führen; immer auf echten Low-End-Devices testen; Android Go und ältere iOS-Devices als Test-Baseline; willChange: transform auf Lottie-Container-Element kann Compositing-Layer aktivieren und Rendering beschleunigen

Praxistipp: Wenn Sie Lottie-Animationen einsetzen: laden Sie die JSON-Datei erst wenn das Element im sichtbaren Bereich des Viewports ist (Intersection Observer); das verhindert unnötige Netzwerk-Anfragen und CPU-Auslastung für Animationen die der Nutzer vielleicht nie sieht. Zweitens: testen Sie jede Lottie-Animation mit prefers-reduced-motion: reduce – hinterlegen Sie immer ein statisches Fallback-Bild als img-Element das angezeigt wird wenn die Animation deaktiviert ist. Diese zwei Maßnahmen machen Lottie-Einsatz sowohl performance-freundlich als auch WCAG-konform.