Lottie und das Bodymovin-Plugin für After Effects ermöglichen den Export von After-Effects-Animationen als JSON-Dateien, die als hochperformante, skalierbare und interaktive Animationen in Websites, iOS- und Android-Apps abgespielt werden können.
Rubrik: Software & Tools Deep-Dive · Unterrubrik: After Effects · Niveau: Einsteiger Synonyme / Auch bekannt als: Lottie-Format, Lottie JSON, Bodymovin-Export, AE-Web-Export, LottieFiles
Was ist Lottie & Bodymovin?
Lottie ist ein Open-Source-Animationsformat, das von Airbnb entwickelt wurde, um After-Effects-Animationen direkt auf digitalen Plattformen abzuspielen – ohne Videoencoding, ohne große Dateigrößen. Das Bodymovin-Plugin (als kostenfreies AE-Plugin verfügbar) übersetzt After-Effects-Layer, Keyframes und Shapes in eine JSON-Textdatei, die von Lottie-Libraries (für Web, iOS, Android, React Native) gelesen und in Echtzeit gerendert werden kann.
Erklärung
Warum Lottie statt Video?
Video-Exporte (MP4, WebM) für Animationen haben Nachteile: feste Auflösung, große Dateien, kein Einfluss der App auf Animation, keine Interaktivität. Lottie-JSON-Dateien sind:
- Skalierbar: Vektorbasiert – keine Qualitätsverluste bei beliebiger Größe
- Leichtgewichtig: Typische Dateigrößen zwischen 5–200 KB (vs. MB für Videos)
- Interaktiv: Entwickler können Abspielgeschwindigkeit, Startpunkt und Looping programmatisch steuern
- Plattformübergreifend: Eine JSON-Datei, eine Lottie-Library, alle Plattformen
Bodymovin-Plugin installieren:
- ZXP-Installer (Aescript-Installer oder Adobe Extension Manager) für After Effects installieren
- Bodymovin.zxp von lottiefiles.com/plugins oder aescripts.com herunterladen
- Per Installer in After Effects installieren
- In AE: Window → Extensions → Bodymovin öffnet das Plugin-Panel
Workflow – AE-Animation für Lottie vorbereiten:
Nicht alle After-Effects-Features werden von Bodymovin/Lottie unterstützt. Folgende Features sind kompatibel:
- Shape Layers (vollständig unterstützt)
- Text-Layer (teilweise – nur einfache Animationen)
- Keyframe-Animationen auf Transform-Eigenschaften
- Einfache Expressions (wiggle, loopOut in Grenzen)
- Masken (Alpha-Matte)
- Merge Paths, Trim Paths, Repeater
Nicht unterstützt oder problematisch:
- 3D-Layer und Kameras
- Komplexe Effekte (Blur, Glow, Particle)
- Footage-Layer (Bitmaps werden als Base64 eingebettet – schlechte Praxis)
- Camera Blur, Tiefenschärfe
- Manche Expressions-Funktionen
Animationen für Lottie optimieren:
- Nur Shape Layers und Text verwenden
- Keine Effekte, die in Lottie nicht unterstützt werden
- Precomps vereinfachen oder flach legen
- Trim Paths, Wiggle Path und Repeater nutzen (werden unterstützt)
- Ressource: LottieFiles-Previewer prüft vor Export die Kompatibilität
Bodymovin-Export:
- Bodymovin-Panel öffnen (Window → Extensions → Bodymovin)
- Komposition aus der Liste auswählen
- Ausgabepfad festlegen
- Optional: „Assets" und „Glyphs" einbetten
- „Render" klicken → JSON-Datei wird exportiert
Vorschau und Test: Exportierte JSON-Datei auf lottiefiles.com (Drag & Drop) hochladen und direkt im Browser als Preview anschauen. LottieFiles bietet auch einen Lottie-Player, Community-Bibliothek und Hosting.
Integration in Websites: ``html <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> <lottie-player src="animation.json" background="transparent" speed="1" loop autoplay></lottie-player> ``
Integration in React: ``jsx import Lottie from 'lottie-react'; import animationData from './animation.json'; <Lottie animationData={animationData} loop={true} /> ``
LottieFiles-Plattform: LottieFiles.com ist die zentrale Community-Plattform für Lottie-Animationen. Millionen freie und kommerzielle Animations sind verfügbar. Eigene Animationen können dort hochgeladen, geteilt und direkt in Websites oder Apps eingebettet werden.
Beispiele
- App-Onboarding-Animation: Mehrstufige Illustration als Lottie-Loop – kein Video nötig, smooth auf jedem Smartphone-Display skaliert.
- Loading-Indikator: Animierter Kreis oder Brandingfarben-Loader als Lottie – 12 KB vs. 400 KB für dasselbe als GIF.
- E-Mail-Marketing-Animation: Lottie in modernen E-Mail-Clients (z. B. Apple Mail) direkt einbettbar – lebendige animierte Grafiken in Mailings.
- Website-Hero-Animation: Interaktive Lottie-Animation, die beim Scrollen abgespielt wird (Scroll-triggered Lottie) – kein Video-Embedding notwendig.
- UI-Micro-Interaction: Button-Feedback-Animation (z. B. Häkchen nach Formular-Absenden) als 0,5-Sekunden-Lottie – winzig in der Dateigröße, professionell in der Wirkung.
In der Praxis
Schnell-Test: Lottie-kompatible Komposition erstellen:
- Neue AE-Komposition: 500×500 px, 30 fps, 3 Sekunden
- Nur Shape Layers verwenden
- Einfache Keyframe-Animation (Rotation, Scale, Opacity)
- Bodymovin: Komposition rendern → JSON-Datei
- LottieFiles.com: Drag & Drop der JSON-Datei → Sofortige Vorschau
Dateigrößen-Optimierung:
- Bodymovin → Settings → „Optimize Animation" aktivieren
- Unnötige Keyframes reduzieren (weniger = kleinere JSON)
- Kein Footage embedded (Bitmaps explodieren die Dateigröße)
Lottie-Interaktivität: Über die Lottie-Interactivity-Library lassen sich Animationen auf Scroll, Hover oder Cursor-Bewegungen reagieren lassen – ohne Videoformat-Grenzen.
Vergleich & Abgrenzung
GIF ist veraltet: begrenzte Farbtiefe, keine Transparenz, schlechte Qualität, hohe Dateigrößen. WebM/MP4 bieten bessere Videoqualität, sind aber nicht interaktiv und nicht verlustfrei skalierbar. SVG-Animationen (via GSAP oder CSS) sind ein ähnlicher Web-Ansatz, aber ohne den direkten After-Effects-Export-Workflow. Rive.app ist eine neuere Lottie-Alternative mit mehr Interaktivitätsmöglichkeiten, aber eigenem Editor statt After-Effects-Integration.
Häufige Fragen (FAQ)
Warum sieht meine Lottie-Animation im Browser anders aus als in After Effects? Unsupported Features sind der häufigste Grund: Effekte wie Glow, Blur oder Blending Modes, die Bodymovin nicht exportieren kann, werden im Browser ignoriert oder anders dargestellt. Lösung: Im AE-Projekt alle Effekte durch Shape-Layer-Alternativen ersetzen, LottieFiles-Previewer vor dem Liefern nutzen und die offizielle Bodymovin-Kompatibilitätsliste prüfen.
Kann Lottie auch mit Expressions umgehen? Lottie unterstützt einen begrenzten Satz von After-Effects-Expressions. Einfache Expressions wie loopOut("cycle"), wiggle() und time-basierte Berechnungen werden teilweise unterstützt. Komplexe Expressions (Conditionals, externe Layer-Referenzen) werden nicht exportiert. Empfehlung: Für Lottie-Exports Expressions in Keyframes umwandeln (Animation → Keyframe Assistant → Convert Expression to Keyframes).
Verwandte Einträge
Weiterführend
- LottieFiles Dokumentation – lottiefiles.com/documentation
- Bodymovin GitHub – github.com/airbnb/lottie-web
- School of Motion – Blog „After Effects to Lottie: Complete Guide"
- Adobe After Effects Hilfe – helpx.adobe.com/after-effects
