Pusty ekran, pierwsze, co widzi odwiedzający, dopóki strona się ładuje. A mógłby widzieć bloki z treścią, które płynnie się pojawiają.

Animacja pojawiania się elementów podczas przewijania przestała być ozdobą. Kieruje uwagą, nadaje rytm przewijania i sprawia, że landing page staje się żywy. Ale wybierać narzędzie na chybił trafił, to ryzykować wydajnością i psuć układ na urządzeniach mobilnych.

Poniżej trzy działające podejścia do animacji przy przewijaniu w 2026 roku: od natywnego JavaScript bez żadnych zależności po gotowe biblioteki z dziesiątkami efektów. Jako bonus rozkładamy na czynniki pierwsze fatalny błąd Revealator, wtyczki, która kiedyś była popularna, ale została w 2020 roku.

💡 Szybki przegląd:

• Zrozumieją Państwo, jak Intersection Observer API realizuje animację pojawiania się bez jQuery i zewnętrznych bibliotek
• Rozbiorą Państwo AOS, najpopularniejszą bibliotekę (28 000 gwiazdek na GitHub), jej klasy, atrybuty i ustawienia w 5 minut
• Porównają Państwo ScrollReveal i AOS pod kątem krzywej uczenia się, rozmiaru paczki i elastyczności
• Dowiedzą się Państwo, dlaczego Revealator nie można już używać w nowych projektach
• Otrzymają Państwo tabelę porównawczą i gotowy wybór do swojego zadania

Intersection Observer API, natywne podejście bez zależności

Przeglądarkowe API, które śledzi przecięcie elementu z obszarem widoku. Żadnego jQuery, żadnych polyfilli dla nowoczesnych przeglądarek. Wsparcie na poziomie 97%+ globalnej publiczności według danych Can I Use.

Zasada jest prosta: tworzą Państwo observer, podpinają go do docelowych elementów i otrzymują callback, gdy element wchodzi w strefę widoczności. W tym momencie dodają Państwo klasę CSS z animacją.

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));

Powyższy kod śledzi wszystkie elementy z klasą .reveal. Gdy element trafia do okna (wartość threshold jest zdefiniowana w kodzie), uruchamia się animacja. CSS do niej definiują Państwo samodzielnie, dowolne @keyframes według uznania.

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
}

Plusy podejścia: zero zależności, paczka nie rośnie, pełna kontrola nad wyzwalaczami i animacją CSS. Pasuje do projektów, gdzie liczy się każdy kilobajt i wydajność na słabszych urządzeniach.

Minusy: trzeba pisać własną obudowę dla ponownego wyzwalania, opóźnień i animacji kaskadowych. Biblioteki robią to od ręki.

Projekt na czystym JS z wysokimi wymaganiami co do szybkości, proszę brać Intersection Observer. Nie chcą Państwo pisać obudowy ręcznie, proszę spojrzeć na AOS.

AOS (Animate on Scroll), biblioteka z 28 000 gwiazdek

AOS, de facto standard dla animacji przy przewijaniu w web developmencie. Repozytorium na GitHub ma 28 000+ gwiazdek i 2 600 forków. Biblioteka jest tak prosta, że konfiguracja zajmuje dokładnie dwie minuty.

Podłączają Państwo CSS i JS przez CDN lub 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>

Po tym każdy element z atrybutem data-aos ożywa podczas przewijania:

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

Wbudowanych efektów jest ponad 30: fade, flip, zoom, slide we wszystkich kierunkach. Sterują Państwo czasem trwania (data-aos-duration), opóźnieniem (data-aos-delay), przesunięciem (data-aos-offset), a nawet kotwicą (data-aos-anchor), gdy animacja jednego elementu jest powiązana z pojawieniem się innego.

Plusy:

• Konfiguracja w 5 minut, trzy linijki kodu i data-atrybuty
• 30+ wbudowanych funkcji easing, animacje kaskadowe i kotwicowe
• Aktywne repozytorium, bugi są zamykane, issues, 0 przeterminowanych

Minusy:

• Zależność od autora: projekt jest żywy, ale aktualizacje są rzadkie (ostatni release, 2.3.1)
• Czyste podejście CSS: nie ma logiki programowej (animacji warunkowych, parametrów dynamicznych)

Proszę używać AOS, gdy: potrzebna jest szybkość developmentu, 30+ efektów od ręki, animacja na typowym landing page'u z kilkunastoma blokami.

ScrollReveal, alternatywa JavaScript-first

ScrollReveal, biblioteka tej samej klasy z 22 000+ gwiazdek na GitHub. W przeciwieństwie do AOS, steruje się nią z JavaScriptu, a nie data-atrybutami.

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

Kluczowa różnica w stosunku do AOS: pełne API w JS. Zmieniają Państwo parametry animacji programowo, ładują je z serwera, wiążą z warunkami. Dla złożonej logiki to rozwiązuje sprawę.

Plusy:

• Sterowanie JS: animacją można zarządzać z dowolnego miejsca w kodzie
• reset: true, ponowna animacja przy przewijaniu w górę i z powrotem w dół
• Wsparcie dla selektorów CSS o dowolnej złożoności

Minusy:

• Krzywa uczenia się nieco wyższa niż w AOS, nie ma wizualnego podejścia data-atrybutowego
• Mniej wbudowanych funkcji easing

Wybór między AOS a ScrollReveal sprowadza się do jednego: data-atrybuty czy JavaScript. Do typowego landing page'a proszę brać AOS. Do SPA, gdzie animacja jest częścią logiki biznesowej, proszę brać ScrollReveal.

