Uno schermo vuoto è la prima cosa che vede un visitatore mentre il sito si carica. Ma potrebbe invece vedere blocchi di contenuto che appaiono in modo fluido.

Le animazioni attivate dallo scroll non sono più solo decorative. Guidano l'attenzione, scandiscono il ritmo di scorrimento e danno vita alle landing page. Ma scegliere uno strumento a caso significa rischiare problemi di performance e rompere i layout su mobile.

Ecco tre approcci funzionanti per le animazioni allo scroll nel 2026, dal JavaScript nativo senza alcuna dipendenza fino a librerie già pronte con decine di effetti. Come bonus, analizziamo il difetto fatale di Revealator, un plugin che un tempo era popolare ma è rimasto fermo al 2020.

💡 Panoramica rapida:

• Capirai come l'Intersection Observer API permette animazioni di rivelazione senza jQuery o librerie di terze parti
• Esplorerai AOS, la libreria più popolare (28.000 stelle su GitHub), le sue classi, attributi e la configurazione in 5 minuti
• Confronterai ScrollReveal e AOS per curva di apprendimento, peso del bundle e flessibilità
• Scoprirai perché Revealator non può più essere usato nei nuovi progetti
• Avrai una tabella comparativa e una scelta pronta per il tuo compito

Intersection Observer API, un approccio nativo senza dipendenze

Un'API del browser che traccia quando un elemento interseca il viewport. Niente jQuery, niente polyfill per i browser moderni. Il supporto raggiunge oltre il 97% del pubblico globale secondo Can I Use.

Il principio è semplice: crei un observer, lo colleghi agli elementi target e ricevi un callback quando un elemento entra nell'area visibile. In quel momento, aggiungi una classe CSS con l'animazione.

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

Il codice sopra traccia tutti gli elementi con la classe .reveal. Quando un elemento entra nel viewport (il valore threshold è impostato nel codice), l'animazione si attiva. Il CSS lo definisci tu, qualsiasi @keyframes tu preferisca.

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
}

Vantaggi dell'approccio: zero dipendenze, nessun aumento del bundle, controllo totale su trigger e animazioni CSS. Adatto a progetti dove ogni kilobyte conta e le performance su dispositivi deboli sono critiche.

Svantaggi: devi scrivere il tuo wrapper per riattivazioni, ritardi e animazioni a cascata. Le librerie lo fanno in modo nativo.

Per un progetto in JS puro con requisiti di velocità elevati, scegli Intersection Observer. Se non vuoi scrivere il wrapper a mano, dai un'occhiata ad AOS.

AOS (Animate on Scroll), una libreria con 28.000 stelle

AOS è lo standard de facto per le animazioni allo scroll nello sviluppo web. La repository GitHub ha oltre 28.000 stelle e 2.600 fork. La libreria è così semplice che la configurazione richiede esattamente due minuti.

Collega CSS e JS, via CDN o 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>

Fatto questo, qualsiasi elemento con un attributo data-aos prende vita allo scroll:

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

Ci sono oltre 30 effetti integrati: fade, flip, zoom, slide in tutte le direzioni. Puoi controllare durata (data-aos-duration), ritardo (data-aos-delay), offset (data-aos-offset) e persino l'ancoraggio (data-aos-anchor), quando l'animazione di un elemento è legata alla comparsa di un altro.

Vantaggi:

• Configurazione in 5 minuti, tre righe di codice e attributi data
• Oltre 30 funzioni di easing integrate, animazioni a cascata e con ancoraggio
• Repository attiva, i bug vengono chiusi, le issue non sono in arretrato

Svantaggi:

• Dipendenza dall'autore: il progetto è vivo ma gli aggiornamenti sono poco frequenti (l'ultima release è la 2.3.1)
• Approccio puramente CSS: nessuna logica programmatica (animazioni condizionali, parametri dinamici)

Usa AOS quando: hai bisogno di velocità di sviluppo, oltre 30 effetti già pronti, animazioni su una tipica landing page con una dozzina di blocchi.

ScrollReveal, un'alternativa JavaScript-first

ScrollReveal è una libreria della stessa categoria con oltre 22.000 stelle su GitHub. A differenza di AOS, si controlla da JavaScript, non con attributi data.

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

Differenza chiave rispetto ad AOS: API completa in JS. Puoi modificare i parametri di animazione in modo programmatico, caricarli dal server, collegarli a condizioni. Per logiche complesse, questo risolve il problema.

Vantaggi:

• Controllo JS: puoi gestire l'animazione da qualsiasi punto del codice
• reset: true, animazione ripetuta quando si scorre in alto e poi di nuovo in basso
• Supporto per selettori CSS di qualsiasi complessità

Svantaggi:

• Curva di apprendimento leggermente più ripida di AOS, nessun approccio visivo con attributi data
• Meno funzioni di easing integrate

La scelta tra AOS e ScrollReveal si riduce a una cosa: attributi data o JavaScript. Per una landing tipica, scegli AOS. Per una SPA dove l'animazione fa parte della logica di business, scegli ScrollReveal.

