Elemente beim Scrollen mit Scroll-Animationen animieren

Hier erfahren Sie, wie Sie Scrollzeitleisten und Zeitachsen ansehen, um scrollbare Animationen auf deklarative Weise zu erstellen.

Bramus

Scroll-Animationen

Unterstützte Browser

  • Chrome: 115. <ph type="x-smartling-placeholder">
  • Edge: 115. <ph type="x-smartling-placeholder">
  • Firefox: hinter einer Flagge.
  • Safari: wird nicht unterstützt. <ph type="x-smartling-placeholder">

Quelle

Scroll-gesteuerte Animationen sind ein gängiges UX-Muster im Web. Eine Scroll-Animation ist mit der Scrollposition eines Scrollcontainers verknüpft. Das bedeutet, dass beim Scrollen nach oben oder unten die verknüpfte Animation in Direct Response vor- oder zurückspult wird. Beispiele dafür sind Effekte wie Parallaxe-Hintergrundbilder oder Leseanzeigen, die sich beim Scrollen bewegen.

<ph type="x-smartling-placeholder">
</ph>
Eine Leseanzeige über einem Dokument, die durch Scrollen angetrieben wird.

Eine ähnliche Scroll-gesteuerte Animation ist eine Animation, die mit der Position eines Elements innerhalb des Scroll-Containers verknüpft ist. So können beispielsweise Elemente eingeblendet werden, wenn sie sichtbar werden.

<ph type="x-smartling-placeholder">
</ph>
Die Bilder auf dieser Seite werden eingeblendet, sobald sie angezeigt werden.

Die klassische Methode für diese Art von Effekten besteht darin, auf Scroll-Ereignisse im Hauptthread zu reagieren, was zu zwei Hauptproblemen führt:

  • Moderne Browser führen das Scrollen in einem separaten Prozess aus und liefern Scroll-Ereignisse daher asynchron.
  • Animationen im Hauptthread unterliegen Verzögerungen.

Dadurch ist das Erstellen leistungsstarker scrollbarer Animationen, die mit dem Scrollen synchron sind, nicht möglich oder sehr schwierig.

Ab Chrome-Version 115 gibt es neue APIs und Konzepte, mit denen Sie deklarative, scrollbare Animationen aktivieren können: Scroll-Zeitachsen und -Zeitachsen anzeigen.

Diese neuen Konzepte lassen sich in die vorhandene Web Animations API (WAAPI) und die CSS Animations API einbinden und profitieren so von den Vorteilen der vorhandenen APIs. Dazu gehört die Möglichkeit, scrollbare Animationen über den Hauptthread hinaus laufen zu lassen. Ja, das ist richtig: Sie können jetzt mit nur wenigen Zeilen zusätzlichen Code nahtlose, flüssige Animationen erstellen, die durch Scrollen über den Hauptthread laufen und gesteuert werden. Was magst du nicht?!

Animationen im Web, kurze Zusammenfassung

Animationen im Web mit CSS

Um eine Animation in CSS zu erstellen, definieren Sie mithilfe der At-Regel @keyframes eine Reihe von Keyframes. Verknüpfen Sie es mithilfe der Eigenschaft animation-name mit einem Element und legen Sie außerdem einen animation-duration fest, um festzulegen, wie lange die Animation dauern soll. Es gibt noch weitere animation-*-Properties im Langformat – animation-easing-function und animation-fill-mode, um nur einige zu nennen –, die alle in der Abkürzung animation kombiniert werden können.

Hier sehen Sie als Beispiel eine Animation, die ein Element auf der X-Achse hochskaliert und gleichzeitig seine Hintergrundfarbe ändert:

@keyframes scale-up {
  from {
    background-color: red;
    transform: scaleX(0);
  }
  to {
    background-color: darkred;
    transform: scaleX(1);
  }
}

#progressbar {
  animation: 2.5s linear forwards scale-up;
}

Animationen im Web mit JavaScript

In JavaScript kann die Web Animations API verwendet werden, um genau dasselbe zu erreichen. Dazu erstellen Sie entweder neue Animation- und KeyFrameEffect-Instanzen oder verwenden die viel kürzere Element-Methode animate().

document.querySelector('#progressbar').animate(
  {
    backgroundColor: ['red', 'darkred'],
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    duration: 2500,
    fill: 'forwards',
    easing: 'linear',
   }
);

Dieses visuelle Ergebnis des obigen JavaScript-Snippets ist mit der vorherigen CSS-Version identisch.

Animationszeitachsen

Standardmäßig wird eine Animation, die an ein Element angehängt ist, auf der Zeitachse des Dokuments ausgeführt. Ihre Startzeit beginnt beim Laden der Seite bei 0 und tickt sich vor, während die Uhrzeit voranschreitet. Dies ist die Standard-Animationszeitachse. Bis jetzt war dies die einzige Animationszeitachse, auf die Sie Zugriff hatten.

In der Spezifikation für scrollgesteuerte Animationen sind zwei neue Arten von Zeitachsen definiert, die Sie verwenden können:

  • Scroll-Fortschritts-Zeitachse: Eine Zeitachse, die mit der Scrollposition eines Scrollcontainers entlang einer bestimmten Achse verknüpft ist.
  • Zeitachse des Fortschritts ansehen: Eine Zeitachse, die mit der relativen Position eines bestimmten Elements innerhalb seines Scroll-Containers verknüpft ist.

Scroll-Fortschritt auf der Zeitachse

Eine Zeitachse für den Scrollfortschritt ist eine Animationszeitachse, die mit dem Fortschritt an der Scrollposition eines Scrollcontainers – auch als Scrollport oder Scroller bezeichnet – entlang einer bestimmten Achse verknüpft ist. Sie wandelt eine Position in einem Scrollbereich in einen prozentualen Fortschritt um.

Die anfängliche Scrollposition entspricht einem Fortschritt von 0% und die letzte Scrollposition einen Fortschritt von 100 %. In der folgenden Visualisierung sehen Sie, dass der Fortschritt von 0% bis 100% aufgezählt wird, während Sie beim Scrollen von oben nach unten scrollen.

<ph type="x-smartling-placeholder">
</ph>
Visualisierung einer Scroll-Fortschritts-Zeitachse. Wenn Sie im Scroller nach unten scrollen, wird der Fortschritt von 0% bis 100 % erhöht.

✨ Probiere es selbst aus

Eine Scroll-Fortschritts-Zeitachse wird oft mit „Scroll-Zeitachse“ abgekürzt.

Fortschritts-Zeitachse anzeigen

Diese Art von Zeitachse ist mit dem relativen Fortschritt eines bestimmten Elements innerhalb eines Scroll-Containers verknüpft. Genau wie bei einer Zeitachse für den Scroll-Fortschritt wird der Scroll-Offset eines Scrollers erfasst. Im Gegensatz zu einer Zeitachse für den Scrollfortschritt bestimmt die relative Position eines Motivs innerhalb dieses Scrollers den Fortschritt.

Das ist vergleichbar mit der Funktionsweise von IntersectionObserver, mit der erfasst werden kann, wie viel ein Element im Scroller sichtbar ist. Wenn das Element beim Scrollen nicht sichtbar ist, überschneidet es sich nicht. Wenn es innerhalb des Scrollers sichtbar ist – selbst für den kleinsten Teil –, überschneidet es sich.

Eine Zeitachse des Anzeigefortschritts beginnt an dem Zeitpunkt, an dem sich ein Motiv mit dem Scroller überschneidet, und endet, wenn das Motiv den Scroller nicht mehr kreuzt. In der folgenden Visualisierung sehen Sie, dass der Fortschritt bei 0% ansteigt, wenn das Subjekt den Scroll-Container betritt, und in dem Moment, in dem das Subjekt den Scroll-Container verlässt, 100% erreicht.

<ph type="x-smartling-placeholder">
</ph>
Visualisierung einer Zeitachse für den Aufruffortschritt. Der Fortschritt wird von 0% bis 100% erhöht, wenn das Motiv (grünes Feld) sich über den Scroller bewegt.

✨ Probiere es selbst aus

Die Zeitachse des Aufrufverlaufs wird oft einfach mit „Zeitachse ansehen“ abgekürzt. Es ist möglich, ein Targeting auf bestimmte Teile einer Zeitachse basierend auf der Größe eines Objekts vorzunehmen. Dazu gehen wir später genauer ein.

Praktische Nutzung der Zeitachsen für den Scroll-Fortschritt

Anonyme Scroll-Fortschritts-Zeitachse in CSS erstellen

Am einfachsten lässt sich eine Scroll-Zeitachse in CSS mit der Funktion scroll() erstellen. Dadurch wird eine anonyme Scroll-Zeitachse erstellt, die du als Wert für die neue animation-timeline-Eigenschaft festlegen kannst.

Beispiel:

@keyframes animate-it { … }

.subject {
  animation: animate-it linear;
  animation-timeline: scroll(root block);
}

Die Funktion scroll() akzeptiert ein <scroller>- und ein <axis>-Argument.

Für das Argument <scroller> sind folgende Werte zulässig:

  • nearest: Verwendet den Scroll-Container des nächstgelegenen Ancestors (Standardeinstellung).
  • root: Verwendet den Darstellungsbereich des Dokuments als Scrollcontainer.
  • self: Das Element selbst wird als Scrollcontainer verwendet.

Für das Argument <axis> sind folgende Werte zulässig:

  • block: Verwendet die Messung des Fortschritts entlang der Blockachse des Scroll-Containers (Standardeinstellung).
  • inline: Verwendet die Messung des Fortschritts entlang der Inline-Achse des Scroll-Containers.
  • y: Verwendet die Messung des Fortschritts entlang der Y-Achse des Scrollcontainers.
  • x: Verwendet die Messung des Fortschritts entlang der x-Achse des Scrollcontainers.

Wenn Sie beispielsweise eine Animation an den Stamm-Scroller auf der Blockachse binden möchten, müssen die Werte root und block an scroll() übergeben werden. Insgesamt beträgt der Wert scroll(root block).

Demo: Lesefortschrittsanzeige

In dieser Demo ist oben im Darstellungsbereich eine Lesefortschrittsanzeige fixiert. Wenn Sie auf der Seite nach unten scrollen, wächst die Fortschrittsanzeige so lange, bis sie am Ende des Dokuments die volle Breite des Darstellungsbereichs einnimmt. Für die Animation wird eine anonyme Scroll-Fortschritts-Zeitachse verwendet.

<ph type="x-smartling-placeholder">
</ph>
Demo: Lesefortschrittsanzeige

✨ Probiere es selbst aus

Die Lesefortschrittsanzeige befindet sich oben auf der Seite und verwendet die Position „Fixiert“. Zur Nutzung von zusammengesetzten Animationen wird nicht das width animiert, sondern das Element auf der x-Achse mithilfe von transform verkleinert.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

Die Zeitachse für die Animation grow-progress für das Element #progress ist auf eine anonyme Zeitachse festgelegt, die mit scroll() erstellt wird. An scroll() werden keine Argumente übergeben. Daher wird auf die Standardwerte zurückgesetzt.

Der standardmäßig zu verfolgende Scroller ist nearest und die Standardachse ist block. Dadurch wird effektiv auf den Stamm-Scroller ausgerichtet, da dieser der nächstgelegene Scroller des #progress-Elements ist, während seine Blockrichtung erfasst wird.

Benannte Zeitachse für den Scroll-Fortschritt in CSS erstellen

Alternativ können Sie eine benannte Scroll-Zeitachse verwenden, um eine Zeitachse für den Scroll-Fortschritt zu definieren. Sie ist etwas ausführlicher, aber sie kann sich als nützlich erweisen, wenn die Ausrichtung nicht auf einen übergeordneten oder den Root-Scroller erfolgt, die Seite mehrere Zeitachsen verwendet oder wenn die automatische Suche nicht funktioniert. So können Sie die Zeitachse für den Scrollfortschritt anhand des Namens identifizieren, den Sie ihr gegeben haben.

Wenn Sie eine benannte Scrollfortschritt-Zeitachse für ein Element erstellen möchten, legen Sie die CSS-Eigenschaft scroll-timeline-name im Scrollcontainer auf eine gewünschte Kennung fest. Der Wert muss mit -- beginnen.

Um zu optimieren, welche Achse verfolgt werden soll, müssen Sie auch die Eigenschaft scroll-timeline-axis deklarieren. Zulässige Werte sind dieselben wie für das Argument <axis> von scroll().

Um die Animation mit der Zeitachse für den Scroll-Fortschritt zu verknüpfen, legen Sie schließlich die Eigenschaft animation-timeline für das Element, das animiert werden soll, auf denselben Wert wie die für scroll-timeline-name verwendete ID fest.

Codebeispiel:

@keyframes animate-it { … }

.scroller {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: inline;
}

.scroller .subject {
  animation: animate-it linear;
  animation-timeline: --my-scroller;
}

Bei Bedarf können Sie scroll-timeline-name und scroll-timeline-axis in der scroll-timeline-Kurzschreibweise kombinieren. Beispiel:

scroll-timeline: --my-scroller inline;

In dieser Demo wird über jedem Bilderkarussell eine Schrittanzeige eingeblendet. Wenn ein Karussell drei Bilder enthält, beginnt die Anzeigeleiste mit einer Breite von 33 %. Dies zeigt an, dass Sie sich gerade das erste Bild von drei Bildern ansehen. Wenn das letzte Bild zu sehen ist – was durch Scrollen bis zum Ende bestimmt wird – nimmt der Indikator die volle Breite des Scrollers ein. Für die Animation wird eine benannte Scroll-Fortschritts-Zeitachse verwendet.

<ph type="x-smartling-placeholder">
</ph>
Demo: Horizontale Karussellschrittanzeige

✨ Probiere es selbst aus

Das grundlegende Markup für eine Galerie lautet wie folgt:

<div class="gallery" style="--num-images: 2;">
  <div class="gallery__scrollcontainer">
    <div class="gallery__progress"></div>
    <div class="gallery__entry">…</div>
    <div class="gallery__entry">…</div>
  </div>
</div>

Das .gallery__progress-Element befindet sich genau innerhalb des Wrapper-Elements .gallery. Seine anfängliche Größe wird durch die benutzerdefinierte Eigenschaft --num-images bestimmt.

.gallery {
  position: relative;
}


.gallery__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1em;
  transform: scaleX(calc(1 / var(--num-images)));
}

.gallery__scrollcontainer legt die enthaltenen .gallery__entry-Elemente horizontal an und ist das Element, das scrollt. Durch die Erfassung der Scrollposition wird der .gallery__progress animiert. Dazu wird die benannte Scroll-Fortschritts-Zeitachse --gallery__scrollcontainer verwendet.

@keyframes grow-progress {
  to { transform: scaleX(1); }
}

.gallery__scrollcontainer {
  overflow-x: scroll;
  scroll-timeline: --gallery__scrollcontainer inline;
}
.gallery__progress {
  animation: auto grow-progress linear forwards;
  animation-timeline: --gallery__scrollcontainer;
}

Eine Zeitachse für den Scroll-Fortschritt mit JavaScript erstellen

Zum Erstellen einer Scroll-Zeitachse in JavaScript erstellen Sie eine neue Instanz der ScrollTimeline-Klasse. Gib ein Immobiliengepäckstück mit den source und axis an, die du verfolgen möchtest.

  • source: Ein Verweis auf das Element, dessen Scroller Sie verfolgen möchten. Verwenden Sie document.documentElement, um das Targeting auf den Root-Scroller vorzunehmen.
  • axis: Legt fest, welche Achse verfolgt werden soll. Ähnlich wie bei der CSS-Variante sind die Werte block, inline, x und y zulässig.
const tl = new ScrollTimeline({
  source: document.documentElement,
});

Wenn Sie es an eine Webanimation anhängen möchten, übergeben Sie es als timeline-Eigenschaft und lassen Sie duration weg, falls vorhanden.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
});

Demo: Lesefortschrittsanzeige, noch einmal aufgerufen

Um die Lesefortschrittsanzeige mit JavaScript neu zu erstellen und dabei dasselbe Markup zu verwenden, verwenden Sie den folgenden JavaScript-Code:

const $progressbar = document.querySelector('#progress');

$progressbar.style.transformOrigin = '0% 50%';
$progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

Das visuelle Ergebnis ist in der CSS-Version identisch: Das erstellte timeline-Element verfolgt den Root-Scroller und skaliert #progress auf der x-Achse beim Scrollen auf der Seite von 0% auf 100 %.

✨ Probiere es selbst aus

Praktische Tipps zur Fortschritts-Zeitachse

In CSS eine Zeitachse für den anonymen Aufruffortschritt erstellen

Verwenden Sie die Funktion view(), um eine Zeitachse für den Fortschritt zu erstellen. Die zulässigen Argumente sind <axis> und <view-timeline-inset>.

  • <axis> ist identisch mit der Zeitachse für den Scrollfortschritt und definiert, welche Achse verfolgt werden soll. Der Standardwert ist block.
  • Mit <view-timeline-inset> können Sie einen Offset (positiv oder negativ) angeben, um die Grenzen anzupassen, wenn ein Element als sichtbar angesehen wird oder nicht. Der Wert muss ein Prozentsatz oder auto sein, wobei auto der Standardwert ist.

Um beispielsweise eine Animation an ein Element zu binden, das sich mit seinem Scroller auf der Blockachse schneidet, verwenden Sie view(block). Ähnlich wie bei scroll() legen Sie diesen Wert als Wert für die Eigenschaft animation-timeline fest und vergessen Sie nicht, animation-duration auf auto zu setzen.

Mit dem folgenden Code wird jedes img eingeblendet, wenn es beim Scrollen den Darstellungsbereich überschreitet.

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

img {
  animation: reveal linear;
  animation-timeline: view();
}

Intermezzo: Zeiträume in der Zeitachse ansehen

Standardmäßig wird eine mit der Zeitachse verknüpfte Animation an den gesamten Zeitachsenbereich angehängt. Das beginnt mit dem Moment, in dem das Subjekt den Scrollport erreicht, und endet, wenn es den Scrollport ganz verlassen hat.

Es ist auch möglich, sie mit einem bestimmten Teil der Zeitachse zu verknüpfen, indem Sie den Bereich angeben, zu dem sie gehören soll. Dies kann beispielsweise nur der Fall sein, wenn das Motiv in den Bildlaufbereich eintritt. In der folgenden Visualisierung wird der Fortschritt bei 0% hochgezählt, wenn das Subjekt in den Scrollcontainer gelangt, aber er erreicht bereits 100% ab dem Zeitpunkt, an dem es sich vollständig überschneidet.

<ph type="x-smartling-placeholder">
</ph>
Eine Zeitachse, die so eingestellt ist, dass der Eingangsbereich des Themas verfolgt wird. Die Animation wird nur ausgeführt, während das Motiv in den Scrollport gelangt.

Sie können die folgenden Bereiche in der Zeitachse ansehen:

  • cover: Stellt den gesamten Bereich der Zeitachse für den Aufruffortschritt dar.
  • entry: Gibt den Bereich an, in dem die Hauptkontobox in den Sichtbarkeitsbereich des Ansichtsfortschritts eintritt.
  • exit: Gibt den Bereich an, in dem die Hauptbox den Sichtbarkeitsbereich des Ansichtsfortschritts verlässt.
  • entry-crossing: Stellt den Bereich dar, in dem der Hauptrahmen den Endrahmen überschreitet.
  • exit-crossing: Stellt den Bereich dar, in dem der Hauptrahmen den Startrand überschreitet.
  • contain: Gibt den Bereich an, in dem der Hauptrahmen entweder vollständig in den Sichtbarkeitsbereich des Ansichtsfortschritts innerhalb des Scrollports eingespeist wird oder diesen vollständig abdeckt. Das hängt davon ab, ob das Motiv größer oder kürzer als der Scroller ist.

Wenn Sie einen Bereich definieren möchten, müssen Sie einen „Bereichsbeginn“ und „Bereichsende“ festlegen. Jede besteht aus einem Bereichsnamen (siehe Liste oben) und einem Bereichsversatz, mit dem die Position innerhalb dieses Bereichsnamens bestimmt wird. Der Bereichsversatz wird normalerweise in Prozent zwischen 0% und 100% angegeben. Sie können aber auch eine feste Länge wie 20em angeben.

Wenn Sie beispielsweise eine Animation ab dem Moment laufen lassen möchten, an dem das Motiv eintritt, wählen Sie entry 0% als Bereichsbeginn. Wenn das Thema bis zur Eingabe des Themas beendet sein soll, wählen Sie entry 100% als Wert für das Bereichsende aus.

In CSS legen Sie dies mithilfe der Eigenschaft animation-range fest. Beispiel:

animation-range: entry 0% entry 100%;

Verwende in JavaScript die Properties rangeStart und rangeEnd.

$el.animate(
  keyframes,
  {
    timeline: tl,
    rangeStart: 'entry 0%',
    rangeEnd: 'entry 100%',
  }
);

Verwenden Sie das unten eingebettete Tool, um zu sehen, wofür die einzelnen Bereichsnamen stehen und wie sich die Prozentsätze auf die Start- und Endpositionen auswirken. Legen Sie für den Beginn des Bereichs entry 0% und das Ende des Bereichs auf cover 50% fest und ziehen Sie dann die Bildlaufleiste, um das Animationsergebnis zu sehen.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
Der Visualizer zum Ansehen von Bereichen der Zeitachse, verfügbar unter https://goo.gle/view-timeline-range-tool

Aufzeichnung ansehen

Wie Sie vielleicht beim Experimentieren mit den Tools zur Anzeige von Bereichen der Zeitachse bemerken, können einige Bereiche mit zwei verschiedenen Kombinationen aus Bereichsname und Bereichsversatz ausgerichtet werden. Beispiel: entry 0%, entry-crossing 0% und cover 0% sind alle auf dieselbe Region ausgerichtet.

Wenn „Bereichsbeginn“ und „Bereichsende“ auf denselben Bereichsnamen abzielen und den gesamten Bereich abdecken – von 0% bis 100%–, können Sie den Wert kürzen, um einfach den Bereichsnamen zu verwenden. Beispielsweise kann animation-range: entry 0% entry 100%; in das viel kürzere animation-range: entry umgeschrieben werden.

Demo: Bild einblenden

In dieser Demo werden die Bilder eingeblendet, wenn sie den Scrollport aufrufen. Dazu wird eine Zeitachse für anonyme Ansichten verwendet. Der Animationsbereich wurde optimiert, sodass jedes Bild eine volle Deckkraft aufweist, wenn es sich auf halber Strecke zum Bildlauf befindet.

<ph type="x-smartling-placeholder">
</ph>
Demo: Bild anzeigen

✨ Probiere es selbst aus

Der Einblendungseffekt wird durch die Verwendung eines animierten Clip-Paths erreicht. Für diesen Effekt wird folgendes CSS verwendet:

@keyframes reveal {
  from { opacity: 0; clip-path: inset(0% 60% 0% 50%); }
  to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}

.revealing-image {
  animation: auto linear reveal both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Benannte Zeitachse für Fortschritt in CSS erstellen

Ähnlich wie bei Scroll-Zeitachsen gibt es benannte Versionen. Sie können auch benannte Versionen von Zeitachsen erstellen. Anstelle der scroll-timeline-*-Properties verwenden Sie Varianten mit dem Präfix view-timeline-, also view-timeline-name und view-timeline-axis.

Es gelten die gleichen Arten von Werten und dieselben Regeln für die Suche nach einer benannten Zeitachse.

Demo: Bild einblenden, noch einmal ansehen

Der überarbeitete Code sieht so aus:

.revealing-image {
  view-timeline-name: --revealing-image;
  view-timeline-axis: block;

  animation: auto linear reveal both;
  animation-timeline: --revealing-image;
  animation-range: entry 25% cover 50%;
}

Mit view-timeline-name: revealing-image wird das Element innerhalb des nächsten Scroller erfasst. Dieser Wert wird dann als Wert für das Attribut animation-timeline verwendet. Die visuelle Ausgabe ist genau die gleiche wie zuvor.

✨ Probiere es selbst aus

Eine Zeitachse für den Aufruffortschritt in JavaScript erstellen

Zum Erstellen einer Zeitachse in JavaScript erstellen Sie eine neue Instanz der ViewTimeline-Klasse. Gib ein Eigentums-Gepäckstück mit dem subject, das du erfassen möchtest, axis und inset an.

  • subject: Ein Verweis auf das Element, das Sie innerhalb seines eigenen Scrollers verfolgen möchten.
  • axis: Die zu verfolgende Achse. Ähnlich wie bei der CSS-Variante sind die Werte block, inline, x und y zulässig.
  • inset: Eine eingefügte (positive) oder Outset (negativ)-Anpassung des Scrollports, wenn bestimmt wird, ob die Box sichtbar ist.
const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

Wenn Sie es an eine Webanimation anhängen möchten, übergeben Sie es als timeline-Eigenschaft und lassen Sie duration weg, falls vorhanden. Optional können Sie Bereichsinformationen mit den Attributen rangeStart und rangeEnd übergeben.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
  rangeStart: 'entry 25%',
  rangeEnd: 'cover 50%',
});

✨ Probiere es selbst aus

Weitere Dinge zum Ausprobieren

An mehrere Bereiche der Ansichtszeitachse mit einem Satz von Keyframes anhängen

Sehen wir uns diese Demo für die Kontaktliste an, in der die Listeneinträge animiert sind. Wenn ein Listeneintrag von unten in den Bildlaufport eintritt, wird er eingeblendet und eingeblendet. Beim Verlassen des Bildlaufports oben gleitet er heraus.

<ph type="x-smartling-placeholder">
</ph>
Demo: Kontaktliste

✨ Probiere es selbst aus

In dieser Demo wird jedes Element mit einer Ansichtszeitleiste dekoriert, die das Element beim Überqueren des Scrollports verfolgt, wobei zwei scrollbare Animationen daran angehängt sind. Die animate-in-Animation wird an den entry-Bereich der Zeitachse und die animate-out-Animation an den exit-Bereich der Zeitachse angehängt.

@keyframes animate-in {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}

#list-view li {
  animation: animate-in linear forwards,
             animate-out linear forwards;
  animation-timeline: view();
  animation-range: entry, exit;
}

Anstatt zwei verschiedene Animationen auszuführen, die an zwei verschiedene Bereiche angehängt sind, können Sie auch einen Satz von Keyframes erstellen, der bereits die Bereichsinformationen enthält.

@keyframes animate-in-and-out {
  entry 0%  {
    opacity: 0; transform: translateY(100%);
  }
  entry 100%  {
    opacity: 1; transform: translateY(0);
  }
  exit 0% {
    opacity: 1; transform: translateY(0);
  }
  exit 100% {
    opacity: 0; transform: translateY(-100%);
  }
}

