Wie eine Scroll-Animation Gewicht bekommt
Federn, kurze Schubstöße und ein bisschen Aufmerksamkeit machen aus einer Grafik auf einer Bahn etwas, das lebendig wirkt.
Ein Element an die Scrollposition zu koppeln, ist schnell erledigt. Spannend wird es erst, wenn es sich anfühlen soll, als hätte es Masse. So bewegt sich der Astronaut auf dieser Seite – und darum ist jeder Baustein da.
Ziele statt Positionen
Üblicherweise bildet man den Scrollfortschritt direkt auf eine Position ab: 40 Prozent der Seite entsprechen 40 Prozent der Strecke. Das funktioniert, wirkt aber wie eine Marionette auf Schienen.
Stattdessen legt jeder Abschnitt fest, wo der Astronaut ruhen soll, während man ihn liest:
<section data-astro="0.78 0.45 1">Die Scrollposition bestimmt ein Ziel, und eine Feder zieht ihn dorthin:
vel.x = (vel.x + (target.x - pos.x) * stiffness) * damping;
pos.x += vel.x;Weil er dem Ziel hinterherjagt, statt einfach darauf zu sitzen, schießt er bei schnellem Scrollen ein Stück übers Ziel hinaus und pendelt sich dann ein – genau wie ein echtes Objekt. Zwei Zahlen bestimmen seinen ganzen Charakter: die Steifigkeit, also wie eifrig er ist, und die Dämpfung, also wie schnell er wieder zur Ruhe kommt.
Erst verweilen, dann weiterfliegen
Nur mit einer Feder wäre er ständig in Bewegung, und das ermüdet auf Dauer. Deshalb bleibt das Ziel stehen, solange ein Abschnitt in der Bildschirmmitte ist, und wandert nur im Bereich zwischen zwei Abschnitten weiter. Du liest in Ruhe, und er reist, während du scrollst.
Schub, den man ihm abnimmt
Die Düsen feuern umso stärker, je schneller er unterwegs ist. Sie fahren rasch hoch und nur langsam wieder herunter – das wirkt wie Anstrengung und nicht wie ein Lichtschalter. Steht er still, gibt er alle paar Sekunden einen kurzen Stoß in eine zufällige Richtung und treibt wieder zurück: die kleinen Korrekturen, die man eben braucht, um auf der Stelle zu bleiben.
Lass ihn hinschauen
Das hat sogar mich überrascht. Fünfmal pro Sekunde suche ich die Überschrift oder Karte, die der Bildschirmmitte am nächsten ist, und er dreht sich langsam in diese Richtung. Eine Kleinigkeit – aber dadurch wirkt es, als würde er mitlesen, statt nur vorbeizuschweben.
Rücksicht auf alle, die keine Bewegung wollen
Wer im System reduzierte Bewegung eingestellt hat, bekommt keine Feder, kein Treiben und keine Schubstöße. Der Astronaut bleibt einfach an seinem jeweiligen Platz. Dieselbe Geschichte, nur ohne Schwindelgefühl.