Wissenschaft als interaktive Scroll-Erfahrung

Das Projekt entstand während des Erasmussemesters meiner Freundin in Brüssel im Rahmen ihres Grafikdesignstudiums. Die Aufgabe bestand darin, eine Website zu gestalten, die ihre Inhalte mithilfe einer Scroll-Animation erzählt. Während sie das visuelle Konzept und das grundlegende Design entwickelte, übernahm ich die technische Umsetzung der Website.

Thematisch beschäftigt sich die Anwendung mit der Entstehung und Ausbreitung von Gravitationswellen. Beim Scrollen wird schrittweise dargestellt, wie zwei Schwarze Löcher aufeinandertreffen, wie sich die dabei entstehenden Wellen durch den Raum ausbreiten und wie sich bestimmen lässt, aus welcher Richtung ein solches Signal stammt.

Obwohl für die universitäre Aufgabe vor allem die visuelle Gestaltung und die Scroll-Animation im Vordergrund standen, spielte auch die wissenschaftliche Genauigkeit eine wichtige Rolle. Ein Physikstudent aus Leuven überprüfte die Darstellung und gab Rückmeldung dazu, ob die physikalischen Zusammenhänge korrekt und nachvollziehbar vermittelt wurden.

Vom Design zur interaktiven Website

Meine Aufgabe bestand nicht nur darin, einen fertigen Entwurf in Code zu übertragen. Ich wirkte auch an der Anpassung des Designs, der Konzeption der Animationen und der technischen Planung mit. Gemeinsam entwickelten wir die einzelnen Szenen so weiter, dass Gestaltung, Inhalt und Bewegung als zusammenhängende Erzählung funktionieren.

Die Website wurde mit React entwickelt. Für die Animationen verwendete ich Framer Motion. Verschiedene Elemente reagieren dabei direkt auf den Scrollfortschritt: Die Erde bewegt sich durch den Raum, Schwarze Löcher werden animiert und Gravitationswellen breiten sich visuell über den Bildschirm aus. Der Scrollvorgang steuert damit nicht nur die Navigation, sondern auch den zeitlichen Ablauf der Geschichte.

Performance als besondere Herausforderung

Eine der größten Herausforderungen war es, die zahlreichen Animationen flüssig und stabil auszuführen. Während der Entwicklung kam es immer wieder zu Rucklern, deren Ursache zunächst schwer zu bestimmen war. Letztlich stellte sich heraus, dass der animierte Sternenhintergrund eine sehr große Zahl einzelner Sterne erzeugte und dadurch einen erheblichen Teil der Rechenleistung beanspruchte.

Nach der Optimierung des Hintergrunds und der Animationen lief die Website deutlich flüssiger. Gerade bei einem Projekt, dessen Wirkung stark von sanften Bewegungen und präzisem Timing abhängt, war diese Performanceoptimierung entscheidend.

Durch das Projekt konnte ich vor allem meine Kenntnisse im Bereich Webanimationen erweitern und lernen, komplexere scrollbasierte Abläufe mit Framer Motion umzusetzen. Gleichzeitig war es eine interessante Zusammenarbeit zwischen Grafikdesign, Webentwicklung und wissenschaftlicher Vermittlung. Das Ergebnis ist eine interaktive Website, die ein komplexes physikalisches Phänomen als visuelle und geführte Erfahrung präsentiert.