Unsere 20 jährige Erfahrung mit Motion Graphics wird interaktiv.
Wer an Webanimationen denkt, denkt an CSS-Transitions, an GIFs, die sich artig in Schleife drehen, oder an Lottie-Dateien, die hübsch aussehen – und dabei passiv wie ein Plakat sind. Rive denkt anders.
Das Herzstück von Rive ist die State Machine – ein Zustandsautomat, der Animationen auf Nutzeraktionen reagieren lässt. Klick, Hover, Scroll, App-Status: Die Animation weiß, was gerade passiert, und handelt entsprechend. Das Ergebnis sind Charaktere, Icons und UI-Elemente, die sich nicht wie Videoclips verhalten, sondern wie lebendige Dinge.
Die Performance hält mit: 120 fps, GPU-beschleunigt, Dateigrößen bis zu 90 % kleiner als bei vergleichbaren Lottie-Animationen. Weil Rive eine eigene Runtime mitbringt, läuft dieselbe Datei auf Web, iOS, Android, Flutter – und sogar in Unity oder Unreal Engine. Ohne Anpassungen, ohne Kompromisse. Für Webflow gibt es nativen Support: .riv-Dateien direkt ins Asset-Panel, Trigger über Hover, Klick oder Scroll. Von der Animation zum fertigen Web-Element in einem Schritt.
Anwendungsgebiete für interaktive Rive-Animationen sind weit gefächert: von reaktionsfähigen App-Mascots über animierte UI-Komponenten in Design-Systemen bis hin zu datengetriebenen Dashboard-Animationen, die auf Echtzeit-Metriken reagieren. Kurz gesagt: überall dort, wo Bewegung nicht nur schön aussehen, sondern auch etwas bedeuten soll.
Spline ist eine browserbasierte 3D-Plattform, die auch ohne Cinema-4D-Hintergrund zu echten Web-3D-Erlebnissen führt – und dabei production-ready ist.
Interaktive 3D-Hero-Sections, Produktvisualisierungen, animierte 3D-Elemente: Alles lässt sich mit einem einzigen HTML-Tag in jede Website einbetten. Kein WebGL-Code, kein Three.js-Studium, kein Shader-Debugging um Mitternacht. Seit 2024 ist Spline die erste 3D-Plattform überhaupt, die nativ auf Android publizieren kann – eine Szene, alle Plattformen.
Materialien, Beleuchtung, Physics-Simulationen, Interaktivitäts-Logik via States und Events – Spline deckt das alles ab. Dazu KI-Features, die das Arbeiten beschleunigen: Text-to-3D, Image-to-3D, AI Style Transfer. Für schnelles Iterieren, ohne jede Variante von Null modellieren zu müssen.
Ob interaktive Produkt-Demos im E-Commerce, 3D-Markenwelten für Kampagnen oder immersive Landing Pages – Spline macht Web-3D zugänglich, ohne die Qualität zu kompromittieren.
Ein paar Beispiele findet ihr hier: TreeTop.Interaktiv
Theorie ist schön. Projekte sind besser.
Für Mitsubishi Chemical haben wir die Kaiteki City Website mitgestaltet – eine interaktive Visionswelt, in der Rive-Animationen und 3D-Renderings aus Cinema 4D zusammenarbeiten, um Mitsubishis Idee einer nachhaltigen Zukunft erlebbar zu machen. Mobilität, Ernährung, Medizin, Halbleiter: jedes Szenario als eigene interaktive Erfahrung im Web, und dieselben Inhalte als großformatige Prints auf internationalen Messen. Ein Projekt, das zeigt, was möglich ist, wenn Inhalt und Technologie gemeinsam denken.
Für Meister Racing haben wir ein interaktives Handbuch in Rive gebaut – eines, das nicht gelesen, sondern ERLEBT wird. Animationen reagieren auf Nutzerinteraktion und machen aus trockenem Techniker-Inhalt ein echtes Interface-Erlebnis.
Und wer auf treetop.at genau hinschaut: Auch hier laufen zahlreiche Elemente über Rive und Spline. Die eigene Website ist unser laufendes Testlabor – und der ehrlichste Beweis, dass wir das ernst meinen.
Interaktive Grafiken und 3D-Elemente sind kein Luxus mehr, den nur Großkonzerne mit eigenem Animations-Budget stemmen. Mit Rive und Spline sind hochwertige, reaktionsfähige Web-Animationen und vollständige 3D-Erlebnisse auch für mittelständische Websites, mobile Apps und Software-Interfaces realisierbar – und wartbar.
TreeTop bietet das als eigenständiges Leistungspaket: von der Konzeption über die Animation bis zur fertigen, integrationsfähigen Web-Komponente. Für Websites und Landing Pages, iOS und Android, Design-Systeme, Produktpräsentationen und Kampagnen.
Wenn auf eurer Website noch keine Pixel reagieren lässt sich das ändern.
