CSS scroll-driven animations позволяют привязать любую анимацию к состоянию прокрутки — без JavaScript, без вычислений offset, без боли. Раньше для анимаций по скроллу приходилось вспоминать, как работают все эти offsetTop, scrollY, getBoundingClientRect. Потом — математика, потом — кроссбраузерность. Теперь достаточно одного CSS-свойства: animation-timeline: scroll(). Попробуйте в демке. В новом выпуске CSS Боли разбираем, как это работает. Функция scroll() с параметрами scroller и axis, тонкости с containing block и позиционированием, почему nearest ведёт себя не так очевидно. Это первая часть серии — знакомство с анонимной временной шкалой прокрутки. В следующих выпусках — ещё больше. Демонстрации: 🔜 Прогрессбар со scroll-анимацией 🔜 Абсолютное позиционирование 🐭 Смотреть на YouTube 🐹 Смотреть в VK