Свойства scroll-timeline: создаем анимации при скролле без JavaScript

Слушай, помнишь те времена, когда заказчик приходил с референсом крутого сайта и просил: «Хочу, чтобы при скролле картинки плавно вылетали, а индикатор чтения сверху заполнялся»? В этот момент у любого фронтенд-разработчика начинал дергаться глаз. Мы понимали, что сейчас придется либо вешать тяжеленный слушатель на событие скролла, либо тащить в проект очередную библиотеку вроде GSAP или ScrollMagic.

Но на дворе уже 2026 год, и пора признать: эпоха «скролл-костылей» на JavaScript официально закончилась. Сегодня мы можем привязать анимацию к положению прокрутки прямо в CSS, используя scroll-timeline. Это работает плавнее, не забивает основной поток (Main Thread) и пишется в три строчки кода.

Как мы страдали раньше

Раньше любая анимация, зависящая от скролла, была настоящей болью для производительности. Мы вешали обработчик window.addEventListener('scroll', ...), который стрелял по сто раз в секунду. Чтобы браузер не «умер», нам приходилось внедрять throttle или debounce, высчитывать getBoundingClientRect() и возиться с requestAnimationFrame.

Даже если ты делал простую задачу, например, создание идеальной прилипающей (sticky) шапки сайта, которая должна менять прозрачность при прокрутке, тебе все равно приходилось лезть в скрипты. Результат часто «дергался» на мобилках из-за задержек синхронизации между потоком прокрутки и потоком выполнения JS. Забудь об этом как о страшном сне.

Как делать правильно в 2026 году

Современный подход строится на концепции Scroll-Driven Animations. Теперь у нас есть временная шкала (Timeline), которая привязана не ко времени (секундам), а к прогрессу прокрутки контейнера.

Основной инструмент здесь — это свойство scroll-timeline. Оно позволяет дать имя шкале прокрутки конкретного контейнера и указать ось (vertical или horizontal). Если же тебе нужно просто привязаться к ближайшему родителю-скроллу, можно использовать короткую функцию scroll() прямо в свойстве animation-timeline.

Кстати, если ты уже прокачался в оформлении интерфейса и изучил стилизацию скроллбара во всех современных браузерах, то Scroll-Driven Animations станут вишенкой на торте твоего UX.

Готовый сниппет кода

Давай создадим классический индикатор прогресса чтения статьи, который заполняется по мере того, как пользователь листает страницу вниз. Без единой строчки JS!


/* 1. Определяем анимацию как обычно */
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 2. Стилизуем индикатор */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: #007bff;
  transform-origin: 0 50%;
  z-index: 1000;

  /* 3. Магия: привязываем анимацию к скроллу всей страницы */
  animation-name: grow-progress;
  animation-timing-function: linear; /* Обязательно linear для предсказуемости */
  animation-timeline: scroll(root block); /* root — скролл всей страницы, block — вертикальная ось */
}

Разберем, что произошло: animation-timeline: scroll(root block) говорит браузеру: «Возьми прогресс вертикальной прокрутки всей страницы и используй его вместо секунд для этой анимации». Когда пользователь в самом верху — прогресс 0%, когда в самом низу — 100%.

Частая ошибка новичков

Самый частый факап — забыть про animation-fill-mode или неправильно указать animation-timing-function. По умолчанию анимация в CSS имеет функцию ease, что делает движение по скроллу «неравномерным». Для скролл-анимаций всегда ставь animation-timing-function: linear;, иначе возникнет ощущение, что анимация «лагает» или живет своей жизнью относительно пальца пользователя.

Также помни: если ты задаешь scroll-timeline-name на контейнере, этот контейнер должен иметь явный скролл (например, overflow-y: auto). Если контейнер не скроллится, анимация просто не запустится, и ты будешь полчаса дебажить пустой экран.

🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!