Пустой экран, первое, что видит посетитель, пока грузится сайт. А мог бы видеть плавно проявляющиеся блоки с контентом.

Анимация появления элементов при скролле перестала быть украшательством. Она управляет вниманием, задаёт ритм прокрутки и делает landing page живым. Но выбирать инструмент наугад, значит рисковать производительностью и ломать вёрстку на мобильных.

Ниже, три работающих подхода к scroll-анимации в 2026 году: от нативного JavaScript без единой зависимости до готовых библиотек с десятками эффектов. Бонусом разбираем фатальную ошибку Revealator, плагина, который когда-то был популярен, но остался в 2020-м.

💡 Быстрый обзор:

• Поймёте, как Intersection Observer API делает анимацию появления без jQuery и сторонних библиотек
• Разберёте AOS, самую популярную библиотеку (28 000 звёзд на GitHub), её классы, атрибуты и настройку за 5 минут
• Сравните ScrollReveal и AOS по кривой обучения, размеру бандла и гибкости
• Узнаете, почему Revealator больше нельзя использовать на новых проектах
• Получите таблицу сравнения и готовый выбор под свою задачу

Intersection Observer API, нативный подход без зависимостей

Браузерное API, которое отслеживает пересечение элемента с областью просмотра. Никаких jQuery, никаких полифилов для современных браузеров. Поддержка, 97%+ глобальной аудитории по данным Can I Use.

Принцип простой: создаёте observer, вешаете его на целевые элементы и получаете callback, когда элемент входит в зону видимости. В этот момент добавляете CSS-класс с анимацией.

1
const observer = new IntersectionObserver((entries) => {
2
  entries.forEach(entry => {
3
    if (entry.isIntersecting) {
4
      entry.target.classList.add('visible');
5
    }
6
  });
7
}, { threshold: 0.1 });
8
 
9
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

Код выше отслеживает все элементы с классом .reveal. Когда элемент попадает в окно (значение threshold задано в коде), срабатывает анимация. CSS для неё определяете сами, любые @keyframes на ваш вкус.

1
.reveal {
2
  opacity: 0;
3
  transform: translateY(30px);
4
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
5
}
6
 
7
.reveal.visible {
8
  opacity: 1;
9
  transform: translateY(0);
10
}

Плюсы подхода: ноль зависимостей, бандл не растёт, полный контроль над триггерами и CSS-анимацией. Подходит для проектов, где важны каждый килобайт и производительность на слабых устройствах.

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

Проект на чистом JS с высокими требованиями к скорости, берите Intersection Observer. Не хотите писать обвязку вручную, смотрите AOS.

AOS (Animate on Scroll), библиотека с 28 000 звёзд

AOS, де-факто стандарт для scroll-анимаций в веб-разработке. Репозиторий на GitHub держит 28 000+ звёзд и 2 600 форков. Библиотека простая настолько, что настройка занимает ровно две минуты.

Подключаете CSS и JS, через CDN или npm:

1
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
2
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
3
<script>AOS.init();</script>

После этого любой элемент с data-aos-атрибутом оживает при скролле:

1
<div data-aos="fade-up">Этот блок выплывет снизу</div>
2
<div data-aos="zoom-in" data-aos-delay="300">Этот — с задержкой 300 мс</div>

Встроенных эффектов больше 30: fade, flip, zoom, slide во всех направлениях. Управляете продолжительностью (data-aos-duration), задержкой (data-aos-delay), смещением (data-aos-offset) и даже якорем (data-aos-anchor), когда анимация одного элемента привязана к появлению другого.

Плюсы:

• Настройка за 5 минут, три строчки кода и data-атрибуты
• 30+ встроенных easing-функций, каскадные и якорные анимации
• Активный репозиторий, баги закрываются, issues, 0 просроченных

Минусы:

• Зависимость от автора: проект жив, но обновления нечастые (последний релиз, 2.3.1)
• Чистый CSS-подход: программной логики (условные анимации, динамические параметры) нет

Используйте AOS когда: нужна скорость разработки, 30+ эффектов из коробки, анимация на типовом landing page с десятком блоков.

ScrollReveal, JavaScript-first альтернатива

ScrollReveal, библиотека того же класса с 22 000+ звёзд на GitHub. В отличие от AOS, управляется из JavaScript, а не data-атрибутами.

1
ScrollReveal().reveal('.block', {
2
  delay: 200,
3
  distance: '50px',
4
  origin: 'bottom',
5
  duration: 600,
6
  reset: true
7
});

Ключевое отличие от AOS: полный API в JS. Меняете параметры анимации программно, подгружаете их с сервера, биндите на условия. Для сложной логики это решает.

Плюсы:

• JS-управление: анимацией можно рулить из любого места кода
• reset: true, повторная анимация при скролле вверх и обратно вниз
• Поддержка CSS-селекторов любой сложности

