Animacja elementów podczas przewijania za pomocą animacji przewijanych

Dowiedz się, jak pracować z osiami czasu przewijania i wyświetlania, aby tworzyć animacje sterowane przewijaniem w sposób deklaratywny.

Animacje wywoływane przez przewijanie

Animacje wywoływane przez przewijanie są częstym wzorcem UX w internecie. Animacja wywoływana przez przewijanie jest powiązana z pozycją przewijania kontenera przewijania. Oznacza to, że gdy przewijasz w górę lub w dół, powiązana animacja przesuwa się do przodu lub do tyłu w bezpośredniej odpowiedzi. Przykładami takich efektów są obrazy tła z paralaksą lub wskaźniki czytania, które poruszają się podczas przewijania.

Przykładem podobnego typu animacji zależnej od przewijania jest animacja powiązana z pozycją elementu w kontekście kontenera przewijania. Dzięki temu możesz np. stosować efekt łagodnego pojawiania się elementów.

Klasyczny sposób uzyskiwania tego typu efektów polega na reagowaniu na zdarzenia przewijania w głównym wątku, co powoduje 2 główne problemy:

• Nowoczesne przeglądarki wykonują przewijanie w ramach osobnego procesu, dlatego zdarzenia przewijania są przesyłane asynchronicznie.
• Animacje wątku głównego mogą być niepłynne.

To uniemożliwia lub bardzo utrudnia tworzenie wydajnych animacji synchronizowanych z przewijaniem.

Od wersji 115 przeglądarki Chrome dostępny jest nowy zestaw interfejsów API i koncepcji, które umożliwiają deklaratywną animację ładowania: osi czasu przewijania i osi czasu wyświetlania.

Te nowe koncepcje są zintegrowane z dotychczasowymi interfejsami Web Animations API (WAAPI) i CSS Animations API, dzięki czemu mogą korzystać z ich zalet. Obejmuje to możliwość uruchamiania animacji sterowanych przez przewijanie w wątku głównym. Tak, dobrze przeczytałeś: możesz teraz uzyskać płynne animacje, sterowane przez przewijanie, działające w wątku głównym, za pomocą kilku dodatkowych linii kodu. Co jest nie tak?

Animacje w internecie – krótkie podsumowanie

Animacje w internecie za pomocą CSS

Aby utworzyć animację w CSS, zdefiniuj zestaw klatek kluczowych za pomocą reguły @keyframes at-rule. Połącz go z elementem za pomocą właściwości animation-name, a następnie ustaw wartość animation-duration, aby określić czas trwania animacji. Dostępnych jest więcej właściwości animation-* w wersji rozbudowanej (np. animation-easing-function i animation-fill-mode), które można łączyć w skrótach animation.

Oto przykład animacji, która powiększa element wzdłuż osi X, zmieniając jednocześnie 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 za pomocą JavaScriptu

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

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

Wynik działania tego fragmentu kodu JavaScript jest identyczny z wynikiem działania poprzedniej wersji kodu CSS.

Sekwencje animacji

Domyślnie animacja dołączona do elementu jest odtwarzana na osi czasu dokumentu. Jego czas początkowy wynosi 0, gdy wczytuje się strona, a później zaczyna się zwiększać wraz z upływem czasu. Jest to domyślna oś czasu animacji i do tej pory była to jedyna oś czasu animacji, do której miałeś/miałaś dostęp.

Specyfikacja animacji sterowanych przewijaniem definiuje 2 nowe typy osi czasu, których możesz używać:

• Oś postępu przewijania: oś czasu powiązana z pozycją przewijania kontenera przewijania wzdłuż określonej osi.
• Oś czasu wyświetlania: oś czasu powiązana z względną pozycją danego elementu w kontenerze przewijania.

Przewijanie osi czasu postępu

Oś czasu postępu przewijania to oś czasu animacji powiązana z postępem w przesuwaniu pozycji kontenera przewijania (zwanego też scrollportem lub scrollerem) wzdłuż określonej osi. Konwertuje pozycję w zakresie przewijania na odsetek postępu.

Początkowa pozycja przewijania odpowiada 0% postępu, a końcowa pozycja przewijania – 100%. Z poniższej wizualizacji widać, że po przesunięciu suwaka od góry do dołu postęp rośnie od 0% do 100%.

✨ Wypróbuj to na własnej skórze

Oś czasu postępu przewijania jest często nazywana po prostu „osią czasu przewijania”.

