Lottie ist ein offenes Format für animierte Vektorgrafiken

 (lottie.github.io)
2 Punkte von GN⁺ 2025-05-26 | 1 Kommentare | Auf WhatsApp teilen
  • Lottie ist ein offenes Dateiformat für animierte Vektorgrafiken, mit dem sich in Adobe After Effects erstellte Animationen einfach im Web und auf Mobilgeräten abspielen lassen
  • Animationen werden im JSON-Format gespeichert und enthalten alle Animationselemente wie Keyframes, Easing-Kurven und Ebeneninformationen
  • Das Format ist ein offener Standard mit Erweiterbarkeit, Auflösungsunabhängigkeit und verschiedenen Renderer-Implementierungen und wird von zahlreichen Unternehmen zur Verbesserung der User Experience eingesetzt
  • Die Lottie Animation Community (LAC) ist ein gemeinnütziges Open-Source-Projekt unter dem Dach der Linux Foundation und verfolgt das Ziel, dieses Format zu einem Industriestandard weiterzuentwickeln
  • Spezifikation, Validierungstools, Implementierungen und Roadmap werden von der Community entwickelt und veröffentlicht; das Projekt wird in einer transparenten und kollaborativen Struktur betrieben, an der sich jede:r beteiligen kann

Was ist Lottie?

Überblick

  • Lottie ist ein 2015 von Hernan Torrisi entwickeltes Open-Source-Format für Vektoranimationen
  • In After Effects erstellte Animationen können als Lottie-JSON-Dateien exportiert und auf verschiedenen Plattformen abgespielt werden
  • Heute ist es ein weit verbreitetes Standardformat für viele Plattformen wie Web, Mobile und TV

Merkmale

  • Basiert auf Vektorgrafiken
    • Besteht nicht aus Pixeln, sondern aus geometrischen Formen wie Linien und Kurven, wodurch unabhängig von der Auflösung eine scharfe Darstellung möglich ist
  • Tweening
    • Veränderungen zwischen vom Animator definierten Keyframes werden automatisch interpoliert
    • So lassen sich flüssige Animationen erzeugen, ohne komplexe Bewegungen manuell erstellen zu müssen
  • JSON-basiertes Format
    • Durch die Darstellung in JSON ist es leicht im Web zu übertragen und einfach mit vorhandenen Tools zu bearbeiten oder zu automatisieren
    • Als offener Standard kann jede:r Implementierungen erstellen; die Interoperabilität ist hoch
  • Reifes Ökosystem
    • Es gibt ein gut ausgebautes Ökosystem aus Playern, Assets, Authoring-Tools und Bibliotheken
    • Zahlreiche Unternehmen wie Airbnb und Google setzen es ein, und es wird von vielen Tools und Frameworks unterstützt

