← Späť na zoznam článkov

CSS scroll-driven animácieRevolúcia webových animácií bez JavaScriptu

2025-04-28•Lukáš Chylík

CSS prechádza veľkou zmenou

Nástroj, ktorý dlhé roky slúžil len na „farbičky, fonty, odsadenie či layout“ pre naše weby a aplikácie, sa postupne transformuje na plnohodnotný jazyk pre tvorbu vizuálnej logiky. Predstava, že budeme môcť vytvárať veci ako dynamické layouty, CSS vrstvy, konvertovať farby do ľubovoľných formátov či spustiť webové animácie na základe interakcie a scrollovania, bola donedávna sci-fi. A práve o týchto "scroll-driven" animáciách si dnes povieme viac.

Web Animations API, ktoré poznáme hlavne v podobe vlastností ako transition, animation či pravidlá @keyframes, prešlo minulý rok veľkým updateom. Čo sa CSS týka, bolo doplnené o nové vlastnosti, ktoré nám umožňujú vytvárať animácie riadené scrollovaním priamo v CSS.

Prehľad kľúčových vlastností:

  • scroll-timeline
  • view-timeline
  • animation-timeline
  • animation-range
  • view-timeline-inset
  • timeline-scope

scroll-timeline: Definice časové osy scrollování

Vlastnosť scroll-timeline slúži na definovanie tzv. "časovej osi scrollovania". Táto časová os sleduje priebeh scrollovania elementu (nazývaného scroller) od jeho horného okraja k spodnému alebo od ľavého k pravému okraju.

scroll-timeline je skratka pre scroll-timeline-name a scroll-timeline-axis.

Dôležité: scroll-timeline sama o sebe animáciu nespustí. Použitie je možné len v kombinácii s animation-timeline!

Podvlastnosti:

  • scroll-timeline-name: Názov časovej osi. Používame tzv. dashed-ident zápis (začína na --), ktorý poznáme z CSS custom properties. Je to reťazec, ktorý slúži ako identifikátor.
  • scroll-timeline-axis: Os scrollovania (x, y, inline, block). inline a block sú logické osi, ktoré rešpektujú smer písma.

Príklady:

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.container {
  scroll-timeline: --my-scroll-timeline y; /* Skratka */
}

.animated-element {
  opacity: 0;
  animation: fadeIn linear; /* Definícia animácie */
  animation-timeline: --my-scroll-timeline; /* Priradenie časovej osi */
}

Ekvivalentní zápis (bez zkratky):

.container {
  scroll-timeline-name: --my-scroll-timeline;
  scroll-timeline-axis: y;
}

view-timeline: Sledovanie viditeľnosti elementu

Vlastnosť view-timeline slúži na definovanie tzv. "časovej osi viditeľnosti". Táto časová os sleduje zmenu viditeľnosti elementu (subject) vnútri scrollovateľného kontajnera (scroller).

view-timeline je skratka pre view-timeline-name a view-timeline-axis.

Rovnako ako pri scroll-timeline: view-timeline sama o sebe nič neurobí. Potrebuje animation-timeline!

Podvlastnosti:

  • view-timeline-name: Názov časovej osi (používame dashed-ident).
  • view-timeline-axis: Os sledovania viditeľnosti (x, y, inline, block).

Príklady:

@keyframes slideIn {
  from {
    translate: -100% 0;
  }
  to {
    translate: 0 0;
  }
}

.animated-element {
  translate: -100% 0; /* Počiatočná pozícia mimo obrazovku */
  view-timeline: --my-view-timeline block; /* Skratka */
  animation: slideIn ease-out;
  animation-timeline: --my-view-timeline;
}

Ekvivalentní zápis (bez zkratky):

.animated-element {
  view-timeline-name: --my-view-timeline;
  view-timeline-axis: block;
}

animation-timeline: Zodpovedná za spustenie animácie

Určite ste si všimli, že v predchádzajúcich ukážkach kódu bola vždy prítomná vlastnosť animation-timeline. Je to preto, že bez nej by scroll-driven animácie jednoducho nefungovali! Táto vlastnosť spája animáciu s definovanou časovou osou (scroll alebo view).

Možnosti:

  • Pomenovaná časová os: Použijeme názov definovaný v scroll-timeline-name alebo view-timeline-name. Názov musí byť vo formáte dashed-ident (začínať na --).
  • Anonymná časová os: Použijeme funkcie scroll() alebo view().

Rozdiel medzi pomenovanou a anonymnou osou:

  • Pomenovaná os: Vhodná pre komplexnejšie animácie, kde potrebujeme opakovane použiť tú istú časovú os.
  • Anonymná os: Rýchle riešenie pre jednoduché animácie, kde nepotrebujeme zdieľať časovú os.

Príklady:

.element {
  animation-timeline: --my-scroll-timeline; /* Pomenovaná scroll timeline */
  animation-timeline: view(); /* Anonymná view timeline */
}

Funkcie scroll() a view():

Tieto funkcie umožňujú priame pripojenie animácie k scrollovaniu alebo viditeľnosti bez toho, aby sme museli definovať pomenovanú časovú os.

Príklady:

.element {
  animation-timeline: scroll(y); /* Animace řízená vertikálním scrollováním */
  animation-timeline: view(inline); /* Animace řízená viditelností (inline osa) */
}

animation-range: Nastavení hranic přehrávání animace

