Web- und App-Animationen

Interaktive Animationen mit RIVE

Stell dir eine Animation vor, die mitbekommt, was du gerade tust: Ein Charakter folgt dir mit den Augen, wenn du die Maus bewegst. Nutzer*innen können einen Avatar einkleiden und verändern oder ein Haus Schritt für Schritt modernisieren und dabei zusehen, wie es sich verwandelt. Das ist eine RIVE-Animation: Sie reagiert auf die Nutzer*innen, statt einfach nur abzulaufen.

RIVE oder klassisches Video?

Ein Video eignet sich, um eine Geschichte zu erzählen. Eine RIVE-Animation eignet sich, sobald Nutzer*innen selbst etwas auslösen oder steuern sollen – sie ist außerdem deutlich kleiner als eine Videodatei und lädt schneller, gerade auf dem Handy.

Du musst dich nicht entscheiden: Zu jedem Erklärvideo das wir für dich produzieren, bieten wir optional passende RIVE-Animationen an. Einzelne Illustrationen oder Figuren aus dem Video werden dabei wiederverwendet und für deine Website interaktiv gemacht. So holst du mehr aus einer einzigen Produktion heraus, statt zweimal von vorn anzufangen.

Wofür eignet sich das?

• Interaktive Schritt-für-Schritt-Anleitungen, bei denen Nutzer*innen selbst weiterklicken, statt ein Video am Stück abzuwarten
• Interaktive Infografiken, die Informationen erst auf Klick zeigen und so auch komplexere Zusammenhänge greifbar machen
• Ein Konfigurator, bei dem sich zum Beispiel ein Haus je nach Auswahl verändert – andere Fassade, anderes Dach, eine Solaranlage auf dem Dach
• Ein Avatardesigner, mit dem sich Nutzer*innen ihre eigene Figur zusammenstellen und individualisieren können
• Kleine Spielelemente wie das Sammeln von Punkten, eine Figur, die mit jedem Schritt ein Stück weiterläuft, oder eine kurze Belohnungsanimation nach einer abgeschlossenen Aktion

Spielerisch statt nur informativ

Wer selbst etwas auslösen kann – anklicken, ausprobieren, eine kleine Belohnung bekommen – bleibt länger dabei und erinnert sich besser an die Botschaft dahinter. Genau das ist der Grund, warum sich spielerische Elemente inzwischen überall finden: in Lern-Apps, auf Spendenseiten, in Onboarding-Strecken.

Das bekannteste Beispiel dafür ist Duolingo. Die Sprachlern-App ist vor allem für ihre Figuren bekannt, die auf jede Eingabe reagieren: Sie freuen sich über eine richtige Antwort, schauen bei einer falschen betreten und warten ansonsten mit einer kleinen Leerlauf-Animation. Genau diese Figuren sind mit RIVE gebaut. Für die Nutzer*innen fühlt es sich dadurch weniger nach Vokabelabfrage an und mehr nach einem Gegenüber, das mitgeht.

Dasselbe Prinzip funktioniert auch außerhalb von Lern-Apps: Statt „Deine Spende hat schon 50 Bäume gepflanzt“ als Satz kann beim Scrollen ein kleiner animierter Wald mitwachsen.

Wichtig dabei: Spielerische Elemente ersetzen keine gute Botschaft. Sie sorgen dafür, dass sie ankommt.

Ein Beispiel aus der Praxis: eatappie

Bei Essstörungen fehlen Therapieplätze, die Wartezeiten sind lang. Für viele Betroffene beginnt genau in dieser Phase die eigentliche Herausforderung. Hier setzt die App eatappie an: sofort verfügbare, niedrigschwellige Unterstützung, die junge Menschen durch ihren Alltag begleitet – flexibel, diskret und unabhängig von monatelangen Wartelisten.

Ein zentrales Element sind die fünf virtuellen Therapiebegleiter*innen. Die Illustrationen dafür lagen bereits vor – unsere Aufgabe war es also nicht, Charaktere zu erfinden, sondern bestehende Figuren in Bewegung zu bringen und in die App-Logik zu übersetzen.

Die Herausforderung lag im Detail: Die Begleiter*innen musste in zwei klar definierten Positionen animiert werden, dazu kamen zahlreiche Kleidungsstücke, Objekte und Situationen, die sich je nach Inhalt kombinieren lassen. Gleichzeitig musste die App schlank und performant bleiben.

Unsere Lösung: ein modularer Ansatz mit RIVE. Eine ruhige Basisanimation bildet das Fundament, alle weiteren Elemente liegen auf separaten Ebenen und lassen sich in der Programmierung ein- und ausblenden. So entsteht Vielfalt, ohne dass jede Variante einzeln gebaut werden muss. Die Animationen sind bewusst reduziert gehalten – sie sollen Ruhe vermitteln und nicht vom Inhalt ablenken.

Im folgenden Screencast nehmen wir dich mit ins Programm und zeigen, wie die Figuren aufgebaut sind.