Wyświetlanie osi czasu postępu

Ten typ osi czasu jest powiązany z względnym postępem danego elementu w kontenerze przewijania. Podobnie jak w przypadku osi czasu postępu przewijania, śledzone jest przesunięcie suwaka. W odróżnieniu od osi czasu postępu przewijania to względna pozycja obiektu na liście sterowania decyduje o postępie.

Jest to w pewnym stopniu podobne do działania IntersectionObserver, które może śledzić, jak dużo elementu jest widoczne na pasku przewijania. Jeśli element nie jest widoczny w rolce, nie przecina się z innymi elementami. Jeśli jest widoczne w rolce – nawet w najmniejszym stopniu – oznacza to, że się przecina.

Czas wyświetlania zaczyna się w momencie, gdy obiekt zaczyna się pokrywać z rolką, i kończy, gdy przestaje się z nią pokrywać. W tej wizualizacji widać, że postęp zaczyna się od 0%, gdy osoba wchodzi do obszaru przewijania, i osiąga 100% w momencie, gdy osoba opuszcza obszar przewijania.

✨ Wypróbuj to na własnej skórze

Oś czasu wyświetlania jest często nazywana po prostu „osią czasu wyświetlania”. Można kierować reklamy na określone części osi czasu wyświetlania na podstawie rozmiaru tematu, ale o tym później.

Praktyczne zastosowanie osi czasu postępu przewijania

Tworzenie anonimowej osi czasu postępu przewijania w CSS

Najprostszym 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() przyjmuje argumenty <scroller> i <axis>.

Akceptowane wartości argumentu <scroller>:

• nearest: używa najbliższego kontenera przewijania przodka (domyślnie).
• root: Używa widocznego obszaru dokumentu jako obszaru przewijania.
• self: element jest używany jako kontener przewijania.

Akceptowane wartości argumentu <axis>:

• block: używa pomiaru postępu wzdłuż osi bloku kontenera przewijania (domyślnie).
• inline: używa pomiaru postępu wzdłuż osi wstawionej w kontenerze przewijania.
• y: używa pomiaru postępu wzdłuż osi y kontenera przewijania.
• x: używa pomiaru postępu wzdłuż osi X kontenera przewijania.

Aby na przykład powiązać animację z głównym scrollerem na osi bloku, wartościami do przekazania do scroll() są root i block. Łączna wartość to scroll(root block).

Demonstracja: wskaźnik postępu czytania

W tym pokazie wskaźnik postępu czytania jest przymocowany u góry obszaru widoku. Gdy przewijasz stronę, pasek postępu rośnie, aż do momentu, gdy na końcu dokumentu zajmie całą szerokość widocznego obszaru. Do sterowania animacją służy anonimowa oś czasu postępu przewijania.

✨ Wypróbuj to na własnej skórze

Wskaźnik postępu czytania jest umieszczony u góry strony za pomocą pozycji stałej. Aby wykorzystać złożone animacje, nie animujesz width, ale element jest zmniejszany na osi x za pomocą 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ą funkcji scroll(). Funkcja scroll() nie ma żadnych argumentów, więc zostaną użyte wartości domyślne.

Domyślnym suwakiem do śledzenia jest nearest, a domyślną osią jest block. Skutecznie kieruje to na główny scroller, ponieważ jest to najbliższy scroller elementu #progress, a jednocześnie śledzi kierunek bloku.

Tworzenie oznaczenia osi czasu postępu przewijania w CSS

Alternatywnym sposobem zdefiniowania osi czasu postępu przewijania jest użycie osi o nazwie. Jest on nieco bardziej rozbudowany, ale może się przydać, gdy nie kierujesz reklam na element nadrzędny scrollera ani na element scrollera wyższego poziomu, gdy strona używa wielu linii czasu lub gdy automatyczne wyszukiwanie nie działa. Dzięki temu możesz zidentyfikować ścieżkę postępu przewijania po jej nazwie.

Aby utworzyć nazwaną oś czasu postępu przewijania dla elementu, ustaw w przypadku właściwości CSS elementu scroll-timeline-name w kontenerze przewijania dowolny identyfikator. Wartość musi się zaczynać od --.

Aby określić, którą oś chcesz śledzić, zadeklaruj również właściwość scroll-timeline-axis. Dozwolone wartości są takie same jak argument <axis> funkcji scroll().

