Lottie: Motion Graphics für Web und App

Lottie ist ein offenes JSON-basiertes Animationsformat, das After-Effects-Animationen als skalierbare, leichtgewichtige Vektordaten für Web und mobile Apps exportiert und abspielt.

Rubrik: Animation & VFX · Unterrubrik: Motion Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Lottie Animation, Bodymovin, JSON Animation

Was ist Lottie?

Lottie wurde 2017 von Airbnb entwickelt und als Open-Source-Projekt veröffentlicht (Airbnb Design Team, 2017). Das Format löste ein fundamentales Problem der UI-Animation: Bis dahin waren animierte Grafiken für Web und Apps entweder GIFs (geringe Qualität, hohe Dateigröße) oder proprietäre Implementierungen.

Lottie exportiert After-Effects-Animationen über das Bodymovin-Plugin als JSON-Datei. Diese JSON-Datei enthält alle Animations-Keyframes, Formpfade und Eigenschaften als strukturierte Daten. In Web-Apps oder Mobile-Apps wird diese JSON-Datei von der Lottie-Bibliothek (JavaScript für Web; native Bibliotheken für iOS/Android) gelesen und in Echtzeit als skalierbare Vektorgrafik gerendert.

Erklärung

Wie Lottie funktioniert

Schritt 1 – Design in After Effects: Animationen werden wie gewohnt in After Effects erstellt. Wichtig: Nur unterstützte Features nutzen (Formebenen, Textebenen, Masken – keine Pixel-Effekte oder 3D-Operationen).

Schritt 2 – Export mit Bodymovin: Das kostenlose Plugin Bodymovin (auch AE-Script genannt) liest die AE-Komposition und schreibt alle Eigenschaften als JSON. Optionen: Kompression, Ressourcen-Einbettung, Vorschau.

Schritt 3 – Integration: Die JSON-Datei wird in die Zielanwendung eingebunden:

• Web: <script src="lottie.min.js"> + lottie.loadAnimation({...})
• iOS: Lottie-iOS (Swift/Objective-C)
• Android: Lottie-Android (Java/Kotlin)
• React Native: Lottie-React-Native
• Flutter: Lottie-Flutter

Schritt 4 – Steuerung: Die Lottie-API ermöglicht Playback-Kontrolle: play, pause, stop, set speed, seek to frame. Animationen können auf Nutzerinteraktionen reagieren.

Vorteile gegenüber alternativen Formaten

Einschränkungen

Nicht alle After-Effects-Features werden von Bodymovin unterstützt:

• Unterstützt: Shape Layers, Text Layers, Masken, Solid Layers, Expressions (teilweise)
• Nicht unterstützt: Pixel-Effekte (Glow, Blur über eigene Effekte), 3D-Layer-Transformationen, Rasterbilder (nur eingebettet/Base64), Camera Layers, Lights

Für sehr komplexe Animationen muss die Komposition vereinfacht oder auf Rive gewechselt werden.

Beispiele

Onboarding-Screens: Apps wie Duolingo, Airbnb und Google nutzen Lottie-Animationen für Onboarding-Sequenzen, die Funktionen der App erklären. Leichtgewichtig, nahtlos auf allen Bildschirmgrößen.

Ladeanimationen: Animierte Lade-Spinner und Progress-Indikatoren sind klassische Lottie-Anwendungen. Die kleine Dateigröße macht sie zur ersten Wahl für Lade-Feedback.

Interaktive Icons: Toggle-Buttons, Like-Animationen (ähnlich dem Twitter-Heart) und Navigation-Icons können als Lottie-Animationen implementiert werden und reagieren auf Klick-Events.

Error- und Empty-States: Freundliche Illustrationen, die animiert erscheinen, wenn keine Daten vorhanden sind oder ein Fehler aufgetreten ist.

In der Praxis

Workflow im Detail

1. AE-Komposition optimieren: Alle Elemente als Shape Layers; keine Pixeleffekte; Text als Vektoren umwandeln (wenn nötig).
2. Bodymovin installieren: Als AE Extension über Adobe Exchange oder direkt von GitHub.
3. Export konfigurieren: Ziel-Pfad, Glatter Export (Smooth), Assets einbetten oder extern.
4. Vorschau prüfen: LottieFiles.com Online-Viewer oder lokalen HTML-Preview nutzen.
5. JSON übergeben: An Entwickler oder direkt ins Projekt integrieren.
6. API-Kontrolle: Playback-Parameter in der Implementierung festlegen.

LottieFiles Plattform

LottieFiles (lottiefiles.com) ist eine Community-Plattform für Lottie-Animationen:

• Freie und kostenpflichtige Animationen
• Online-Editor für einfache Anpassungen (Farbe, Geschwindigkeit)
• Optimierungs-Tool zur Dateigröß-Reduktion
• Direkte Integration in Figma, Adobe XD und Webflow

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Warum sieht meine Lottie-Animation im Browser anders aus als in After Effects? Unsupported Features werden in Bodymovin ignoriert oder approximiert. Häufige Ursachen: Pixel-Blur-Effekte, Merge-Paths auf komplexen Shapes, 3D-Transformationen.

Wie groß ist eine typische Lottie-Datei? Einfache Animationen (30 Sek., wenige Ebenen): 20–100 KB. Komplexe Animationen: bis 500 KB. Zum Vergleich: Ein äquivalentes GIF kann 5–50 MB groß sein.

Ist Lottie für alle Plattformen geeignet? Lottie-Bibliotheken gibt es für Web (JS), iOS, Android, React Native, Flutter und Windows. Es fehlt eine native WatchOS-Library.

Was ist der Unterschied zwischen Bodymovin und Lottie? Bodymovin ist das After-Effects-Plugin, das JSON-Dateien erstellt. Lottie ist die Bibliothek, die diese JSON-Dateien abspielt. Beide stammen ursprünglich aus demselben Open-Source-Projekt.

Verwandte Einträge

• Tools im Motion Design: AE, C4D, Blender, Cavalry – Tools für die Lottie-Produktion
• Loop-Animationen: Techniken für endlose Loops – Loop-Animationen als Lottie exportieren
• Motion-Design-Workflow: Von der Idee zur Ausgabe – Integration von Lottie in den Delivery-Workflow
• Animationen in Webflow und Web ohne Code – Lottie in Webflow integrieren
• Expressions in After Effects für Motion Design – Expressions und Lottie-Kompatibilität

Weiterführend

• Airbnb Design (2017). Introducing Lottie. airbnb.design/lottie.
• LottieFiles (2024). Lottie Documentation. docs.lottiefiles.com.
• Online: Bodymovin GitHub (github.com/bodymovin/bodymovin-extension)
• Online: LottieFiles Community (lottiefiles.com)
• Online: Rive (rive.app) – Alternative für interaktivere Animationen