⁣CSS scroll-timeline и view-timeline: анимации по прокрутке без тонны JS и Intersection Observer

Раньше синхронизация анимаций с прокруткой требовала Intersection Observer или ручного расчёта прогресса через событие scroll — это приводило к лишним пересчётам layout, дерганью на мобильных устройствах и портянке кода в production-проектах: от лендингов до дизайн-систем и e-commerce интерфейсов. Частая ошибка верстальщиков — городить JS-решения для базовых эффектов, которые браузер давно может сделать сам.

Как работает scroll-timeline

Привязывает анимацию к прогрессу прокрутки контейнера. Например, прогресс-бар чтения статьи заполняется по мере скролла страницы — без единого обработчика.

@keyframes grow {
  from { width: 0%; }
  to { width: 100%; }
}

.scroll-container {
  scroll-timeline: --scroll-progress;
  overflow-y: scroll;
  height: 200vh;
}

.progress-bar {
  animation: grow 1s linear;
  animation-timeline: --scroll-progress;
}

Как работает view-timeline

Анимация привязана к видимости элемента во вьюпорте. Идеально для плавных появлений при скролле — например, для карточек в сетке.

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.element {
  view-timeline: --element-view;
  animation: fadeInUp 1s linear;
  animation-timeline: --element-view;
}

Практический совет: используй animation-fill-mode: backwards или начальное состояние в CSS, чтобы элемент не отображался до начала анимации. Типичная ошибка — забыть задать overflow-y: scroll для контейнера с scroll-timeline; без этого анимация не сработает.

Почему это круто

Никакого JS — ни requestAnimationFrame, ни обработчиков scroll. Браузер обрабатывает анимации на композитном потоке, без пересчёта DOM и лишних repaint. Гибко: можно комбинировать с обычными временными анимациями через animation-timeline: auto или задавать свои шкалы.

Ограничения

Поддержка пока в Chrome 115+, Edge 115+ и Safari Technology Preview. В Firefox — за флагом layout.css.scroll-anchoring.enabled. Для сложных сценариев с несколькими анимациями и разными триггерами потребуется больше планирования. Trade-off: если проект требует поддержки старых браузеров, придётся использовать fallback на JS.

Вывод: scroll-timeline и view-timeline — готовый production-инструмент для современных проектов, который экономит время и повышает стабильность интерфейса за счёт отказа от JS-оверхеда.