Lottie Animation

Was ist eine Lottie Animation?

Eine Lottie Animation ist eine Vektoranimation, die als kleine Datei ausgeliefert und direkt im Browser oder in der App abgespielt wird. Entwickelt wurde das Format 2015 bei Airbnb. Heute ist es ein offener Standard, der auf Web, iOS, Android und weiteren Plattformen läuft.

Der Clou: Ein GIF speichert Bild für Bild. Eine Lottie-Datei beschreibt stattdessen Formen, Farben und Bewegungen. Der Player rechnet daraus die Animation. Deshalb bleibt sie auf jedem Display scharf und die Datei klein.

Lottie, dotLottie und JSON: Was ist der Unterschied?

Aktuell begegnen dir zwei Dateiendungen:

• .json: Das ursprüngliche Lottie-Format. Überall unterstützt, aber unkomprimiert.
• .lottie (dotLottie): Ein komprimierter Container, der eine oder mehrere Animationen bündelt. Er ist bis zu 90 Prozent kleiner als die JSON-Version und kann zusätzlich Bilder, Themes (zum Beispiel Farben tauschen) und State Machines (interaktive Logik) enthalten.

Webflow unterstützt dotLottie seit März 2023. Meine Faustregel: Wenn dein Tool .lottie exportieren kann, nimm .lottie.

Vorteile gegenüber GIF und Video

• Kleine Dateien: Lotties sind meist deutlich leichter als GIFs oder Videos. Das schont die Ladezeit.
• Immer scharf: Als Vektor skalieren sie ohne Qualitätsverlust, auch auf Retina-Displays.
• Transparenter Hintergrund: Die Animation liegt direkt auf deinem Design, ohne weiße Kanten oder Kästchen.
• Steuerbar: Du entscheidest, ob sie in Schleife läuft, bei Hover startet oder beim Scrollen abgespielt wird.
• Anpassbar: Mit dotLottie lassen sich Farben über Themes tauschen, ohne die Animation neu zu bauen.

Wie entsteht eine Lottie Animation?

Klassisch entsteht sie in Adobe After Effects und wird mit einem Plugin wie Bodymovin exportiert. Alternativ gibt es den Lottie Creator von LottieFiles, der direkt im Browser läuft und Ende 2025 deutlich überarbeitet wurde, unter anderem mit State Machines, Theming und Data Binding.

Wichtig ist, schon beim Gestalten an Lottie zu denken: nur Vektorformen, keine eingebetteten Fotos, möglichst wenige Ebenen. Was später schlank laufen soll, muss schlank gebaut werden.

Lottie in Webflow einsetzen

Webflow bringt ein eigenes Lottie-Element mit. Du lädst die Animation als JSON oder dotLottie in die Assets hoch, fügst sie auf der Seite ein und legst fest, ob sie in Schleife läuft und wann sie startet. Über Interactions steuerst du sie zusätzlich per Hover, Klick, Scroll oder beim Eintritt ins Sichtfeld.

Wie das sauber und performant umgesetzt wird, zeige ich dir auf meiner Webflow Expert Seite.

Beispiel aus der Praxis: Aviation Hero

Wie individuelle Lottie Animationen wirken, zeige ich am liebsten am Projekt Aviation Hero. Deutschlands erste volldigitale Flugschule hatte bereits eine Maskottchen-Figur, den Aviation Hero. Beim Relaunch habe ich ihn weiterentwickelt und die Illustrationen als Lottie Animationen in Webflow umgesetzt.

Der Hero taucht in unterschiedlichen Situationen auf und begleitet Besucher:innen durch die Website. Leichtgewichtig, lebendig und passend zu einer Lernplattform, bei der Gamification zum Produkt gehört.

Entscheidend war nicht möglichst viel Bewegung, sondern die richtige. Die Animationen unterstützen Inhalte und Nutzerführung, statt davon abzulenken.

Schau dir das Ergebnis an: Projekt Aviation Hero.

Fünf Tipps für Lotties, die wirken

1. Bewegung braucht einen Zweck. Führt sie den Blick, erklärt sie etwas oder belohnt sie eine Aktion? Wenn nicht, lass sie weg.
2. Individuell statt Stock. Fertige Animationen aus Bibliotheken sind ein guter Start, sehen aber nach Bibliothek aus. Eine Animation in den Farben, Formen und der Bewegungssprache deiner Marke bleibt hängen.
3. Klein halten. Nur Vektoren, wenige Ebenen, keine eingebetteten Fotos. Lieber mehrere kleine Animationen als eine riesige.
4. Inhalte nicht in die Animation packen. Wichtige Aussagen gehören als echter Text auf die Seite. Suchmaschinen und Screenreader lesen keine Animationen. Und im ersten sichtbaren Bereich gilt: sparsam einsetzen, damit die Ladezeit nicht leidet.
5. Bewegung abschaltbar denken. Manche Menschen aktivieren in ihrem System die Einstellung für reduzierte Bewegung. Respektiere das, und blende rein dekorative Animationen für Screenreader aus.

Wo Lottie an Grenzen stößt

Lottie ist ideal für Illustrationen, Icons und UI-Animationen. Für Fotos, Filmmaterial oder sehr aufwendige Effekte ist ein Video die bessere Wahl. Auch nicht jede Funktion aus After Effects wird unterstützt, manche Effekte und Expressions funktionieren nur eingeschränkt oder gar nicht. Für stark interaktive Animationen mit viel Logik lohnt sich außerdem ein Blick auf Alternativen wie Rive.

Häufige Fragen zu Lottie Animationen

Sind Lottie Animationen kostenlos?

Das Format ist offen und die Player sind kostenlos. Der eigentliche Aufwand liegt im Gestalten und Animieren, vor allem, wenn die Animation individuell zu deiner Marke passen soll.

Machen Lotties meine Website langsam?

Gut gebaut meist nicht, sie sind in der Regel deutlich leichter als GIFs oder Videos. Schwer werden sie durch eingebettete Bilder, zu viele Ebenen oder zu viele gleichzeitig laufende Animationen.

JSON oder dotLottie?

Wenn du die Wahl hast, dotLottie. Die Dateien sind kleiner und können Themes und interaktive Logik enthalten. Webflow unterstützt das Format seit 2023.

Kann ich eine fertige Lottie nachträglich anpassen?

Ja, zum Beispiel Farben und Geschwindigkeit. Größere Änderungen an Form und Bewegung gehen am besten in der Quelldatei oder im Lottie Creator.

Wann ist ein GIF oder Video die bessere Wahl?

Bei Fotos, Filmmaterial und sehr komplexen Effekten. Für Illustrationen, Icons und UI-Bewegung ist Lottie fast immer die bessere Lösung.

Mein Fazit

Eine gute Animation merkst du nicht als Animation. Du merkst nur, dass sich eine Seite lebendig anfühlt. Genau darum geht es mir: Bewegung, die etwas erzählt und Lorbeeren verdient, statt nur zu blinken.

Du willst individuelle Lottie Animationen für deine Marke? Erzähl mir von deinem Projekt.