Aby połączyć animację z osią czasu postępu przewijania, ustaw w elementach, które mają być animowane, właściwość animation-timeline na taką samą wartość jak identyfikator użyty w elementach scroll-timeline-name.

Przykład kodu:

@keyframes animate-it { … }

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

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

W razie potrzeby możesz połączyć scroll-timeline-name i scroll-timeline-axis w skrótach scroll-timeline. Na przykład:

scroll-timeline: --my-scroller inline;

.

Demo: wskaźnik kroku karuzeli poziomej

W tym pokazie demo nad każdą karuzelką obrazów wyświetla się wskaźnik kroku. Gdy karuzela zawiera 3 obrazy, pasek wskaźnika zaczyna się od 33% szerokości, aby wskazać, że obecnie wyświetlany jest pierwszy z 3 obrazów. Gdy ostatni obraz jest widoczny (co oznacza, że suwak jest przewinięty do końca), wskaźnik zajmuje całą szerokość suwaka. Do sterowania animacją służy nazwana linia czasu postępu przewijania.

✨ Wypróbuj to na własnej skórze

Oto podstawowa sygnatura XML 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 umieszczony absolutnie w elemencie opakowania .gallery. Jego początkowy rozmiar jest określany przez niestandardową właściwość --num-images.

.gallery {
  position: relative;
}


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

Element .gallery__scrollcontainer rozmieszcza zawarte elementy .gallery__entry w poziomie i jest elementem, który można przewijać. Śledzenie pozycji przewijania powoduje animację .gallery__progress. Aby to zrobić, odwołuj się do nazwanej osi czasu postępu 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 za pomocą JavaScript

Aby utworzyć ścieżkę przewijania w JavaScript, utwórz nową instancję klasy ScrollTimeline. Przekaż obiekt z elementami source i axis, które chcesz śledzić.

• source: odwołanie do elementu, którego scroller chcesz śledzić. Użyj document.documentElement, aby kierować reklamy na główny suwak.
• axis: określa, którą oś ma być śledzona. Podobnie jak w przypadku wariantu CSS, akceptowane wartości to block, inline, x i y.

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

Aby dołączyć je do animacji internetowej, prześlij je jako właściwość timeline, pomijając dowolne duration, jeśli takie się znajdowały.

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

Demonstracja: wskaźnik postępu czytania (wersja 2)

Aby utworzyć wskaźnik postępu czytania za pomocą JavaScriptu, używając tego samego znacznika, użyj tego kodu JavaScriptu:

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

Efekt wizualny jest identyczny w wersji CSS: utworzony element timeline śledzi element root scroller, a element #progress jest skalowany na osi X od 0% do 100% podczas przewijania strony.

✨ Wypróbuj to na własnej skórze

Praktyczne informacje o widoku osi czasu postępu

Tworzenie anonimowej osi postępu w CSS

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

• Wartość <axis> jest taka sama jak na osi czasu postępu przewijania i określa, którą oś ma być śledzona. (wartością domyślną jest block);
• Za pomocą parametru <view-timeline-inset> możesz określić przesunięcie (dodatnie lub ujemne), aby dostosować granice, w których element jest widoczny lub nie. Wartość musi być wartością procentową lub auto, przy czym auto jest wartością domyślną.

Aby na przykład powiązać animację z elementem, który przecina się z suwakową częścią elementu na osi bloku, użyj funkcji view(block). Podobnie jak w przypadku atrybutu scroll(), ustaw go jako wartość właściwości animation-timeline i nie zapomnij ustawić wartości animation-duration na auto.

Dzięki temu kodowi każdy element img będzie się pojawiał stopniowo, gdy będzie przechodzić przez obszar widoku 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 powiązana z osią czasu widoku jest dołączana do całego zakresu osi czasu. Rozpoczyna się w momencie, gdy obiekt ma wejść do obszaru przewijania, i kończy się, gdy obiekt całkowicie opuści ten obszar.

Możesz też powiązać go z konkretną częścią osi czasu widoku, określając zakres, do którego ma zostać dołączony. Może się to zdarzyć na przykład tylko wtedy, gdy obiekt wchodzi w obszar przewijania. W tej wizualizacji postęp zaczyna się od 0%, gdy obiekt wchodzi do kontenera przewijania, ale osiąga 100% od momentu, gdy całkowicie się z nim pokryje.

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

