Warum Rive Lottie aus meinem Stack geschmissen hat

Lottie spielt Animationen ab. Rive baut interaktive Systeme. Der Unterschied wird 2026 endgültig spürbar.

Lottie war jahrelang die naheliegende Wahl, wenn aus After Effects etwas auf eine Website sollte. Klein, schnell, zuverlässig. Du exportierst per Bodymovin, ziehst die JSON in lottie-web und fertig.

Seit ein paar Monaten finde ich Lottie in keinem meiner aktiven Projekte mehr. Rive hat es verdrängt, und das war kein Trend-Switch, sondern eine handfeste Entscheidung nach mehreren echten Auslieferungen.

Was Lottie nie konnte

Eine Lottie-Datei ist im Kern eine abgespielte Timeline. Vorwärts, rückwärts, gestoppt. Wenn du wolltest, dass eine Animation auf Hover anders reagiert als auf Klick, musstest du in JavaScript Segmente steuern. Das funktioniert, aber die Logik landet immer im Code, nie in der Datei. Designer übergeben eine JSON, Entwickler bauen drumherum.

Lottie hat 2025 State Machines nachgereicht, ja. Aber das fühlt sich an wie ein Feature-Add-on auf einer Architektur, die für etwas anderes gemacht wurde.

Was Rive anders macht

Rive ist von Grund auf ein State-Machine-Format. Die Animation ist nicht das Endprodukt, sondern eine Komponente im System. Im Editor definierst du Zustände, Transitionen und Trigger-Bedingungen. Die fertige .riv-Datei enthält die komplette Interaktionslogik.

Das klingt nach einem kleinen Detail, ist aber ein Paradigmenwechsel. Ein Beispiel aus einem aktuellen Projekt: Ein Onboarding-Indikator, der vier Stati hat (idle, loading, success, error). In Lottie wären das vier Animationen plus JavaScript, das zwischen ihnen orchestriert. In Rive ist das eine Datei, ein State-Machine-Input vom Typ Enum, drei Zeilen Code zum Setzen des Werts.

const stateMachine = riveInstance.stateMachineInputs("OnboardStatus");
const status = stateMachine.find(i => i.name === "status");
status.value = 2; // success

Das war's. Die Übergänge, das Easing, die Reihenfolge der Sub-Animationen, alles wohnt im File.

Data Binding: das eigentliche Killer-Feature

Was Rive seit dem Update letzten Herbst wirklich interessant macht, ist Data Binding. Du kannst fast jede Eigenschaft (Position, Farbe, Skalierung, Sichtbarkeit) an eine Variable hängen. Diese Variable ist dann von außen steuerbar oder lebt in der Datei selbst und wird durch andere Werte beeinflusst.

Im Klartext: Ein Loader-Balken, der seinen Füllstand aus einem Wert zwischen 0 und 1 zieht. Ein Avatar, dessen Augen dem Cursor folgen. Ein Preisschild, das in Echtzeit eine andere Währung zeigt. Alles ohne dass JavaScript einzelne Frames berechnen muss.

Früher wäre das ein Custom-Canvas-Job gewesen. Heute exportiert die Designerin eine Datei, der Entwickler hängt eine Variable rein, fertig.

Performance ist nicht der Punkt, aber trotzdem

Die offizielle Rive-Demo zeigt 60 FPS, wo Lottie auf gleicher Animation um 17 FPS herumdümpelt. Das stimmt für komplexe Vektorszenen. In meinen normalen Use-Cases (kleine UI-Animationen) merkt man das nicht direkt. Was man merkt: Die Initialisierung ist spürbar leiser. Lottie kann beim Mount kurz stocken, gerade auf älteren Mobilgeräten. Rive tut das nicht.

Dateigröße ist meist kleiner, weil Rive Vektordaten effizienter packt. Eine typische Mikro-Animation liegt bei 8 bis 15 KB.

Was Lottie weiterhin gut macht

Wenn die Animation wirklich nur abgespielt werden soll (Hero-Header-Loop, Fußnoten-Spinner, Loading-Indicator ohne States), ist Lottie immer noch okay. Das Tooling rund um After Effects ist für Motion Designer, die diesen Workflow seit Jahren leben, ein echter Vorteil.

Für alles, was reagieren soll, ist Rive die bessere Wahl. Punkt.

Was sich für meine Arbeit konkret ändert

Ich kann Animationen heute viel weiter im Designprozess belassen. Eine Designerin baut die Komponente fertig (mit Verhalten), gibt mir das .riv-File, und ich brauche keine 200 Zeilen Code mehr, um die Logik nachzubauen, die im Editor schon visuell definiert ist.

Das spart nicht nur Zeit. Es macht das Endergebnis besser, weil das Verhalten der Animation dort spezifiziert wird, wo Verhalten visuell verstanden wird. Im Editor, von der Person, die die Bewegung gestaltet hat. Nicht in useEffect, von einer Person, die das Original nie geöffnet hat.

Das ist eine kleine Verschiebung in der Arbeitsteilung mit großen Folgen. Genau das Versprechen, das Lottie 2017 gegeben hat, löst Rive 2026 endlich ein.

Sources: