Animacja elementów podczas przewijania za pomocą animacji przewijanych

Dowiedz się, jak korzystać z osi czasu przewijania i wyświetlać osi czasu, aby tworzyć w sposób deklaratywny animacje oparte na przewijaniu.

Bramus

Animacje przewijane

Animacje przewijane to typowy wzorzec UX w internecie. Animacja przewijana jest powiązana z pozycją przewijania kontenera przewijania. Oznacza to, że gdy przewijasz stronę w górę lub w dół, powiązana animacja przewija się do przodu lub do tyłu w odpowiedzi na pytanie. Przykładami są efekty takie jak obrazy tła w formie paralaksy czy wskaźniki czytania, które poruszają się podczas przewijania.

Podobnym rodzajem animacji przewijanych jest animacja powiązana z pozycją elementu w kontenerze przewijania. Na przykład dzięki temu elementy mogą wyłaniać się, gdy pojawią się na ekranie.

Klasycznym sposobem na uzyskanie tego rodzaju efektów jest reagowanie na zdarzenia przewijania w wątku głównym, co prowadzi do 2 głównych problemów:

• Nowoczesne przeglądarki wykonują przewijanie w ramach osobnego procesu i dlatego wyświetlają zdarzenia przewijania asynchronicznie.
• Animacje w głównym wątku mogą powodować zacinanie.

To sprawia, że tworzenie skutecznych animacji opartych na przewijaniu, które są zsynchronizowane z przewijaniem, jest niemożliwe lub bardzo trudne.

W Chrome w wersji 115 wprowadziliśmy nowy zestaw interfejsów API i koncepcji, które umożliwiają włączenie deklaratywnej animacji przewijanej: przewijanie osi czasu i Wyświetlanie osi czasu.

Te nowe koncepcje można zintegrować z obecnymi interfejsami Web Animations API (WAAPI) i CSS Animations API, dzięki czemu będą one dziedziczyć zalety tych interfejsów. Dotyczy to między innymi wyświetlania animacji przewijanych w głównym wątku. Tak, przeczytaj to poprawnie – teraz za pomocą zaledwie kilku linijek dodatkowego kodu możesz uzyskać płynne animacje generowane przez przewijanie oraz wykraczające poza główny wątek. A co Ci się nie podoba?

Animacje w internecie, krótkie podsumowanie

Animacje w internecie z użyciem CSS

Aby utworzyć animację w CSS, zdefiniuj zestaw klatek kluczowych, korzystając z reguły @keyframes. Połącz ją z elementem za pomocą właściwości animation-name, a jednocześnie ustaw animation-duration, która określa czas trwania animacji. Dostępnych jest więcej właściwości długoterminowych animation-*–animation-easing-function i animation-fill-mode, które można połączyć w skrócie animation.

Oto na przykład animacja, która skaluje element na osi X w górę, jednocześnie zmieniając jego kolor tła:

@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;
}

Animacje w internecie w języku JavaScript

W JavaScripcie API można użyć interfejsu Web Animations API. Możesz to zrobić, tworząc nowe instancje Animation i KeyFrameEffect, lub użyć znacznie krótszej metody Element animate().

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

Ten widoczny powyżej fragment kodu JavaScript jest identyczny z poprzednią wersją CSS.

Osie czasu animacji

Domyślnie animacja dołączona do elementu jest uruchamiana na osi czasu dokumentu. Jego czas rozpoczęcia zaczyna się od 0 po załadowaniu strony i uruchamia się do przodu w miarę upływu czasu. To jest domyślna oś czasu animacji, a do tej pory była to jedyna oś czasu animacji, do której masz dostęp.

Specyfikacja animacji opartych na przewijaniu definiuje 2 nowe typy osi czasu, których możesz użyć:

• Oś czasu przewijania: oś czasu powiązana z pozycją przewijania kontenera przewijania na określonej osi.
• Wyświetl oś czasu postępu: oś czasu powiązana ze względnym położeniem elementu w jego kontenerze przewijania.

Oś czasu przewijania

Oś czasu postępu przewijania to oś czasu animacji powiązana z postępem w pozycji przewijania kontenera przewijania – nazywanego też przewijaniem lub przewijaniem – wzdłuż konkretnej osi. Pozycja w zakresie przewijania jest konwertowana na procent postępu.

Początkowa pozycja przewijania reprezentuje 0% postępu, a końcowa pozycja przewijania – cały postęp. Na tej wizualizacji widać, że postęp liczy się od 0% do 100% podczas przewijania elementu z góry na dół.

✨ Wypróbuj

Oś czasu przewijania jest często skracana do „przewijania osi czasu”.

Wyświetl oś czasu postępów

Ten typ osi czasu jest powiązany ze względnym postępem określonego elementu w kontenerze przewijania. Tak jak w przypadku osi czasu przewijania, śledzenie przesunięcia przewijanego jest śledzone. W przeciwieństwie do osi czasu postępu przewijania o postępy decyduje względna pozycja obiektu w tym przewijaniu.

To trochę porównywalne z działaniem narzędzia IntersectionObserver, które pozwala śledzić, jak bardzo element jest widoczny w obszarze przewijania. Jeśli element nie jest widoczny w komponencie do przewijania, oznacza to, że nie ma części wspólnej. Jeśli jest widoczny wewnątrz elementu przewijania, nawet w przypadku jego najmniejszej części, oznacza, że element krzyżuje się.

Oś czasu wyświetlania rozpoczyna się w momencie, gdy obiekt zaczyna krzyżować się z elementem przewijania, a kończy się, gdy obiekt przestanie przecinać obszar przewijania. Na tej wizualizacji możesz zobaczyć, że postęp zaczyna się liczyć od 0%, gdy obiekt znajdzie się w kontenerze przewijania, i osiągnął 100% w chwili, gdy obiekt opuści ten kontener.

✨ Wypróbuj

Oś czasu wyświetlania jest często skracana do „Wyświetl oś czasu”. Możesz kierować reklamy na określone części osi czasu widoku na podstawie rozmiaru obiektu, ale o tym później.

Praktyczne wykorzystanie osi czasu postępu przewijania

Tworzenie anonimowej osi czasu postępu przewijania w CSS

Najłatwiejszym sposobem utworzenia osi czasu przewijania w CSS jest użycie funkcji scroll(). Spowoduje to utworzenie anonimowej osi czasu przewijania, którą możesz ustawić jako wartość nowej właściwości animation-timeline.

Przykład:

@keyframes animate-it { … }

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

Funkcja scroll() akceptuje argumenty <scroller> i <axis>.

Akceptowane wartości dla argumentu <scroller>:

• nearest: używa kontenera przewijania najbliższego elementu nadrzędnego (domyślnie).
• root: używa widocznego obszaru dokumentu jako kontenera przewijania.
• self: używa samego elementu jako kontenera przewijania.

Akceptowane wartości dla argumentu <axis>:

• block: korzysta z pomiaru postępu wzdłuż osi bloku kontenera przewijania (domyślnie).
• inline: korzysta z pomiaru postępu wzdłuż wbudowanej osi kontenera przewijania.
• y: korzysta z pomiaru postępu wzdłuż osi Y kontenera przewijania.
• x: używa pomiaru postępu wzdłuż osi X kontenera przewijania.

Aby np. powiązać animację z głównym elementem przewijającym na osi bloku, do scroll() przekazywane są wartości root i block. Łączna wartość to scroll(root block).

Prezentacja: wskaźnik postępu czytania

Ta wersja demonstracyjna ma wskaźnik postępu czytania umieszczony na stałe u góry widocznego obszaru. Gdy przewijasz stronę w dół, pasek postępu powiększa się, aż osiągnie pełną szerokość widocznego obszaru po dotarciu do końca dokumentu. Do obsługi animacji używana jest anonimowa oś czasu postępu przewijania.

✨ Wypróbuj

Wskaźnik postępu czytania jest umieszczony u góry strony za pomocą stałej pozycji. Aby wykorzystać skomponowane animacje, element width nie jest animowany, ale element został przeskalowany w dół na osi X za pomocą elementu transform.

<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();
}

Oś czasu animacji grow-progress w elemencie #progress jest ustawiona na anonimową oś czasu utworzoną za pomocą metody scroll(). Do funkcji scroll() nie są podawane żadne argumenty, więc przyjmuje się wartości domyślne.

Domyślnym przewijanym jest nearest, a oś domyślna to block. Skutecznie kieruje się to na główny element przewijający, ponieważ jest on najbliżej elementu #progress i śledzi kierunek jego bloku.

Tworzenie nazwanej osi czasu przewijania w CSS

Alternatywnym sposobem definiowania osi czasu postępu przewijania jest użycie nazwanej. Opis jest nieco bardziej szczegółowy, ale może być przydatny, gdy nie kierujesz reklam na nadrzędny element przewijający lub główny element przewijający, gdy strona używa wielu osi czasu lub gdy automatyczne wyszukiwanie nie działa. Dzięki temu możesz rozpoznać oś czasu postępu przewijania po nazwie.

Aby utworzyć w obrębie elementu nazwaną oś czasu przewijania, ustaw właściwość CSS scroll-timeline-name w kontenerze przewijania na odpowiedni identyfikator. Wartość musi zaczynać się od --.

Aby dostosować oś do śledzenia, zadeklaruj też właściwość scroll-timeline-axis. Dozwolone wartości są takie same jak argument <axis> funkcji scroll().

Na koniec, aby połączyć animację z osią czasu przewijania, ustaw właściwość animation-timeline elementu, który ma być animowany, na tę samą wartość co identyfikator używany w przypadku elementu scroll-timeline-name.

Przykładowy kod:

@keyframes animate-it { … }

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

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

Jeśli chcesz, możesz połączyć scroll-timeline-name i scroll-timeline-axis w skrócie scroll-timeline. Na przykład:

scroll-timeline: --my-scroller inline;

Prezentacja: wskaźnik kroku w karuzeli w poziomie

Ta wersja demonstracyjna zawiera wskaźnik kroków wyświetlany nad każdą karuzelą obrazów. Jeśli karuzela zawiera 3 obrazy, pasek wskaźnika zaczyna się od 33% szerokości, wskazując, że obecnie oglądasz obraz 1 z 3. Gdy ostatni obraz jest widoczny, co jest określane na podstawie przewinięcia do końca, wskaźnik zajmuje całą szerokość paska przewijania. Nazwana oś czasu postępu przewijania służy do sterowania animacjami.

✨ Wypróbuj

Podstawowe znaczniki galerii:

<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>

Element .gallery__progress jest dokładnie w obrębie elementu otoki .gallery. Jego początkowy rozmiar jest określany przez właściwość niestandardową --num-images.

.gallery {
  position: relative;
}


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

.gallery__scrollcontainer układa zawarte w nim elementy .gallery__entry poziomo i jest elementem, który przewija się. Dzięki śledzeniu pozycji przewijania panel .gallery__progress jest animowany. Można to zrobić, korzystając z nazywanej osią czasu przewijania --gallery__scrollcontainer.

@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;
}

Tworzenie osi czasu postępu przewijania w języku JavaScript

Aby utworzyć oś czasu przewijania w języku JavaScript, utwórz nową instancję klasy ScrollTimeline. Włóż do torby torbę z source i axis, które chcesz śledzić.

• source: odniesienie do elementu, którego przewijak chcesz śledzić. Użyj document.documentElement, aby ustawić kierowanie na główny element przewijania.
• axis: określa, która oś ma być śledzona. Podobnie jak w przypadku wersji CSS, akceptowane wartości to block, inline, x i y.