• cover: przedstawia pełny zakres osi czasu postępu wyświetlania.
• entry: reprezentuje zakres, w którym główne pole wchodzi w zakres widoczności postępu wyświetlania.
• exit: reprezentuje zakres, w którym główne pole opuszcza zakres widoczności postępu wyświetlania.
• entry-crossing: reprezentuje zakres, w którym główne pole przecina krawędź końcową.
• exit-crossing: reprezentuje zakres, w którym główne pole przecina krawędź początkową.
• contain: reprezentuje zakres, w którym pole główne jest w pełni zawarte w zakresie widoczności postępu wyświetlania w obszarze przewijania lub całkowicie pokrywa ten zakres. To zależy od tego, czy obiekt jest wyższy czy niższy od kółka przewijania.

Aby zdefiniować zakres, musisz ustawić początek i koniec zakresu. Każdy z nich składa się z nazwy zakresu (patrz lista powyżej) i odstępu zakresu, który określa pozycję w danym zakresie. Odchylenie zakresu to zwykle wartość procentowa z zakresu 0%–100%, ale możesz też podać stałą długość, np. 20em.

Jeśli na przykład chcesz uruchomić animację od momentu wejścia obiektu, wybierz entry 0% jako początek zakresu. Aby zakończyć zadanie w określonym czasie, wpisz entry 100% jako wartość dla pola „Koniec zakresu”.

W CSS ustawiasz to za pomocą właściwości animation-range. Przykład:

animation-range: entry 0% entry 100%;

W kodzie JavaScript używaj właściwości rangeStart i rangeEnd.

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

Za pomocą ukrytego poniżej narzędzia możesz sprawdzić, co oznaczają poszczególne nazwy zakresów i jak wartości procentowe wpływają na pozycje początkową i końcową. Spróbuj ustawić wartość zakresu początkowego na entry 0%, a zakres końcowy na cover 50%, a następnie przeciągnij suwak, aby zobaczyć wynik animacji.

Obejrzyj nagranie

Podczas eksperymentowania z tymi narzędziami możesz zauważyć, że niektóre zakresy mogą być kierowane przez 2 różne kombinacje nazwy zakresu i zakresu przesunięcia. Na przykład entry 0%, entry-crossing 0% i cover 0% odnoszą się do tego samego obszaru.

Gdy wartości parametrów range-start i range-end odnoszą się do tej samej nazwy zakresu i obejmują cały zakres – od 0% do 100%– możesz skrócić wartość do samej nazwy zakresu. Na przykład animation-range: entry 0% entry 100%; można zastąpić znacznie krótszym animation-range: entry.

Demonstracja: wyświetlanie obrazu

W tym pokazie obrazy są stopniowo przyciemniane, gdy wchodzą do obszaru przewijania. W tym celu możesz użyć osi czasu anonimowego wyświetlenia. Zakres animacji został dostosowany tak, aby każde zdjęcie było w pełni przezroczyste, gdy znajduje się w połowie suwaka.

✨ Wypróbuj to na własnej skórze

Efekt rozszerzania uzyskuje się dzięki zastosowaniu animowanej ścieżki klipu. Oto kod CSS użyty do tego efektu:

@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 oś czasu postępu widoku o nazwie w CSS

Podobnie jak w przypadku wersji osi czasu przewijania, możesz też tworzyć nazwane wersje widoku osi czasu. Zamiast właściwości scroll-timeline-* używasz wersji z prefiksem view-timeline-, czyli view-timeline-name i view-timeline-axis.

Stosuje się te same typy wartości i te same reguły wyszukiwania nazwanej osi czasu.

Demonstracja: wyświetlanie obrazu

Ponowne przetworzenie wcześniejszego przykładu ujawniania obrazu. Zmieniony 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 użyciu view-timeline-name: revealing-image element będzie śledzony w najbliższym scrollerze. Ta sama wartość jest następnie używana jako wartość właściwości animation-timeline. Wyświetlane obrazy są dokładnie takie same jak wcześniej.

✨ Wypróbuj to na własnej skórze

Tworzenie osi czasu postępu wyświetlania w JavaScript

Aby utworzyć osi czasu widoku w JavaScript, utwórz nową instancję klasy ViewTimeline. Przekaż obiekt z usługą subject, którą chcesz śledzić, axis i inset.

• subject: odwołanie do elementu, który chcesz śledzić w ramach własnego scrollera.
• axis: oś do śledzenia. Podobnie jak w przypadku wariantu CSS, akceptowane wartości to block, inline, x i y.
• inset: przesunięcie (dodatnie) lub przesunięcie (ujemne) pola przewijania podczas określania, czy pole jest widoczne.

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

