Rive – Interaktive Animationen

Rive – Interaktive Animationen

Was haben Duolingo und LinkedIn gemeinsam?

Vielleicht die lästigen Push-Nachrichten – aber auch Rive.

Rive ist ein relativ neues Design- und Animationstool. Der Unterschied zu After Effects und ähnlicher Software liegt darin, dass es interaktive Inhalte erstellen kann, die live reagieren: auf Klicks, Scrollen, Dateneingaben oder auf den Zustand einer App oder Website. So werden Design, Animation und Code in einer Applikation kombiniert.

Es entwickelt sich aktuell schnell zum Branchenstandard für state-driven Animation – und fast jeder dürfte bereits irgendwo Kontakt mit Rive gehabt haben.

Wer eine neue Sprache auf Duolingo lernt, wurde schon von einer Rive-animierten Eule terrorisiert. Wer in einen modernen PKW steigt, interagiert auf der Suche nach der Klimaanlageneinstellung vielleicht mit einem Rive-basierten UI. Und wer sich auf LinkedIn vernetzt oder auf Spotify Musik hört, wurde vermutlich vor einigen Monaten dazu aufgefordert, seine Aktivität dort über „LinkedIn Year in Review" und „Spotify Wrapped" Freunden und Kontakten unter die Nase zu reiben.

Was kann Rive?

Die Software arbeitet mit sogenannten State Machines, die definieren, wie eine Animation auf externe Ereignisse reagiert. Hier lassen sich komplexe Logiken entwerfen, die direkt innerhalb eines Files arbeiten und Animationen und Daten steuern. Nach außen kommuniziert Rive über frei definierbare Ein- und Ausgänge – Booleans, Trigger, Strings oder Zahlen – mit jeder Umgebung, in die es eingebettet wird. Das Verrückte daran: Die fertigen Files bleiben dabei unerwartet schlank und performant.

Bisherige Workflows für interaktive animierte Komponenten erforderten Prototypes, die von Motion Designern erstellt wurden, um anschließend von Programmierern in Code übertragen zu werden – so gut das halt möglich war. Rive vereinfacht diesen Prozess und gibt Motion Designern die Möglichkeit, produktionsreife Komponenten zu erstellen, die anschließend direkt von Entwicklern in Applikationen integriert werden können – ohne den zusätzlichen Übersetzungsaufwand in Code.

Und wenn es einfach gehen soll, kann ein Rive-File auch als Embed-Code in eine Website eingepflegt werden, sofern das File nicht aktiv mit der Website kommunizieren muss – wir haben z. B. ein interaktives Handbuch für Meister Racing erstellt, das auf diese Art innerhalb von Sekunden, wie ein YouTube-Video, in der Kundenwebsite integriert war.

Rive ist breit einsetzbar und mit fast jeder Plattform kompatibel. Open-Source-Schnittstellen (Runtimes) gibt es für JavaScript, Defold, Apple iOS, Android, Unity, Flutter, Framer, React, Webflow, Wix, C++ – eine Liste, die ebenso wie der Funktionsumfang von Rive fast monatlich wächst.

Rive bei TreeTop

Rive gibt uns die Möglichkeit, unser Motion-Design-Know-how interaktiv anzubieten – wir erstellen damit nicht mehr nur Filme, sondern können Komponenten für Websites und Software liefern (eben: „everything motion"). So verschwimmt für uns die Grenze zwischen Film, Animation und Interface – und Zuseher werden zu Teilnehmern.

Was das konkret bedeutet

Interaktive Grafiken sind kein Sonderprojekt für Tech-Konzerne mit Barista Service in der Tisch-Tennis Area. Mit Rive sind reaktionsfähige Web-Animationen, animierte UI-Komponenten und vollständige interaktive Erlebnisse für jede Website, jede App jedes Produkt realisierbar.

TreeTop bietet das als eigenständiges Leistungspaket an: von der Konzeption über die Animation bis zur integrationsfähigen Komponente. Für Webflow und andere Systeme, für iOS und Android, für fast alles...

Wenn auf Ihrer Website Stillstand herrscht– das lässt sich ändern.