Tři roky po Chrome 115, který scroll-driven animations zpřístupnil produkci, je situace v polovině roku 2026 zásadně jiná. Safari je má od verze 18, Chromium dlouho, a Firefox za poslední rok dotáhl podporu na úroveň, kdy ji lze v komerčním projektu reálně použít bez obrovských fallbacků. Otázka už nezní „jde to“. Zní „kdy se vyplatí ještě tahat 60 kB GSAP“.
Co scroll-driven animations vlastně jsou
Specifikace Scroll-driven Animations Module Level 1 zavedla dvě CSS funkce, které umí napojit @keyframes na pozici scrollování bez jediného řádku JS na hlavním vlákně. První je scroll(), která využívá scroll progress timeline kontejneru. Druhá je view(), která sleduje, jak konkrétní element prochází scrollportem — tedy přesně to, na co se v ScrollTriggeru používá konfigurace start a end.
V praxi vypadá horizontální progress bar napojený na scroll takhle:
- ▸@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
- ▸.progress { animation: grow linear; animation-timeline: scroll(root block); transform-origin: left; }
- ▸Žádný JS, žádný requestAnimationFrame, žádný layout thrash při rychlém scrollu na mobilu.
Funkce view() jde dál — umí pojmenované timeline a inset hodnoty, takže lze nastavit, kdy přesně má animace začít vůči vstupu elementu do viewportu. Efekt „text se odhalí, když dorazí do středu obrazovky“ je dnes 12 řádků CSS.
„Days when complex scroll-driven interactions required massive JavaScript libraries are largely behind us. Native CSS now provides the tools necessary to create high-performance, hardware-accelerated animations that respond directly to scroll progress.“
Kdy ještě sáhnout po GSAP
GSAP 3.15 se ve verzi pro Webflow akvizici (2024) stal kompletně zdarma včetně ScrollTriggeru, ScrollSmootheru a SplitTextu. Důvod ho použít není cena, ale konkrétní featury, které CSS prostě nemá:
- ▸Pinning — přilepení sekce na viewport, dokud animace dojede do konce. CSS view() to neumí, position: sticky není to samé.
- ▸Časová orchestrace více elementů na jedné timeline s relativním stagger ofsetem.
- ▸MotionPath — animace po SVG křivce.
- ▸FLIP a Flip plugin pro layout změny mezi DOM stavy — kombinace s View Transitions API je mocná.
- ▸Komplexní easing funkce a CustomEase, které @keyframes neumožňují bez verbose definice.
Hybridní přístup
V praxi v posledních projektech používáme rozdělení: scroll progress a view-based reveal animace v čistém CSS, pinning a komplexní timeline v GSAP. Ušetří to v průměru 40–50 % JS bundle proti scénáři, kdy je GSAP odpovědný za úplně všechno. Měřeno na třech reálných agenturních projektech v Q1 2026.
Accessibility není volitelná
WCAG 2.3.3 a obecná povinnost respektovat prefers-reduced-motion platí pro nativní CSS animace stejně jako pro GSAP. Výhoda CSS je, že stačí jeden media query — není třeba volat killAll() nebo iterovat instance:
- ▸@media (prefers-reduced-motion: reduce) { * { animation-timeline: none !important; } }
- ▸U GSAP musí být ekvivalentní guard ve všech ScrollTrigger.create() voláních.
- ▸matchMedia('(prefers-reduced-motion: reduce)').matches je čitelnější než matchMedia.addListener.
Pozor na fallback: Firefox podporuje scroll-driven animations s vyžadovaným non-zero animation-duration. Pokud spoléháte na default, animace se v Firefoxu neaplikuje. Vždy explicitně: animation: name 1ms linear; animation-timeline: scroll();
Co s tím
Pro nové projekty v polovině roku 2026 je default volba opačná, než byla v 2023. Začít čistým CSS, sáhnout po GSAP až tam, kde scroll() a view() nestačí. U existujících projektů má smysl auditovat ScrollTrigger volání — jednoduché parallax, progress bary a fade-in při scrollu jdou nahradit nativně bez měřitelné regrese a s vyšší výkonností na low-end mobilech, kde se hlavní vlákno běžně dusí.