Zusammenfassung

  • Der erste öffentliche W3C-Entwurf zu Scroll-linked Animations vom Oktober 2022 unterschied den Fortschritt eines scrollenden Behälters vom sichtbaren Weg eines einzelnen Elements.
  • Die Entwürfe von 2023 beschrieben unter dem Namen Scroll-driven Animations ScrollTimeline, ViewTimeline und animation-timeline: Die Bewegung folgt einem räumlichen Fortschritt statt allein einer Stoppuhr.

In einer langen Reportage wächst ein Diagramm beim ersten Anblick Balken für Balken. Zwei Sekunden später ist der Zauber vorbei. Wer eine Zahl genauer lesen und nach oben zurückgehen möchte, findet nur noch die fertige Kulisse vor. Die Seite kann in beide Richtungen bewegt werden; die Animation hat sich für eine einzige Vorstellung entschieden. Die Uhr spielt Regisseur, obwohl das Publikum die Scrollleiste in der Hand hält.

Der erste öffentliche W3C-Entwurf vom 25. Oktober 2022 hieß Scroll-linked Animations. Er beschrieb zwei Arten von Fortschritt. Eine Scroll-Fortschrittszeitleiste misst, wo sich ein scrollender Behälter zwischen seinem Anfang und seinem Ende befindet. Eine Ansichts-Fortschrittszeitleiste misst dagegen, wie ein bestimmtes Element in den sichtbaren Scrollbereich hinein-, durch ihn hindurch- und wieder hinauswandert. Ein Lesebalken am oberen Rand interessiert sich für den ersten Weg. Eine Abbildung mitten im Artikel interessiert sich für ihren eigenen Auftritt.

Die Unterscheidung verhindert eine erstaunlich häufige Verwechslung: „Wie weit ist der Artikel?“ und „Wo ist diese Grafik?“ sind zwei Fragen. Der Browser kann beide Positionen ermitteln und als Fortschritt bereitstellen. Die Webseite wählt den Effekt, seinen Bereich und die Aussage. Wer anhält, kann die Bewegung anhalten; wer zurückscrollt, kann sie zurückführen. Der Browser zählt die Schritte. Der Redakteur muss entscheiden, ob die Choreografie überhaupt etwas erklärt.

Der Entwurf vom 8. Dezember 2022 führte die Wege über CSS genauer aus. scroll() kann eine Scroll-Fortschrittszeitleiste bezeichnen; benannte und ansichtsgebundene Zeitleisten verbinden Effekte mit der passenden Quelle. Eine nüchterne Bedingung gehört dazu: Wenn ein Behälter keinen scrollbaren Überlauf hat, kann seine Scroll-Zeitleiste inaktiv sein. Eine Reise ohne Strecke kann keine Halbzeit erreichen, egal wie fest man auf die Bühne zeigt.

Der W3C-Entwurf vom 28. April 2023 trug den Titel Scroll-driven Animations. Das neue Wort trifft den Mechanismus: Die Position treibt den Fortschritt, statt nur gelegentlich ein zeitgesteuertes Feuerwerk auszulösen. Die Idee lässt sich in CSS und über Schnittstellen der Web Animations ausdrücken. Eine Abbildung kann beim Durchqueren des sichtbaren Bereichs schrittweise schärfer werden. Ein Fortschrittsbalken kann den Weg durch den Artikel begleiten. In beiden Fällen zählt ein Abschnitt der Reise mehr als eine feste Zahl von Sekunden.

Im Entwurf vom 6. Juni 2023 erscheinen ScrollTimeline und ViewTimeline als verschiedene Fortschrittsquellen, die über animation-timeline mit einem Effekt verbunden werden. Wählt ein Autor die falsche Quelle, könnte der Lesebalken nur auf den Auftritt einer einzelnen Grafik reagieren, während diese Grafik die gesamte Dokumentstrecke abfahren soll. Vor jeder Animation steht daher eine einfache redaktionelle Frage: Wessen Bewegung trägt hier die Erklärung?

Die Veröffentlichungsgeschichte des W3C verbindet den ersten öffentlichen Entwurf von 2022 mit den Überarbeitungen von 2023. Ihr gemeinsamer Gewinn ist eine messbare, vom Browser bereitgestellte räumliche Grundlage. Sie verleiht einer schlecht begründeten Animation keinen Sinn. Eine Grafik, die beim Zurückblättern ihre Aussage erneut zeigt, hilft beim Lesen. Eine Überschrift, die bei jedem Zentimeter Pirouetten dreht, macht aus der Reportage eine Kirmes. Die Scrollleiste bekam den Regiestuhl; sie sollte ihn nicht mit Konfetti füllen.

Wenn Leserinnen zurückgehen, darf auch die Erklärung zurückgehen. Die Uhr kann Feierabend machen, während das Publikum sein eigenes Tempo wählt.