Revealator: rys historyczny

Revealator, wtyczka jQuery od QODIO, która w latach 2016-2018 była prostym rozwiązaniem do animacji bloków: wieszają Państwo klasy takie jak revealator-fade, revealator-slideup i revealator-zoomout, a elementy pojawiają się podczas przewijania. Strona demonstracyjna na jQueryScript wciąż działa, można zobaczyć efekty.

Problem w tym, że repozytorium na GitHub zostało zarchiwizowane w kwietniu 2023 roku z adnotacją „DEPRECATED, no longer actively maintained". Ostatni znaczący commit, grudzień 2020. Wtyczka ciągnie jQuery jako zależność w świecie, gdzie 97% stron już nie używa jQuery do nowych funkcji. Nie ma wsparcia, bugi nie są naprawiane, nowoczesne API przeglądarek nie są wykorzystywane.

Proszę nie używać Revealator w nowych projektach. Jeśli spotkali go Państwo w starej bazie kodu, proszę migrować na Intersection Observer lub AOS. Zadanie to samo, a wydajność i łatwość utrzymania są o rząd wielkości wyższe.

Porównanie podejść

Do szybkiego landing page'a wystarczy AOS. Do SPA ze sterowaniem programowym, ScrollReveal. Do projektu z twardymi wymaganiami wydajnościowymi i zerową tolerancją dla zależności, czysty Intersection Observer. Revealator odpada z wyścigu.

Proszę obejrzeć 6-minutowe omówienie od Kevina Powella, pokazuje on animację pojawiania się przy przewijaniu na czystym CSS i Intersection Observer, bez żadnej biblioteki.

⁉️🤔 Często zadawane pytania

Po co animacja pojawiania się na landing page'u, przecież to spowalnia stronę?

Poprawnie zrobiona animacja nie spowalnia. Intersection Observer działa asynchronicznie poza głównym wątkiem, animacje CSS są renderowane na GPU przez transform i opacity, nie jest wywoływane ponowne malowanie. Problemy zaczynają się, gdy animuje się width, height lub left/top, to szarpie układem. Biblioteki takie jak AOS animują tylko transform i opacity. Główna zasada, nie animować geometrii.

Czy można używać AOS na stronie z ciężkim frameworkiem JS, React, Vue?

Można, ale z niuansem: AOS skanuje DOM podczas inicjalizacji i nie widzi elementów dodanych reaktywnie po AOS.init(). Rozwiązanie, wywołać AOS.refresh() po zamontowaniu komponentu. W React to useEffect, w Vue, mounted. Do głębokiej integracji ze stanem wygodniejszy jest ScrollReveal, steruje się nim wyłącznie z JS.

Czym Intersection Observer jest lepszy od starego podejścia z jQuery i zdarzeniem scroll?

Podejście jQuery wiesza nasłuch na scroll, zdarzenie wyzwala się dziesiątki razy na sekundę, każde wywołanie odczytuje geometrię elementów (wywołuje reflow), strona zwalnia. Intersection Observer działa asynchronicznie, callback jest wywoływany raz przy rzeczywistej zmianie widoczności. Na stronie z 50 animowanymi blokami różnica w wydajności jest około 40 razy na korzyść Observera, według testów deweloperów WebKit.

Co robić, jeśli animacja zacina się na urządzeniach mobilnych?

Po pierwsze, proszę sprawdzić, czy animują Państwo tylko transform i opacity. Po drugie, proszę dodać will-change: transform, opacity do elementu przed rozpoczęciem animacji i usunąć po. Po trzecie, na słabszych urządzeniach proszę zmniejszyć duration do 200-300 ms: szybka animacja jest postrzegana jako płynniejsza niż szarpana wolna. Na urządzeniach z częstotliwością ekranu 60 Hz animacja krótsza niż 300 ms nie zdąży zmęczyć oka.

Czy można zrobić animację pojawiania się całkowicie bez JavaScriptu?

Częściowo, przez CSS Scroll-driven Animations, ale specyfikacja jest na razie eksperymentalna: działa w Chrome 115+, ale nie w Firefox i Safari. Do produkcji potrzebny jest albo Intersection Observer (natywny, bez bibliotek), albo polyfill. Dla strony produkcyjnej w 2026 roku minimalny wariant, Intersection Observer bez bibliotek: natywny JS, zero zależności, pełne wsparcie.

Jakie podejście wybrać dla landing page'a w 2026 roku

Jeśli robią Państwo typowy landing page z 5-10 blokami i terminami „na wczoraj", AOS. Trzy linijki kodu, 30 efektów, nie da się pomylić.

Jeśli SPA na React/Vue i animacja jest powiązana z logiką biznesową, ScrollReveal. Kontrola programowa usprawiedliwia dodatkowe 5 minut konfiguracji.

Jeśli budżet wydajnościowy jest napięty, a projektant narysował unikalne animacje, Intersection Observer. Zero kilobajtów, pełna kontrola nad CSS, maksymalna szybkość.

Revealator proszę nie brać. Wtyczka była dobra w 2016 roku, ale świat poszedł do przodu.

Proszę wypróbować AOS na stronie testowej, npm install aos --save lub CDN w 5 minut. Proszę poczuć różnicę między statycznym landing page'em a stroną, gdzie bloki ożywają podczas przewijania. Proszę napisać w komentarzach, które podejście wybrali Państwo i dlaczego.