Revealator: una nota storica

Revealator è un plugin jQuery di QODIO che nel 2016-2018 era una soluzione semplice per animare i blocchi: si aggiungono classi come revealator-fade, revealator-slideup e revealator-zoomout e gli elementi appaiono allo scroll. La pagina demo su jQueryScript funziona ancora, puoi vedere gli effetti.

Il problema è che la repository GitHub è stata archiviata ad aprile 2023 con la nota "DEPRECATED, non più attivamente mantenuta". L'ultimo commit significativo è di dicembre 2020. Il plugin richiede jQuery come dipendenza in un mondo dove il 97% dei siti non usa più jQuery per nuove funzionalità. Non c'è supporto, i bug non vengono corretti, le API moderne dei browser non sono utilizzate.

Non usare Revealator nei nuovi progetti. Se lo trovi in una vecchia codebase, migra a Intersection Observer o AOS. Il compito è lo stesso, ma performance e manutenibilità sono di un ordine di grandezza superiori.

Confronto degli approcci

Per una landing veloce, AOS è sufficiente. Per una SPA con controllo programmatico, ScrollReveal. Per un progetto con requisiti di performance stringenti e tolleranza zero alle dipendenze, Intersection Observer puro. Revealator è fuori gara.

Guarda l'analisi di 6 minuti di Kevin Powell, mostra l'animazione di rivelazione attivata dallo scroll con CSS puro e Intersection Observer, senza alcuna libreria.

⁉️🤔 Domande frequenti

Perché usare animazioni di rivelazione su una landing page, non rallentano il sito?

Un'animazione fatta bene non rallenta. Intersection Observer lavora in modo asincrono fuori dal thread principale, le animazioni CSS vengono renderizzate sulla GPU tramite transform e opacity, non si innesca alcun repaint. I problemi iniziano quando si animano width, height o left/top, questo fa scattare il layout. Librerie come AOS animano solo transform e opacity. La regola principale è non animare la geometria.

Si può usare AOS su un sito con un framework JS pesante, React o Vue?

Sì, ma con un'avvertenza: AOS scansiona il DOM all'inizializzazione e non vede gli elementi aggiunti in modo reattivo dopo AOS.init(). La soluzione è chiamare AOS.refresh() dopo il montaggio del componente. In React si usa useEffect, in Vue mounted. Per un'integrazione profonda con lo stato, ScrollReveal è più comodo perché è gestito interamente da JS.

In che modo Intersection Observer è migliore del vecchio approccio con gli eventi scroll di jQuery?

L'approccio jQuery aggancia un listener a scroll, l'evento si attiva decine di volte al secondo, ogni chiamata legge la geometria dell'elemento (innesca il reflow), il sito rallenta. Intersection Observer lavora in modo asincrono, il callback viene invocato una volta sola al cambiamento effettivo di visibilità. Su una pagina con 50 blocchi animati, la differenza di performance è di circa 40 volte a favore di Observer, secondo i test degli sviluppatori WebKit.

Cosa fare se l'animazione scatta su mobile?

Per prima cosa, verifica di animare solo transform e opacity. In secondo luogo, aggiungi will-change: transform, opacity all'elemento prima che l'animazione inizi e rimuovilo dopo. In terzo luogo, sui dispositivi deboli, riduci la duration a 200-300 ms: un'animazione veloce è percepita come più fluida di un'animazione lenta e scattosa. Su dispositivi con refresh rate dello schermo a 60 Hz, un'animazione inferiore a 300 ms non fa in tempo a stancare l'occhio.

Si può realizzare un'animazione di rivelazione senza JavaScript?

Parzialmente, tramite le CSS Scroll-driven Animations, ma la specifica è ancora sperimentale: funziona in Chrome 115+, ma non in Firefox o Safari. Per la produzione, serve Intersection Observer (nativo, senza librerie) o un polyfill. Per un sito in produzione nel 2026, l'opzione minima è Intersection Observer senza librerie: JS nativo, zero dipendenze, supporto completo.

Quale approccio scegliere per una landing page nel 2026

Se stai realizzando una landing tipica con 5-10 blocchi e una scadenza "ieri", AOS. Tre righe di codice, 30 effetti, difficile sbagliare.

Se è una SPA in React/Vue e l'animazione è legata alla logica di business, ScrollReveal. Il controllo programmatico ripaga i 5 minuti extra di configurazione.

Se il budget di performance è rigido e il designer ha disegnato animazioni uniche, Intersection Observer. Zero kilobyte, controllo totale sul CSS, massima velocità.

Non usare Revealator. Il plugin era valido nel 2016, ma il mondo è andato avanti.

Prova AOS su una pagina di test, npm install aos --save o CDN in 5 minuti. Senti la differenza tra una landing statica e una pagina dove i blocchi prendono vita allo scroll. Scrivi nei commenti quale approccio hai scelto e perché.