Lottie Animation Community (LAC)

  • Eine gemeinnützige Community unter dem Dach der Linux Foundation, die für die Standardisierung und Verbreitung von Lottie gegründet wurde
  • Ziel ist es, das Lottie-Dateiformat als plattformübergreifenden Animationsstandard zu etablieren
  • Das Projekt steht unter der Governance der Joint Development Foundation und verfolgt einen offenen, kollaborativen Ansatz
  • Mit klarer Spezifikationsdokumentation, Validierungstools (Validator), einer Liste von Implementierungen und einer Roadmap wird die Grundlage für das Ökosystem bereitgestellt
  • Die Struktur ermöglicht es allen, sich zu beteiligen und beizutragen, und betont Transparenz sowie eine von der Community getragene Weiterentwicklung

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-05-26
Hacker-News-Kommentare

  • Jedes Mal, wenn ich Lottie benutze, bleibt bei mir ein unbefriedigendes Gefühl zurück, weil die Idee zwar wirklich großartig ist und es attraktiv klingt, Animationen direkt aus den Tools zu exportieren, die Animator:innen ohnehin schon nutzen, die Art der Umsetzung aber zu enttäuschend ist. In diesem Bereich wäre ein deutlich kompakteres Binärformat viel passender, stattdessen werden Mengen numerischer Daten unbedingt als JSON gespeichert. Außerdem kann JSON auf externe Dateien verweisen, sodass man am Ende entweder mehrere Dateien in einem Ordner hat, Dateien per base64 in das JSON inline einbettet oder alles als eine komprimierte Datei ausliefert. Lädt man das im Web, muss man ein riesiges SDK nachladen, und diese Animationen laden entweder mehrere Dateien separat oder verarbeiten eine einzige Datei mehrfach mit verschiedenen Parsern (JSON, base64, png, lottie, zip usw.). Wenn man .lottie-Dateien verwendet, muss man sogar noch einen Zip-Dekompressor ins JS-Bundle packen, und der separate .lottie-Player enthält ein 2-MB-Wasm-Blob, wobei ich nicht wirklich verstehe, warum. In unserer App hat uns das beim Verkleinern der App-Größe massiv zu schaffen gemacht, und zum Glück war es nicht im kritischen Pfad, deshalb belasse ich es dabei. Es war viel Herumprobieren nötig: Animationen optimieren, Pfad- und Inline-Probleme manuell beheben, Bugs behandeln, bei denen Vektoren zu png wurden usw. Dazu kommt, dass Browser es nicht gut verkraften, mehrere Animationen gleichzeitig abzuspielen, besonders auf schwächeren Geräten, und die Effizienz der Animationsverarbeitung in JS und DOM war schlechter als erwartet. Wenn ich für ein Wochenendprojekt Zeit finde, würde ich das gern mal in optimierte SVG-Sprites umwandeln und per CSS-Transition abspielen, um zu sehen, ob das besser funktioniert

    • Stimme voll zu, und der Workflow vom Export aus After Effects nach Lottie war besonders furchtbar. Viele Layer und Stile funktionieren beim Export nicht richtig, sodass man Motion-Designer:innen einzeln erklären musste, welche Funktionen sie benutzen dürfen und welche nicht, und Designer mögen das natürlich nicht. Ehrlich gesagt war es oft viel leichter und mit weniger Aufwand verbunden, einfach als Video zu rendern und es passend zur Interaktion abzuspielen. Ich habe auch schon von Rive gehört, und dort scheint man sich darauf zu konzentrieren, genau die Probleme von Lottie zu beheben. Ich habe es allerdings noch nicht selbst benutzt, daher kann das Ergebnis je nach Fall unterschiedlich sein

    • In einem früheren Unternehmen war unser Web-App-Bundle 8 MB groß, komprimiert etwa 2 MB, und am Ende stellte sich heraus, dass der Großteil davon auf die Lottie-Bibliothek (2 MB) und gerade einmal vier Animationen entfiel. Zwei dieser Animationen haben wir entfernt, und den Rest zusammen mit Lottie per Lazy Loading geladen. Trotzdem konnte ich Designer oder andere Entwickler nicht davon überzeugen, wie groß das Problem eines 8-MB-Bundles ist, daher fühlt es sich so an, als hätte ich diesen Kampf am Ende verloren

    • Ich stimme dem Punkt zu, dass Browser nicht gut damit klarkommen, mehrere Lottie-Animationen gleichzeitig abzuspielen. Schon Anfang der 2000er waren viele Webseiten mit animierten Flash-Werbungen vollgepflastert; es gab zwar Performance-Probleme, aber selbst die damaligen Single-Core-CPUs konnten das ausreichend gut bewältigen

    • Andererseits wird das JSON-Format durch Kompression sehr klein und ist auch recht effizient in eine JavaScript-VM zu laden

    • Als ich Lottie verwendet habe, bestand die Wahl zwischen mp4 und Lottie. Im Vergleich zu mp4 war Lottie deutlich kleiner

  • Mir gefällt die Idee, Animationen in einem offenen gemeinsamen Format zu verwalten. Gleichzeitig finde ich es schade, dass Webentwickler in der Praxis zu leichtfertig zu Lottie greifen, statt sich stärker mit CSS- oder SVG-Animationen zu beschäftigen, die viel kleiner und leichter anzupassen sind. Schon allein Lottie-Bibliotheken oder Wrapper schlagen mit mehreren hundert KB zu Buche, dazu kommt zusätzlicher Platzbedarf pro Animation. Auf der Hauptseite von Lottie rühmt man sich mit kleinen Dateien, vergleicht aber nur mit GIF oder PNG und nicht mit SVG/CSS-Animationen, was mir ebenfalls nicht gefällt. Für native Mobile-Apps scheint es allerdings ziemlich gut zu passen

    • Der eigentliche Kern von Lottie liegt nicht in simplen Animationen wie CSS-Transitions, sondern in deutlich komplexeren und freieren Animationen, eher wie kleine Cartoons. Das sieht man gut an den animierten Stickern im Telegram Messenger, die mit Lottie erstellt wurden, zum Beispiel: https://tlgrm.eu/stickers/Princess

    • Nach meiner Erfahrung spielt Lottie seine größte Stärke als Zielformat aus Design-Authoring-Tools aus, besonders aus After Effects. Genau dieser Punkt wird auch im verlinkten Artikel als ursprünglicher Vorteil von Lottie und des Dateiformats genannt. Niemand schreibt so etwas von Hand. Ich bin Mobile-App-Entwickler und habe mit Lottie-Animationen gearbeitet, aber sie nie selbst erstellt

    • Zum Punkt „Man sollte mehr CSS- oder SVG-Animationen lernen“ würde ich ergänzen: Flash war im Web 1.0 das Beste überhaupt. CSS und andere Standards kommen bis heute nicht wirklich an das heran, was Flash damals geboten hat. Flash war Videoformat, Animationsformat, Programmierumgebung, Videoplayer, interaktives UI-System, Game Engine, MMO-Entwicklungsengine, Infografik-Tool und noch vieles mehr in einem. Hätte Adobe Format und Player geöffnet, hätte es vielleicht bis heute überlebt. Wir müssen mit der fixen Idee brechen, dass CSS/SVG/HTML/JS der einzige Weg sind, und wenn man sieht, dass wir nach 40 Jahren immer noch mit ähnlichen Problemen kämpfen, braucht es vielleicht neue Versuche, das Rad neu zu erfinden

    • Sollte es nicht auch möglich sein, Lottie-Animationen nach SVG+JS zu kompilieren? Ich habe eher den Eindruck, dass es so ein Tool einfach noch nicht gibt

    • CSS-Animationen und auch die moderne Web Animations API können hardwarebeschleunigt werden, solche Bibliotheken wie Lottie dagegen nicht

  • Ich habe zwar nur minimale Erfahrung mit dem Einbetten und Implementieren von Lottie und Rive, aber Rive war insgesamt die deutlich bessere Erfahrung. Falls ich mich künftig zwischen Lottie und Rive entscheiden müsste, würde mich interessieren, ob ich bei Lottie etwas übersehen habe

    • Ich habe Rive noch nicht selbst benutzt, beobachte aber, wie es sich entwickelt. Interessant finde ich, dass der Entwickler von Lottie vor etwa zwei Jahren zum Rive-Team gewechselt ist. Wenn ich in diesem Bereich ein neues Tool bewerte, würde ich Rive auf jeden Fall in Betracht ziehen. In Projekten, an denen ich beteiligt war, war ich ziemlich entschieden gegen Lottie, weil sich die Dateigröße gemessen an den von den Designer:innen gewünschten Animationen kaum rechtfertigen ließ. SVGator habe ich ebenfalls schon erfolgreich eingesetzt. Mich frustriert auch, dass Lottie vielerorts übermäßig gehypt wird, besonders in Tools wie Webflow oder durch Branchen-Influencer, ohne dass die Dateigröße ernsthaft thematisiert wird. Es gibt sicher Einsatzzwecke, in die Lottie perfekt passt, aber für die meisten typischen Anwendungsfälle gibt es meiner Meinung nach bessere Alternativen

    • Ich hatte noch nie von Rive gehört, aber das wirkt wie eine spannende Entdeckung, die in meinem Projekt nützlich sein könnte. Für genau solche Infos kann ich HN nicht lassen

  • Unsere UI-Bibliothek im Unternehmen verwendet lottie-web für animated components wie Spinner und Fortschrittsbalken. Wenn man aber die Seite https://airbnb.io/lottie/#/community-showcase besucht, dreht der Lüfter meines Firmenlaptops völlig durch. Ich glaube, wenn das mit CSS gemacht wäre, hätte es diesen Effekt nicht

    • Das dort sind alles animierte GIFs

  • Das Konzept von Lottie ist wirklich großartig, aber in der Praxis ist es sehr schwer, damit zu arbeiten. Rive ist eine neue Plattform, die versucht, genau die problematischen Teile von Lottie zu lösen. Besonders dynamische Datenaktualisierung ist mit Lottie faktisch fast unmöglich. Wir haben trotzdem mit Lottie eine Animation mit dynamisch aktualisierten Daten für Tracker.GGs Valorant Backtrack umgesetzt, ein Format ähnlich wie Spotify Wrapped, Demo: https://tracker.gg/valorant/backtrack/episode6/00d0aa2d-94d3-49ff-823c-8123f2b62848/eyJtb2RlIjoiY29tcGV0aXRpdmUifQ==/0. Dafür haben wir direkt auf benannte Layer in den Quelldateien aus After Effects zugegriffen und jede Folie zu einer separaten Lottie-Datei gemacht, damit wir die fließenden Übergänge zwischen den Slides manuell umsetzen konnten. Lottie selbst unterstützt dynamischen Layer-Zugriff nicht nativ, daher haben wir mit einer zusätzlichen Bibliothek die Lottie-Instanz gesteuert und darüber eine eigene Daten-Kontrollschicht gebaut. Es waren zahllose iterative Schleifen zwischen Designer:innen und Engineers nötig, und es ist ein Format, das Zusammenarbeit eher erschwert. In manchen Fällen mussten wir sogar Tricks anwenden, bei denen Layer-Eigenschaften auf die tatsächlichen Standardwerte, etwa Farben, gezielt angesprochen wurden. Das Format ist wirklich schwer zu handhaben. Künftig würde ich gern Rive ausprobieren

  • Wir verwenden Lottie seit Jahren für Markenanimationen bei PBS KIDS. Im Vergleich zu anderen Formaten hat es verschiedene Vorteile, und bei viel Runtime-Rendering in einer flachen 2D-Ebene gibt es zwar Performance-Einbußen, aber es lässt sich ordentlich in mehrere Pipelines integrieren, etwa für Games, Apps und Video. Für relativ schwache Geräte oder Plattformen wie Roku liefern wir meist statische Bilder aus. Dank des Workflows mit After Effects kann eine einzelne Designerin eine Loop-Animation erstellen und daraus gleichzeitig Lottie/Bodymovin-JSON, Mov für Broadcast/YouTube und SVG für Low-End-Geräte exportieren. Seit dem Ende von Flash war das ein sehr gutes Übergangsformat. Inzwischen nutzen wir auch Rive und können bestehende JSON-Animationen in den neuen Workflow übernehmen. Ich habe mit wichtigen Leuten aus diesem Bereich zusammengearbeitet, etwa Mat Groves von Pixi oder Matt Karl von CloudKid, und in der Übergangszeit nach Flash haben alle unterschiedliche Ansätze, Plug-ins, Mathematik und Exportformate ausprobiert. Jede dieser Bemühungen hat ihren Platz, und aufgrund der Softwarestruktur zeitachsenbasierter Animationen gibt es zwischen Formaten immer Interoperabilitätsprobleme. Letztlich ist entscheidend, das Tool zu wählen, das am besten zum jeweiligen Projekt passt

  • Wir haben lottielab verwendet, um die Animationen auf unserer Seite (https://resonancy.io) zu erstellen, und der Editor war wirklich hervorragend SVG-basiert aufgebaut, der beste unter den Online-Tools. Insgesamt war die Erfahrung sehr flüssig. Wenn man aber nicht in den proprietären komprimierten Hosting-Service von lottielab exportiert, sind die Animationen zu groß und für eine Landingpage kaum brauchbar. Das komprimierte Hosting reduziert die Größe im Durchschnitt um 400 %, deshalb zahlen wir am Ende 30 Dollar im Monat für das Hosting. Ich werde nach alternativen Formaten suchen, möchte den Prozess zur Erstellung der Animationen aber ungern noch einmal von vorn durchlaufen. Aus früheren Erfahrungen mit React-basierten Animationsbibliotheken weiß ich, wie schwierig es ist, komplexe Animationen direkt selbst zu bauen, während man sie in lottielab relativ leicht so erstellen konnte, wie man sie sich vorgestellt hat. Rive habe ich noch nicht benutzt, plane aber, es zu testen. Ich würde mich über Empfehlungen zu externen Tools oder Bibliotheken freuen, die das Lottie-Format gut komprimieren

  • Ich verstehe nicht, was an SWF so problematisch sein soll. Die Spezifikation ist öffentlich und das Format ist sehr effizient. Wenn Sicherheitsbedenken groß sind, könnte man sogar nur die höherwertigen Turing-vollständigen Funktionen weglassen und trotzdem etwas Nutzbares implementieren. Ich stimme dem Nachbarkommentar zu, dass das letztlich „nur wieder ein weiteres JSON-Format“ ist. Es wirkt, als hätte eine Generation von Entwicklern, die sich an ineffiziente Webumgebungen gewöhnt hat, das Konzept von Effizienz selbst vergessen

  • Ich frage mich, was heute das SOTA für die Erzeugung animierter Vektorgrafiken ist. LLMs zeichnen ästhetisch keine guten SVG-Pfade, und diffusionsbasierte Bildmodelle unterstützen nur Bitmaps. Es gibt offenbar große Nachfrage nach generativer AI im Zusammenspiel mit After Effects und Illustrator, daher hoffe ich, dass jemand hier einen wirklich innovativen Schritt macht

  • Das Problem von Rive, dem Konkurrenzprodukt, ist aus künstlerischer Sicht, dass es sich nicht besonders intuitiv anfühlt. Man kann nicht direkt mit Stift- oder Blob-Werkzeugen zeichnen, man muss sich einem bestimmten Workflow anpassen, meistens durch Import von SVGs, und von einer so intuitiven UI wie bei Flash ist es weit entfernt. Es hat natürlich viele interessante Funktionen, aber nicht dieselbe Leichtigkeit und Unmittelbarkeit wie Flash

    • Rasterbilder werden ebenfalls als Eingabetyp unterstützt