Scroll-driven animations: анимация от скролла без ScrollMagic
`animation-timeline: scroll()` и `view()` — параллакс и прогресс-бары на чистом CSS с учётом `prefers-reduced-motion`.
Scroll-driven animations привязывают прогресс keyframes к позиции скролла или к пересечению элемента с viewport — без тяжёлых scroll listeners в JS.
Декларативный подход снижает jank: браузер синхронизирует анимацию с композитором, если не анимируете layout-свойства.
- Scroll-driven animations — MDN — Модули и синтаксис.
- Animate on scroll — web.dev — Примеры scroll() и view().
Ограничения
Проверяйте поддержку в Baseline и держите статичный fallback при `prefers-reduced-motion: reduce`.
Не заменяйте ими критичную навигацию: длинные лендинги с десятками timeline лучше упростить.