Минусы:

• Кривая обучения чуть выше, чем у AOS, нет визуального data-атрибутного подхода
• Меньше встроенных easing-функций

Выбор между AOS и ScrollReveal сводится к одному: data-атрибуты или JavaScript. Для типового лендинга берите AOS. Для SPA, где анимация, часть бизнес-логики, берите ScrollReveal.

Revealator: историческая справка

Revealator, jQuery-плагин от QODIO, который в 2016-2018 годах был простым решением для анимации блоков: вешаете классы вроде revealator-fade, revealator-slideup и revealator-zoomout, и элементы появляются при скролле. Демо-страница на jQueryScript до сих пор работает, можно посмотреть эффекты.

Проблема в том, что репозиторий на GitHub заархивирован в апреле 2023 года с пометкой «DEPRECATED, no longer actively maintained». Последний meaningful-коммит, декабрь 2020. Плагин тянет jQuery как зависимость в мире, где 97% сайтов уже не используют jQuery для новых фич. Поддержки нет, баги не чинятся, современные браузерные API не используются.

Не используйте Revealator на новых проектах. Если встретили его в старой кодовой базе, мигрируйте на Intersection Observer или AOS. Задача та же, а производительность и поддерживаемость, на порядок выше.

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

Для быстрого лендинга хватит AOS. Для SPA с программным управлением, ScrollReveal. Для проекта с жёсткими требованиями к производительности и нулевым tolerance к зависимостям, чистый Intersection Observer. Revealator не в гонке.

Посмотрите 6-минутный разбор от Kevin Powell, он показывает анимацию появления при скролле на чистом CSS и Intersection Observer, без единой библиотеки.

⁉️🤔 Частые вопросы

Зачем анимация появления на landing page, это же замедляет сайт?

Правильно сделанная анимация не замедляет. Intersection Observer работает асинхронно вне main thread, CSS-анимации рендерятся на GPU через transform и opacity, repaint не вызывается. Проблемы начинаются когда анимируют width, height или left/top, это дёргает layout. Библиотеки вроде AOS анимируют только transform и opacity. Главное правило, не анимировать геометрию.

Можно ли использовать AOS на сайте с тяжёлым JS-фреймворком, React, Vue?

Можно, но с нюансом: AOS сканирует DOM при инициализации и не видит элементы, добавленные реактивно после AOS.init(). Решение, вызвать AOS.refresh() после монтирования компонента. В React это useEffect, в Vue, mounted. Для глубокой интеграции со стейтом удобнее ScrollReveal, он управляется чисто из JS.

Чем Intersection Observer лучше старого подхода с jQuery scroll-событием?

jQuery-подход вешает слушатель на scroll, событие срабатывает десятки раз в секунду, каждый вызов читает геометрию элементов (вызывает reflow), сайт тормозит. Intersection Observer работает асинхронно, callback вызывается один раз при реальном изменении видимости. На странице с 50 анимированными блоками разница в производительности, примерно в 40 раз в пользу Observer, по тестам разработчиков WebKit.

Что делать если анимация дёргается на мобильных?

Первое, проверьте, что анимируете только transform и opacity. Второе, добавьте will-change: transform, opacity элементу до начала анимации и уберите после. Третье, на слабых устройствах уменьшите duration до 200-300 мс: быстрая анимация воспринимается плавнее, чем дёрганая медленная. На устройствах с частотой экрана 60 Гц анимация короче 300 мс не успевает надоесть глазу.

Можно ли сделать анимацию появления без JavaScript вообще?

Частично, через CSS Scroll-driven Animations, но спецификация пока экспериментальная: работает в Chrome 115+, но не в Firefox и Safari. Для продакшена нужен либо Intersection Observer (нативный, без библиотек), либо полифил. Для боевого сайта в 2026 году минимальный вариант, Intersection Observer без библиотек: нативный JS, ноль зависимостей, полная поддержка.

Какой подход выбрать для landing page в 2026 году

Если делаете типовой лендинг с 5-10 блоками и сроками «вчера», AOS. Три строчки кода, 30 эффектов, не ошибиться.

Если SPA на React/Vue и анимация завязана на бизнес-логику, ScrollReveal. Программный контроль искупает лишние 5 минут настройки.

Если performance budget жёсткий, а дизайнер нарисовал уникальные анимации, Intersection Observer. Ноль килобайт, полный контроль над CSS, максимальная скорость.

Revealator не берите. Плагин был хорош в 2016-м, но мир ушёл вперёд.

Попробуйте AOS на тестовой странице, npm install aos --save или CDN за 5 минут. Почувствуйте разницу между статичным лендингом и страницей, где блоки оживают при скролле. Напишите в комментариях, какой подход выбрали и почему.