Aby dołączyć je do animacji internetowej, prześlij je jako właściwość timeline, pomijając dowolne duration, jeśli takie się znajdowały. Opcjonalnie możesz podać 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 to na własnej skórze

Więcej możliwości do wypróbowania

Dołączanie do wielu zakresów osi czasu widoku za pomocą jednego zestawu klatek kluczowych

Zobacz demonstrację listy kontaktów z animowanymi pozycjami. Gdy pozycja na liście wchodzi do okna przewijania od dołu, przesuwa się i zanika, a gdy wychodzi z okna od góry, przesuwa się i zanika.

✨ Wypróbuj to na własnej skórze

W tym pokazie każdy element jest ozdobiony jedną osią czasu widoku, która śledzi element podczas jego przemieszczania się po obszarze przewijania, ale są do niego dołączone 2 animacje sterowane przewijaniem. Animacja animate-in jest przypięta do zakresu entry na osi czasu, a animacja animate-out do zakresu exit na 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 uruchamiania 2 różnych animacji dołączonych do 2 różnych zakresów możesz utworzyć 1 zbiór klatek kluczowych, który zawiera 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();
}

Ponieważ kluczowe klatki zawierają informacje o zakresie, nie musisz określać wartości animation-range. Wynik jest dokładnie taki sam jak poprzednio.

✨ Wypróbuj to na własnej skórze

Dołączanie do osi czasu Scroll Timeline, która nie jest przodkiem

Mechanizm wyszukiwania nazwanych przewijanych osi czasu i nazwanych osi czasu widoku jest ograniczony tylko do przewijanych przodków. Bardzo często jednak element, który ma być animowany, nie jest elementem podrzędnym scrollera, który należy śledzić.

Aby to zadziałało, musisz użyć właściwości timeline-scope. Używasz tej właściwości, aby zadeklarować oś czasu o tej nazwie bez jej faktycznego tworzenia. Spowoduje to, że linia czasu o tej nazwie będzie miała szerszy zakres. W praktyce używasz właściwości timeline-scope w wspólnym elemencie nadrzędnym, aby linia czasu elementu podrzędnego mogła się do niego przypiąć.

Na przykład:

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

W tym fragmencie kodu:

• Element .parent deklaruje oś czasu o nazwie --tl. Każdy element podrzędny może go znaleźć i użyć jako wartości właściwości animation-timeline.
• Element .scroller definiuje ścieżkę przewijania o nazwie --tl. Domyślnie jest on widoczny tylko dla jego podkatalogów, ale ponieważ .parent ma go ustawionego jako scroll-timeline-root, jest do niego dołączony.
• Element .subject korzysta z osi czasu --tl. Przechodzi przez drzewo przodków i znajduje --tl na .parent. Gdy --tl na .parent wskazuje na --tl na .scroller, .subject będzie śledzić oś czasu postępów przewijania .scroller.

Innymi słowy, za pomocą funkcji timeline-root możesz przesunąć oś czasu do elementu nadrzędnego (czyli przesunięcia), aby wszystkie elementy podrzędne miały do niej dostęp.

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

Więcej wersji demonstracyjnych i materiałów

Wszystkie prezentacje omówione w tym artykule znajdziesz na ministronie z animowanymi elementami sterowanymi przez przewijanie. Na stronie internetowej znajdziesz więcej demonstracji, które pokazują, co jest możliwe dzięki animacjom sterowanym przez przewijanie.

Jednym z dodatkowych demo jest ta lista okładek albumów. Każda okładka obraca się w 3D, gdy zajmuje miejsce w środku.

✨ Wypróbuj to na własnej skórze

Możesz też obejrzeć demonstrację układania kart, która wykorzystuje position: sticky. Gdy karty są ułożone jedna na drugiej, już przyklejone karty są zmniejszane, co tworzy przyjemny efekt głębi. Na końcu cały stos przesuwa się w dół jako grupa.

✨ Wypróbuj to na własnej skórze

Na stronie scroll-driven-animations.style znajdziesz też kolekcję narzędzi, takich jak wizualizacja postępu zakresu osi czasu, o której była mowa wcześniej w tym poście.

Animacje uruchamiane przez przewijanie są też omawiane w sekcji Nowości w animacji internetowej na konferencji Google I/O 2023.