liquiddesign

Wzorzec 20

Scroll jako oś czasu

Pasek postępu czytania i elementy wjeżdżające przy scrollu wymagały dotąd nasłuchu zdarzeń, throttlingu i pracy w każdej klatce. Scroll-driven animations oddają oś czasu przeglądarce: scroll() mierzy postęp kontenera, view() pozycję elementu w oknie, a animacja jedzie na kompozytorze.

Proces studia, przewijany własnym tempem

Przewiń ramkę poniżej. Pasek postępu i wjazd kart czytają pozycję scrolla wprost z CSS: zero nasłuchu zdarzeń, zero throttlingu, animacja jedzie na kompozytorze.

  1. Krok 01

    Brief i inwentarz treści

    Zanim powstanie pierwszy piksel, spisujemy prawdziwe treści: najdłuższy tytuł, najkrótszy opis i wszystkie stany pośrednie.

  2. Krok 02

    Szkielet informacji

    Struktura widoku powstaje z samych kontenerów. Każdy z nich zna swoje minimalne wymiary, zanim dostanie treść.

  3. Krok 03

    Skala typograficzna

    Nazwane kroki clamp() zamiast rozmiarów per widok. Tekst płynie z kontenerem od zegarka po billboard.

  4. Krok 04

    Stany widoku

    Ładowanie, treść, pustka i błąd projektowane razem, w jednym kontenerze o wspólnej geometrii.

  5. Krok 05

    Prototyp w kodzie

    Zamiast klikalnej makiety: prawdziwy komponent w przeglądarce, z prawdziwym zawijaniem tekstu i prawdziwym fokusem.

  6. Krok 06

    Review na checkliście

    Design i kod przechodzą przez tę samą listę pytań o stabilność, dostępność i płynność.

  7. Krok 07

    Pomiar po wdrożeniu

    CLS i INP z prawdziwych sesji wracają do zespołu. Regres stabilności traktujemy jak błąd krytyczny.

Ta przeglądarka nie wspiera jeszcze scroll-driven animations, więc widzisz stan końcowy: karty stoją widoczne, a pasek jest pełny. Dokładnie tak wygląda tu poprawna degradacja.

Reguły

  • Postęp przewijania czyta animation-timeline: scroll(), nie zdarzenie scroll z throttlingiem.
  • Wjazd elementu wiąże view() z animation-range, więc dzieje się dokładnie tam, gdzie element wchodzi w kadr.
  • Animowane są transform i opacity, więc oś czasu ze scrolla nie dotyka layoutu.
  • Stan końcowy animacji jest stanem spoczynkowym: bez wsparcia i przy reduced motion treść po prostu stoi widoczna.

Wzorzec w kodzie

Postęp czytania bez nasłuchu zdarzenia scroll
.pasek-postepu {
  transform-origin: left center;
  animation: postep auto linear both;
  animation-timeline: scroll(nearest block);
}
@keyframes postep {
  from { scale: 0 1; }
  to { scale: 1 1; }
}
view() wie, kiedy element wchodzi w kadr
.karta {
  animation: wjazd auto linear both;
  animation-timeline: view(block);
  /* animacja trwa, póki karta wchodzi w kadr */
  animation-range: entry 5% entry 85%;
}
@keyframes wjazd {
  from { opacity: 0.15; translate: 0 1rem; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .karta { animation: none; }
}

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia
Zaimplementuj w moim projekcie wzorzec „Scroll jako oś czasu" z metodologii Liquid Design.

animation-timeline ze scroll() i view() wiąże animację z pozycją przewijania, bez nasłuchu zdarzeń i bez pracy na głównym wątku.

Wymagania:
- Postęp przewijania czyta animation-timeline: scroll(), nie zdarzenie scroll z throttlingiem.
- Wjazd elementu wiąże view() z animation-range, więc dzieje się dokładnie tam, gdzie element wchodzi w kadr.
- Animowane są transform i opacity, więc oś czasu ze scrolla nie dotyka layoutu.
- Stan końcowy animacji jest stanem spoczynkowym: bez wsparcia i przy reduced motion treść po prostu stoi widoczna.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/wzorce/animacje-scrollem