const tl = new ScrollTimeline({
  source: document.documentElement,
});

Aby dołączyć go do animacji internetowej, przekaż ją jako właściwość timeline i pomiń duration, jeśli jakaś występuje.

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

Prezentacja: wskaźnik postępu czytania, powtórzone

Aby odtworzyć wskaźnik postępu odczytu w JavaScripcie, używając tych samych znaczników, użyj następującego kodu JavaScript:

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,
    }),
  }
);

Wynik wizualny jest taki sam w wersji CSS: utworzony element timeline śledzi element przewijający główny i skaluje element #progress w górę na osi X od 0% do 100% podczas przewijania strony.

✨ Wypróbuj

Praktyczne zapoznanie się z harmonogramem wyświetlania postępów

Tworzenie osi czasu postępu w widoku anonimowym w CSS

Aby utworzyć oś czasu wyświetlania postępu, użyj funkcji view(). Jej akceptowane argumenty to <axis> i <view-timeline-inset>.

• Wartość <axis> jest taka sama jak oś czasu postępu przewijania i określa, którą oś śledzić. Wartością domyślną jest block.
• <view-timeline-inset> pozwala określić przesunięcie (dodatnią lub ujemną), aby dostosować granice, gdy element jest uznawany za widoczny lub nie. Wartość musi być wartością procentową lub auto, gdzie auto jest wartością domyślną.

Aby np. powiązać animację z elementem przecinającym się na osi bloku z elementem przewijania, użyj właściwości view(block). Podobnie jak w przypadku scroll() ustaw tę wartość jako wartość właściwości animation-timeline i nie zapomnij ustawić animation-duration na auto.

Używając podanego niżej kodu, wszystkie elementy img zanikają, gdy przecinają widoczny obszar podczas przewijania.

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

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

Intermezzo: wyświetlanie zakresów osi czasu

Domyślnie animacja połączona z osią czasu jest dołączana do całego zakresu osi czasu. Zaczyna się od momentu, gdy temat ma znaleźć się w obszarze przewijania, a kończy się, gdy obiekt całkowicie opuści ten obszar.

Możesz też powiązać go z konkretną częścią osi czasu, określając zakres, do którego ma się przyłączyć. Może to być na przykład tylko wtedy, gdy temat jest otwierany w obszarze przewijania. W poniższej wizualizacji postęp zaczyna się liczyć od 0%, gdy obiekt znajdzie się w kontenerze przewijania, ale osiągnie 100% stopnia od momentu całkowitego przecięcia się z obiektem.

Dostępne zakresy widoku osi czasu, na które możesz kierować reklamy, to:

• cover: reprezentuje pełny zakres osi czasu postępu wyświetlania.
• entry: reprezentuje zakres, w którym pole podmiotu zabezpieczeń wchodzi w zakres widoczności postępu wyświetlania.
• exit: reprezentuje zakres, w którym pole podmiotu zabezpieczeń wychodzi z zakresu widoczności postępu wyświetlania.
• entry-crossing: reprezentuje zakres, w którym pole podmiotu zabezpieczeń przecina końcową krawędź.
• exit-crossing: reprezentuje zakres, w którym pole podmiotu zabezpieczeń przecina początkową krawędź.
• contain: reprezentuje zakres, w którym pole podmiotu zabezpieczeń jest w pełni zawarte lub pokrywa zakres widoczności postępu wyświetlania w obszarze przewijania. Zależy to od tego, czy obiekt jest wyższy czy krótszy od przewijania.

Aby zdefiniować zakres, musisz ustawić początek i koniec zakresu. Każdy z nich składa się z nazwy zakresu (zobacz listę powyżej) oraz przesunięcia zakresu, aby określić pozycję w obrębie danej nazwy zakresu. Przesunięcie zakresu to zwykle wartość procentowa od 0% do 100%, ale możesz też określić stałą długość, np. 20em.

