Wer schon mal versucht hat, eine Animation sauber in eine Website oder App zu integrieren, weiss: Das kann schnell kompliziert, schwerfällig oder pixelig werden. Genau hier kommt Lottie ins Spiel: ein Open-Source-Framework, das Animationen als leichtgewichtige Vektorgrafiken darstellt und sie reibungslos auf unterschiedlichsten Plattformen laufen lässt.
Entwickelt wurde Lottie ursprünglich bei Airbnb, und es hat seitdem die Herzen vieler Designer:innen und Entwickler:innen erobert.
Statt GIFs oder Videos kommt Lottie mit schlanken JSON-Dateien aus, die mithilfe des Plugins Bodymovin aus Adobe-After-Effects-Animationen exportiert werden. Das Ergebnis: Animationen, die scharf, skalierbar, interaktiv steuerbar und blitzschnell geladen sind.
Das Wichtigste in Kürze
Wann setzte ich ein Lottie ein?
Lottie ermöglicht schlanke, skalierbare Vektoranimationen auf allen Plattformen. Ideal für einfache bis mittlere Animationen, wenn Performance und Kompatibilität stimmen.
So entsteht eine Lottie-Animation
Die Animation wird in Adobe After Effects erstellt und mit Bodymovin- oder dem LottieFiles-Plugin als JSON-Datei exportiert. Wichtig ist die Verwendung kompatibler, vektorbasierten Elemente.
Einbindung der JSON-Datei
Die fertige JSON-Datei lässt sich flexibel in deine Cmsbox-Website integrieren. Egal ob als Logo, Designelement oder interaktive Animation, passend zum gewünschten Nutzerverhalten.
Was Lottie so besonders macht
Lottie basiert auf Vektoranimationen. Das heisst: Egal wie gross oder klein dein Screen ist, die Animation bleibt immer gestochen scharf. Die JSON-Dateien sind im Vergleich zu Videos oder GIFs winzig, was die Ladezeiten enorm verbessert. Weil die Animationen ausserdem direkt in After Effects gebaut werden, lassen sie sich super flexibel gestalten, solange man sich an die Lottie-kompatiblen Features hält.
Das Beste daran: Lottie läuft plattformübergreifend. Egal, ob du eine Website mit lottie-web animieren willst oder eine App auf iOS, Android oder React Native – Lottie funktioniert zuverlässig.
Typische Einsatzgebiete?
Ladeanimationen, Erfolgsmeldungen, erklärende Illustrationen oder einfach liebevolle Mikroanimationen, die Nutzer:innen begeistern.
Wann lohnt sich der Einsatz von Lottie-Files?
Lottie ist perfekt für dich, wenn du …
schlanke, skalierbare Vektoranimationen brauchst.
einfache bis mittlere Animationen erstellen willst.
(oder jemand im Team), mit Adobe After Effects umgehen kann.
Weniger geeignet ist Lottie, wenn du …
extrem komplexe After-Effects-Funktionen nutzen willst (z. B. bestimmte Effekte oder Expressions).
auf maximale Performance oder Barrierefreiheit angewiesen bist.
stark SEO-orientierte Inhalte animieren willst.
So entsteht deine Lottie-Animation
1. Design vorbereiten
Der Startpunkt ist meist ein Logo oder eine Illustration, idealerweise als .ai oder .svg. Wichtig: Alles sollte in Pfade umgewandelt sein. Keine Textebenen, keine Gruppierungen – reine Vektoren.
Tipp:
In Illustrator sämtliche Gruppierungen aufheben, Schrift in Pfade umwandeln und das Aussehen reduzieren. Anschliessend kannst du die Datei als .ai speichern.
2. In After Effects importieren
Jetzt wird animiert! In After Effects importierst du die Datei als Komposition mit Ebenengrössen. Danach wandelst du jede Illustrator-Ebene in eine Formebene um. Nur so ist sie später 100 % Lottie-kompatibel.
3. Animation erstellen
Nun beginnt der kreative Teil: Bewegung, Skalierung, Trim Paths, Opazität – vieles ist möglich. Achte jedoch darauf, nur Lottie-kompatible Features zu verwenden. Das heisst z. B. kein Blur, keine Effekte, keine 3D-Ebenen.
4. Plugins installieren
Damit du Animationen aus After Effects als Lottie-Dateien exportieren und vorab in After Effects auch gleich testen kannst, benötigst du zwei Plugins:
Bodymovin (für den Export): aescripts.com/bodymovin
LottieFiles Plugin (für Vorschau & Upload): lottiefiles.com/plugins/after-effects
Technisch gesehen brauchst du für den eigentlichen Export nur Bodymovin. Das LottieFiles Plugin ergänzt Bodymovin aber sehr praktisch mit Vorschau-Funktionen, Asset-Verwaltung und einem direkten Upload auf lottiefiles.com.
Beide findest du nach der Installation in After Effects unter:
Fenster > Erweiterungen > Bodymovin / LottieFiles
5. Vorschau und Export
Mit dem LottieFiles-Plugin kannst du direkt in After Effects eine Live-Vorschau anzeigen und prüfen, ob deine Animation kompatibel ist. Warnungen (z. B. zu nicht unterstützten Ebenen) helfen dir bei der Optimierung. Exportiere dann die Animation als .json-Datei. Fertig ist das Lottie!
Einbindung der Datei
Deine JSON-Datei ist nun fertig.
Wie geht's weiter?
Sobald du deine fertige JSON-Datei hast, brauchst du uns nur Bescheid geben, wir kümmern uns um die Einbindung. Lottie-Animationen können auf deiner Website flexibel platziert werden, z. B.:
Im Header, als animiertes Logo.
Im Footer, als verspieltes Detail.
Mitten im Content, per Code-Element.
Oder als animiertes Designelement auf einem Mood-Bereich.
Wichtig:
Sag uns auch, wie deine Animation reagieren soll, also durch welche Interaktion sie abgespielt wird.
Mögliche Animationstrigger
Je nach Anwendungsfall gibt es verschiedene Interaktionsmöglichkeiten:
Einfach:
automatisch abspielen
in Dauerschleife (Loop)
als Standardanimation beim Seitenladen
Erweitert:
Intro-Animation beim Laden, danach ausgeblendet
Animation startet erst beim Scrollen in den Sichtbereich
Hover-Effekt am Desktop, Autoplay auf Mobile
Scrollbasierte Steuerung (Animation reagiert auf Scrollrichtung)
Hast du noch offene Fragen?
Wir arbeiten mit Hochdruck an einer Lösung zur Behebung der Probleme.
