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

Анімація появи елементів під час скролу перестала бути прикрасою. Вона керує увагою, задає ритм прокручування та робить 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 хвилин. Відчуйте різницю між статичним лендингом і сторінкою, де блоки оживають під час скролу. Напишіть у коментарях, який підхід обрали та чому.