Jeśli na przykład chcesz uruchamiać animację od momentu pojawienia się obiektu, wybierz entry 0% jako początek zakresu. Aby zakończyć do momentu, gdy temat zostanie określony, jako wartość końca zakresu wybierz entry 100%.

W CSS możesz to ustawiać za pomocą właściwości animation-range. Przykład:

animation-range: entry 0% entry 100%;

W języku JavaScript używaj właściwości rangeStart i rangeEnd.

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

Użyj narzędzia umieszczonego poniżej, aby zobaczyć, co oznacza każda nazwa zakresu i jak te wartości procentowe wpływają na pozycje początkowe i końcowe. Spróbuj ustawić początek zakresu na entry 0%, a koniec zakresu na cover 50%, a następnie przeciągnij pasek przewijania, by zobaczyć efekt animacji.

Obejrzyj nagranie

Jak można zauważyć podczas eksperymentowania z narzędziami Wyświetl zakresy osi czasu, na niektóre zakresy można kierować 2 różne kombinacje nazwy zakresu i przesunięcia zakresu. Na przykład entry 0%, entry-crossing 0% i cover 0% są kierowane na ten sam obszar.

Gdy wartości docelowe na początku i na końcu zakresu mają taką samą nazwę zakresu i obejmują cały zakres – od 0% do 100%– możesz skrócić wartość do samej nazwy zakresu. Na przykład ciąg animation-range: entry 0% entry 100%; można zapisać tak krótszą wersję animation-range: entry.

Prezentacja: prezentacja obrazu

Ta wersja demonstracyjna zanika w obrazach, gdy wchodzą do obszaru przewijania. Robi się to za pomocą osi czasu widoku anonimowego. Zakres animacji został zmieniony tak, że każdy obraz ma pełną nieprzezroczystość, gdy znajduje się w połowie przewijania.

✨ Wypróbuj

Efekt rozwijania uzyskuje się przy użyciu animowanej ścieżki klipu. Kod CSS użyty do uzyskania tego efektu wygląda tak:

@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%;
}

Tworzenie nazwanej osi czasu wyświetlania w CSS

Podobnie jak przewijane osi czasu mają nazwane wersje, możesz też tworzyć nazwane Wyświetl oś czasu. Zamiast właściwości scroll-timeline-* używasz wariantów, które mają prefiks view-timeline-, czyli view-timeline-name i view-timeline-axis.

Obowiązują te same rodzaje wartości. Obowiązują te same reguły dotyczące wyszukiwania nazwanej osi czasu.

Prezentacja: ponowne wyświetlenie obrazu

Po zmianie przykładowej wersji demonstracyjnej obrazu poprawiony kod wygląda tak:

.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%;
}

Dzięki funkcji view-timeline-name: revealing-image element będzie śledzony w najbliższym obszarze przewijania. Ta sama wartość jest następnie używana jako wartość właściwości animation-timeline. Efekt wizualny jest taki sam jak wcześniej.

✨ Wypróbuj

Tworzenie osi czasu postępu wyświetlania w języku JavaScript

Aby utworzyć oś czasu wyświetlania w języku JavaScript, utwórz nową instancję klasy ViewTimeline. Wnieś do torby torbę z nieruchomościami (subject), które chcesz śledzić, axis i inset.

• subject: odniesienie do elementu, który chcesz śledzić w obrębie własnego elementu przewijania.
• axis: oś do śledzenia. Podobnie jak w przypadku wersji CSS, akceptowane wartości to block, inline, x i y.
• inset: korekta wstawiona (dodatnia) lub (ujemna) dla portu przewijania, która określa, czy pole jest widoczne.

const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

Aby dołączyć go do animacji internetowej, przekaż ją jako właściwość timeline i pomiń duration, jeśli jakaś występuje. Opcjonalnie możesz też przekazać informacje o zakresie za pomocą właściwości rangeStart i rangeEnd.

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

✨ Wypróbuj

Więcej rzeczy do wypróbowania

