Scroll-driven анимации: CSS вместо JavaScript в 2026

kirilljsx

Забудьте о сложных библиотеках для анимаций по скроллу. Современный CSS позволяет привязать любую анимацию к прокрутке страницы без единой строки JavaScript. Это работает прямо в браузере, быстро и с минимальными затратами на производительность.

Технология scroll-driven animations уже поддерживается в Chrome, и количество браузеров растёт. Вместо вычисления offset-ов и обработки событий scroll весь процесс переходит в rendering engine браузера. Результат - плавная синхронизация, которая не забирает ресурсы из основного потока.

Что такое scroll-driven animations и как они работают

В основе лежит простая идея: прогресс анимации зависит не от времени, а от позиции прокрутки. Чем дальше пользователь проскроллил - тем дальше продвинулась анимация. Если он остановился - анимация паузируется. Если прокрутил назад - анимация идёт в обратном направлении.

Технология строится на двух ключевых концепциях. Первая - это scroll timeline, который двигается вместе с прокруткой страницы или контейнера. Вторая - это animation timeline, обычная CSS-анимация, но её прогресс контролируется не секундами, а положением скролла. В результате получается то, что раньше требовало JavaScript с расчётом позиций и обработкой событий.

Основной инструмент для работы с этой технологией - свойство animation-timeline. Оно сообщает браузеру: привяжи мою анимацию не к времени, а к прокрутке. Браузер сам управляет синхронизацией, код остаётся декларативным и понятным.

scroll(root block) - привязка к вертикальной прокрутке всей страницы
scroll(self block) - привязка к прокрутке самого контейнера элемента
scroll(nearest inline) - поиск ближайшего скроллируемого предка с горизонтальной прокруткой
Именованная timeline - ссылка на заранее созданную временную шкалу через view-timeline-name

Практические примеры и типичные сценарии

Основной и самый популярный сценарий - это parallax эффект. Фоновое изображение движется медленнее, чем основной контент, создавая ощущение глубины. С scroll-driven animations это становится одной простой CSS-конструкцией без каких-либо скриптов.

Ещё один распространённый пример - индикатор прогресса чтения. Полоса в верхней части страницы, которая заполняется по мере того, как пользователь скроллит вниз. Раньше это требовало обработки события scroll и вычисления процента. Теперь браузер делает это за вас.

Третий сценарий - reveal эффекты. Элементы появляются, увеличиваются, меняют цвет по мере входа в область видимости. Это работает без Intersection Observer и без слежения за позициями на странице.

Вот как выглядит базовый код для parallax эффекта:

.parallax-bg {
  animation: parallax linear;
  animation-timeline: scroll();
}

@keyframes parallax {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-200px);
  }
}

Для более сложных случаев, когда нужно анимировать элемент в зависимости от того, видим ли мы его на экране, используется свойство view-timeline-name и функция view():

.target {
  width: 80px;
  height: 80px;
  background: green;
  view-timeline-name: --target-timeline;
  view-timeline-axis: block;
  animation: scaleUp 1s linear;
  animation-timeline: --target-timeline;
}

@keyframes scaleUp {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(2);
  }
}

Типичные сценарии использования:

Анимация фоновых изображений при скролле (параллакс, сдвиг, изменение масштаба)
Изменение цвета элементов на основе прокрутки
Появление и исчезновение блоков контента
Прогресс-бары и индикаторы выполнения
Вращение и трансформация декоративных элементов
Fade-in эффекты при входе элемента в viewport

Производительность и преимущества перед JavaScript

Главное преимущество - производительность. Весь процесс обработки анимации происходит внутри rendering engine браузера, вне основного потока JavaScript. Это означает, что даже если ваш скрипт загружен и выполняется медленно, анимации будут идти гладко.

Второе преимущество - код становится проще и меньше. Вместо написания обработчиков событий scroll, вычисления позиций элементов, обновления стилей через JavaScript, вы просто определяете анимацию в CSS. По оценкам разработчиков, замена scroll-анимационных библиотек на нативный CSS позволяет удалить 50-100 килобайт кода из проектов.

Третье - масштабируемость. Если на странице много элементов с анимациями, JavaScript-решение может начать тормозить, особенно на мобильных устройствах. Нативное CSS-решение масштабируется лучше, потому что браузер оптимизирует обработку на уровне, недоступном для скриптов.

Сравнение подходов:

Характеристика	JavaScript + Event Listener	CSS Scroll-Driven
Производительность	Может быть низкая при большом количестве элементов	Высокая, обработка в браузерском движке
Размер кода	50-100 кБ (библиотеки типа AOS)	0 кБ, встроено в браузер
Синхронизация	Может быть запаздывание	Идеальная синхронизация с прокруткой
Обработка основного потока	Занимает ресурсы	Работает вне основного потока
Сложность реализации	Средняя-высокая	Низкая
Поддержка во всех браузерах	Да	Только современные браузеры

Поддержка браузерами и прогрессивное улучшение

В настоящий момент scroll-driven animations поддерживаются хорошо в браузерах на основе Chromium (Chrome, Edge, Opera). Firefox и Safari пока не имеют полной поддержки, хотя разработчики обоих браузеров работают над этим.

Это не означает, что нельзя использовать технологию уже сейчас. Нужно просто применить стратегию прогрессивного улучшения. Код структурируется так, чтобы основной контент был доступен и функционален без анимаций. Для браузеров, которые поддерживают scroll-driven animations, добавляется визуальное улучшение.

Для проверки поддержки используется свойство @supports:

.fade-in {
  opacity: 1;
}

@supports (animation-timeline: scroll()) {
  .fade-in {
    opacity: 0;
    animation: fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

В этом коде элемент по умолчанию видим (opacity: 1). Если браузер поддерживает scroll-driven animations, применяется дополнительная CSS-конструкция, которая делает элемент невидимым и затем анимирует его появление при скролле.

Текущий статус поддержки:

Chrome 116+ - полная поддержка
Edge 116+ - полная поддержка
Opera 102+ - полная поддержка
Firefox - в разработке
Safari - в разработке

Замена библиотек и плата выполняет JavaScript

Если в вашем проекте используются библиотеки вроде AOS (Animate On Scroll), ScrollReveal или Locomotive Scroll для простых анимаций, вы можете их удалить и переписать функциональность на CSS. Это касается примерно 80% типичных сценариев использования этих библиотек.

Для сложных случаев, когда нужны одновременные анимации нескольких элементов с разными timeline-ами или когда требуется сложная логика управления (например, GSAP), JavaScript-библиотеки всё ещё могут быть полезны. Но для базовых fade-in, slide, scale эффектов scroll-driven animations справляются идеально.

Оптимальный путь миграции:

Проанализируй использование scroll-анимационных библиотек в проекте
Выдели простые эффекты (reveal, parallax, progress bar) для переписания на CSS
Для каждого случая напиши @supports обёртку с fallback
Проверь во всех целевых браузерах
Удали неиспользуемые библиотеки из зависимостей

Продвинутые техники и тонкости

Безусловно, базовых примеров недостаточно для реальных проектов. Есть несколько техник, которые помогут создать более сложные и интересные эффекты.

Свойство animation-range позволяет указать, в каких точках скролла начинается и заканчивается анимация. Например, можно сделать так, чтобы анимация стартовала, когда элемент находится на 25% от viewport, и заканчивалась, когда элемент уходит на 75% вверх.

Другой полезный инструмент - это комбинирование нескольких animation-timeline на одном элементе. Можно привязать разные части CSS-анимации к разным timeline-ам, создавая сложные составные эффекты.

Есть также новое свойство animation-trigger, которое позволяет не просто привязать анимацию к скроллу, но и задать условия её запуска. Например, можно сказать: анимируй элемент только если он находится в определённом диапазоне видимости.

Продвинутые техники для специфических случаев:

Использование view() вместо scroll() для анимирования элементов при входе в viewport
Комбинирование animation-range с entry и exit ключевыми словами для точного контроля
Применение animation-timeline: view() к pseudo-элементам (::before, ::after)
Стекирование нескольких анимаций с разными timeline-ами для создания сложных эффектов
Использование CSS-переменных в keyframes для параметризации анимаций

О чём стоит помнить на практике

Scroll-driven animations - это мощный инструмент, но не панацея. При использовании стоит помнить о нескольких важных моментах. Во-первых, это всё ещё развивающаяся технология, и по мере обновления браузеров поведение может немного измениться. Во-вторых, нужно тестировать на разных устройствах - мобильные браузеры могут вести себя иначе, чем десктопные.

Также важно не переусложнять. Каждая анимация - это дополнительная работа для браузера. Если на странице слишком много параллельно идущих анимаций, даже нативное CSS-решение может начать тормозить, особенно на слабых мобильных устройствах. Всегда думайте о том, действительно ли эта анимация улучшает пользовательский опыт или просто отвлекает.