#list-view li {
  animation: linear animate-in-and-out;
  animation-timeline: view();
}

Da die Keyframes die Bereichsinformationen enthalten, müssen Sie animation-range nicht angeben. Das Ergebnis ist genau das gleiche wie vorher.

✨ Probiere es selbst aus

An die Scroll-Zeitachse eines Nicht-Ancestors anhängen

Der Suchmechanismus für benannte Scroll-Zeitachsen und benannte Zeitachsen anzeigen ist auf das Scrollen für Ancestors beschränkt. Häufig ist das zu animierende Element jedoch kein untergeordnetes Element des Scrollers, das verfolgt werden muss.

Damit dies funktioniert, kommt das Attribut timeline-scope ins Spiel. Sie verwenden diese Eigenschaft, um eine Zeitachse mit diesem Namen zu deklarieren, ohne sie tatsächlich zu erstellen. Dadurch wird die Zeitachse mit diesem Namen breiter gefasst. In der Praxis verwenden Sie die Eigenschaft timeline-scope für ein gemeinsames übergeordnetes Element, damit die Zeitachse eines untergeordneten Scrollers daran angehängt werden kann.

Beispiel:

.parent {
  timeline-scope: --tl;
}
.parent .scroller {
  scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
  animation: animate linear;
  animation-timeline: --tl;
}

In diesem Snippet gilt:

  • Das Element .parent deklariert eine Zeitachse mit dem Namen --tl. Jedes untergeordnete Element kann ihn finden und als Wert für das Attribut animation-timeline verwenden.
  • Das Element .scroller definiert eine Scroll-Zeitachse namens --tl. Standardmäßig ist es nur für die untergeordneten Elemente sichtbar, aber da .parent es als scroll-timeline-root festgelegt hat, wird es an dieses Element angehängt.
  • Für das Element .subject wird die Zeitachse --tl verwendet. Sie geht den Ancestor-Baum hinauf und findet --tl auf der .parent. Wenn --tl auf der .parent auf die --tl von .scroller verweist, verfolgt .subject im Grunde die Scroll-Fortschrittszeit der .scroller.

Anders ausgedrückt: Sie können timeline-root verwenden, um eine Zeitachse nach oben zu einem Ancestor zu verschieben (auch Winding genannt), sodass alle untergeordneten Elemente des Ancestors darauf zugreifen können.

Das Attribut timeline-scope kann sowohl mit Scrollzeitleisten als auch mit Zeitachsen ansehen verwendet werden.

Weitere Demos und Ressourcen

Alle Demos, die in diesem Artikel auf der Miniwebsite für scroll-driven-animations.style behandelt werden. Die Website enthält noch viele weitere Demos, die zeigen, was mit scrollbaren Animationen möglich ist.

Eine der weiteren Demos ist diese Liste mit Albumcovern. Jedes Cover dreht sich in 3D, während es im Fokus steht.

<ph type="x-smartling-placeholder">
</ph>
Demo: Cover-Ablauf

✨ Probiere es selbst aus

Oder diese Demo mit Stapelkarten, bei der position: sticky genutzt wird. Wenn die Karten gestapelt werden, werden die bereits festhängenden Karten herunterskaliert, was einen schönen Tiefeneffekt erzeugt. Am Ende gleitet der gesamte Stapel als Gruppe aus der Ansicht.

<ph type="x-smartling-placeholder">
</ph>
Demo: Karten stapeln

✨ Probiere es selbst aus

Auf scroll-driven-animations.style gibt es auch eine Sammlung von Tools wie die Visualisierung zum Fortschritt des Zeitachsenbereichs, die wir bereits in diesem Beitrag vorgestellt haben.

Scroll-gesteuerte Animationen werden auch auf der Google I/O 2023 unter Das ist neu bei Webanimationen behandelt.