Die Technik hinter den Bewegungen auf der Seite. Richtig eingesetzt zeigt Bewegung dem Auge, wo es hinschauen soll — falsch eingesetzt macht sie nur unruhig.
Entweder alles steht starr, oder es blinkt und springt an jeder Ecke.
Der Blick wird geführt: erst die Aussage, dann der Beweis, dann der Knopf.
- Eine Zeitachse ordnet die Reihenfolge
Mehrere Bewegungen hängen aneinander statt gleichzeitig loszulaufen. Das ist der Unterschied zwischen Choreografie und Zappeln.
- Das Scrollen kann die Zeit sein
Statt dass eine Animation nach Sekunden läuft, läuft sie nach Scrollweg — du steuerst sie mit dem Finger.
- Bewegt wird, was billig zu bewegen ist
Verschieben und Skalieren übernimmt die Grafikkarte. Wer stattdessen Breite und Höhe animiert, zwingt den Browser zum Neuberechnen — genau das hat auf dieser Seite schon einmal geruckelt.
- Zu viel Bewegung ist ein Fehler
Animation soll führen, nicht unterhalten. Wer „Bewegung reduzieren" eingestellt hat, bekommt hier gar keine.
- Auslöser (Scrollen)
- Zeitachse
- Element A blendet ein
- Element B folgt später
Eine Zeitachse steuert mehrere Elemente in fester Reihenfolge. Ohne sie fängt jedes für sich an und die Bewegung wirkt zufällig.
Eine Bibliothek für Bewegung. Abläufe werden als Zeitleisten beschrieben, sodass mehrere Dinge sauber nacheinander laufen. Für Bewegung beim Scrollen gibt es einen eigenen Teil, der meldet, wann ein Element ins Bild kommt.
- Steuerung
- Zeitleisten
- Scrollen
- eigener Auslöser
- Bewegt
- Position und Deckkraft
- Rücksicht
- auf reduzierte Bewegung
Inhalte erscheinen in der Reihenfolge, in der sie gelesen werden sollen
Zahlen zählen hoch, wenn sie ins Bild kommen
Übergänge zwischen Seiten ohne hartes Umschalten
Jede Animation kostet Rechenzeit. Wer Größe oder Höhe animiert statt der Position, zwingt den Browser zum Neuberechnen der ganzen Seite — genau dieser Fehler war hier einmal der Grund für ruckelndes Scrollen.
Jede Karte blendet sich beim Scrollen ein — spürbar, aber nie so, dass man darauf wartet.