animation-range umožňuje určit, v jakém rozsahu časové osy se má animace přehrát. To znamená, že můžete přesně definovat, kdy se animace začne a skončí, vzhledem k průběhu scrollování nebo viditelnosti elementu.

animation-range je zkratka pro:

  • animation-range-start
  • animation-range-end

Kľúčové hodnoty pre animation-range-start a animation-range-end:

  • normal: Východisková hodnota, animácia sa prehrá od začiatku do konca časovej osi.
  • entry: Animácia začne, keď element vstupuje do viewportu.
  • exit: Animácia skončí, keď element opúšťa viewport.
  • contain: Animácia sa prehrá, len keď je element úplne vnútri viewportu.
  • cover: Animácia sa prehrá, len keď element pokrýva celý viewport.
  • číselné hodnoty: Presné hodnoty časovej osi, ktoré môžu byť definované v percentách (0%, 50%, 100%), viewportových jednotkách (10svw, 50svb) alebo statických jednotkách (10rem, 20px).

Príklady:

.element {
  animation-timeline: view();
  animation-range: entry contain;
}

.element {
  animation-timeline: scroll(y);
  animation-range: 20% 80%;
}

.element {
  animation-timeline: scroll(y);
  animation-range: 10rem 50vh;
}

view-timeline-inset: Nastavenie offsetu časovej osi viditeľnosti

view-timeline-inset umožňuje upraviť hranice, kedy sa element považuje za viditeľný. Týmto spôsobom môžete dosiahnuť plynulejších prechodov a animácií, ktoré reagujú na príchod elementu do viewportu ešte predtým, než je fyzicky viditeľný. Inými slovami, môžete nastaviť offset, o ktorý sa posunie začiatok a koniec prehrávania animácie.

view-timeline-inset podporuje jednu alebo dve hodnoty:

  • jedna hodnota: Nastaví offset z oboch strán.
  • dve hodnoty: Nastaví offset pre začiatok a koniec časovej osi viditeľnosti.

Kombinácia s animation-range:

view-timeline-inset sa dá kombinovať s animation-range pre ešte väčšiu kontrolu nad animáciou. Môžete tak nastaviť offset detekcie viditeľnosti a zároveň definovať presný bod, kedy sa má animácia spustiť.

Príklady:

.element {
  view-timeline: --my-view-timeline block;
  view-timeline-inset: -50px; /* Animácia začne o 50px skôr, než je element viditeľný */
  animation-timeline: --my-view-timeline;
  animation-range-start: entry;
}

.element {
  view-timeline: --my-view-timeline block;
  view-timeline-inset: 10px 20px; /* 10px na začiatku, 20px na konci */
  animation-timeline: --my-view-timeline;
}

Rozdiel medzi animation-range a view-timeline-inset:

  • animation-range definuje, v akom rozsahu časovej osi sa má animácia prehrávať. Je to ako keby ste nastavili začiatok a koniec filmu.
  • view-timeline-inset definuje, kedy sa element považuje za viditeľný, čo ovplyvňuje celú časovú os viditeľnosti. Je to ako keby ste posunuli kameru, aby ste videli element skôr alebo neskôr.

timeline-scope: Zdieľanie časových osí

timeline-scope umožňuje zdieľať časovú os medzi elementmi. Táto vlastnosť otvára nové možnosti pre vytváranie komplexných a synchronizovaných animácií. Predstavte si napríklad situáciu, kedy chcete animovať vlastnosti rodičovského elementu v závislosti na tom, ako sa scrolluje v jeho potomkovi. S timeline-scope je to možné!

Ako to funguje?

  1. Definujete časovú os (napríklad scroll-timeline) na potomkovi.
  2. Použijete timeline-scope na rodičovskom elemente a priradíte mu názov časovej osi potomka.
  3. Teraz môžete animovať vlastnosti rodičovského elementu s použitím časovej osi potomka!

Príklad:

.parent {
  timeline-scope: --scroll-timeline-child; /* Rodič zdieľa časovú os potomka */
  animation: scaleUp linear;
  animation-timeline: --scroll-timeline-child;
}

.child {
  scroll-timeline: --scroll-timeline-child y; /* Potomok definuje časovú os */
}

@keyframes scaleUp {
  to {
    scale: 1.2;
  }
}

V tomto príklade sa rodičovský element zväčší (scaleUp animácia) v závislosti na tom, ako sa scrolluje v potomkovi.

Kedy použiť timeline-scope?

  • Ak chcete animovať vlastnosti rodičovského elementu na základe aktivity v potomkovi (napríklad scrollovanie, viditeľnosť).
  • Ak chcete vytvárať komplexné a synchronizované animácie medzi viacerými elementmi.
  • Pri vytváraní layoutov, kde je potrebná synchronizácia animácií medzi rôznymi časťami stránky.

Záver

CSS scroll-driven animácie predstavujú mocný nástroj pre tvorbu moderných a interaktívnych webových stránok. S novými vlastnosťami, ako sú scroll-timeline, view-timeline, animation-range a timeline-scope, môžete vytvárať úžasné animácie bez nutnosti používať JavaScript. Vyskúšajte si ich a posuňte svoje webové projekty na novú úroveň!

Poznámka pre používateľov Firefoxu

Pre správne fungovanie scroll-driven animácií je momentálne potrebné doplniť do definície animovaného elementu aj vlastnosť animation-duration s hodnotou napr. 1ms. Inak animácie nemusia fungovať správne.

Poznámka pre používateľov Safari

Zatiaľ nie je podporované.

Zdieľať článok