dołączanie do wielu zakresów funkcji wyświetlania osi czasu za pomocą jednego zestawu klatek kluczowych.

Spójrzmy na przykładową listę kontaktów, w której pozycje listy są animowane. Wpis na liście wchodzi do obszaru przewijania od dołu, który przesuwa się i zanika, a po wyjściu z portu przewijania u góry przesuwa się i zanika.

✨ Wypróbuj

Na potrzeby tej wersji demonstracyjnej każdy element jest ozdobiony jedną oś czasu wyświetlania, która śledzi go podczas przecinania jego paska przewijania, ale dołączono do niego 2 animacje przewijane. Animacja animate-in jest dołączona do zakresu entry osi czasu, a animacja animate-out do zakresu exit osi czasu.

@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;
}

Zamiast uruchomić dwie różne animacje dołączone do 2 różnych zakresów, możesz też utworzyć jeden zestaw klatek kluczowych, który zawiera już informacje o zakresie.

@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();
}

Klatki kluczowe zawierają informacje o zakresie, więc nie musisz określać animation-range. Wynik jest dokładnie taki sam jak wcześniej.

✨ Wypróbuj

Dołączanie do osi czasu przewijania, która nie jest elementem nadrzędnym

Mechanizm wyszukiwania nazwanych osi czasu przewijania i wyświetlanych osi czasu jest ograniczony do elementów nadrzędnych przewijania. Bardzo często jednak element, który musi być animowany, nie jest elementem podrzędnym elementu przewijania, który musi być śledzony.

W tym celu pomaga właściwość timeline-scope. Za pomocą tej właściwości możesz zadeklarować oś czasu o tej nazwie, nie tworząc jej. Zapewnia to szerszy zakres osi czasu o tej nazwie. W praktyce używasz właściwości timeline-scope w udostępnionym elemencie nadrzędnym, aby dołączyć do niego oś czasu podrzędnego przewijającego.

Na przykład:

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

W tym fragmencie:

• Element .parent deklaruje oś czasu o nazwie --tl. Każdy z nich może go znaleźć i zastosować jako wartość we właściwości animation-timeline.
• Element .scroller definiuje oś czasu przewijania o nazwie --tl. Domyślnie byłby widoczny tylko dla elementów podrzędnych, ale ponieważ .parent ma ustawioną wartość scroll-timeline-root, dołącza go do tego elementu.
• Element .subject używa osi czasu --tl. Przechodzi po drzewie nadrzędnym i znajduje --tl w: .parent. Gdy --tl na .parent wskazuje --tl z .scroller, .subject śledzi w zasadzie oś czasu postępu przewijania w .scroller.

Inaczej mówiąc, możesz użyć funkcji timeline-root, aby przenieść oś czasu do elementu nadrzędnego (czyli podnosić), dzięki czemu wszystkie elementy podrzędne tego elementu będą miały do niego dostęp.

Mikrodanej timeline-scope można używać zarówno w przypadku przewijania osi czasu, jak i wyświetlania osi czasu.

Więcej prezentacji i materiałów

Wszystkie wersje demonstracyjne omówione w tym artykule na ministronie przewijanej-animacja.style. Znajdziesz w niej też wiele innych demonstracji możliwości wykorzystania animacji przewijanych.

Jedną z dodatkowych wersji demonstracyjnych są okładki albumów. Każda okładka obraca się w 3D i zajmuje centralny punkt świetlny.

✨ Wypróbuj

Możesz też zagrać w tę demonstrację układów kart, która wykorzystuje position: sticky. W miarę jak karty się układają, skalują się w dół, tworząc przyjemny efekt głębi. W końcu cały stos zniknie z widoku jako grupa.

Znajdziesz go też na stronie scroll-driven-animations.style, w której znajdziesz zbiór narzędzi, takich jak wizualizacja wyświetlania postępu w zakresie osi czasu, omówiona wcześniej w tym poście.

Animacje przewijane są również omawiane w artykule Co nowego w Web Animation na Google I/O 2023.