Знакомый сценарий: sticky-блок с проверкой подписи. Внутри progress-бар, который должен заполняться, пока юзер скроллит секцию. Раньше — только IntersectionObserver или кастомные скролл-слушатели, которые дёргают layout. Теперь можно без JS на compositor-потоке.
Свойство
animation-timeline привязывает анимацию к прогрессу скролла родителя. Вместо времени — проскролленные пиксели. Для sticky это работает напрямую: блок висит, индикатор растёт, пока контент под ним прокручивается. Типичная ошибка — думать, что нужен JS для каждого пикселя прогресса.Как работает
@keyframes fill {
from { width: 0%; }
to { width: 100%; }
}
.sticky-indicator {
position: sticky;
top: 0;
height: 4px;
background: lightgray;
}
.sticky-indicator::after {
content: '';
display: block;
height: 100%;
background: #4caf50;
animation: fill 1s linear;
animation-timeline: scroll(block nearest);
}Разбор:
scroll(block nearest) привязывается к ближайшему скроллящемуся предку по блочной оси. ::after меняет ширину пропорционально скроллу. Никаких событий скролла и throttle.Почему это удобно
* Анимация в compositor-потоке, без рывков на main thread.
* Работает внутри любого sticky: хедер, сайдбар, панель подписи.
* Не требует инициализации или подписки на DOM — предсказуемо с первого кадра.
Ограничения и trade-offs
Пока только Chromium (103+). Firefox за флагом
layout.css.scroll-driven-animations.enabled. Safari в процессе. Если нужно несколько индикаторов на разных контейнерах — каждый получает свою timeline, что исключает гонки данных.Production-кейсы: лендинги с длинным описанием подписи, страницы документации со sticky-оглавлением. Везде, где раньше ставил IntersectionObserver и вручную обновлял ширину. Предупреждение: не используй
scroll(block nearest) без overflow-родителя — timeline не сработает, и анимация останется на старте.Вывод:
Scroll-driven animations — это не хайп, а способ выкинуть JS из рендеринга для sticky-индикаторов, давая стабильный layout без дёрганий на мобильных устройствах.
