Animazioni allo scroll: aggiungere movimento discreto alle pagine del tuo negozio

Aggiornato a giugno 2026, le indicazioni e il codice IntersectionObserver / reduced-motion qui sotto si applicano a PrestaShop 8 e 9 (Hummingbird e Classic). Le note sull’accessibilità riflettono l’Atto europeo sull’accessibilità ora in vigore.

Le animazioni allo scroll, elementi che compaiono con una dissolvenza, scorrono verso l’alto o si ingrandiscono mentre la pagina li raggiunge durante lo scorrimento, occupano una posizione delicata per chi gestisce un negozio. Su una pagina di brand o sulla homepage fanno percepire il negozio come curato e vivo; in una griglia prodotti o nel pagamento aggiungono quel mezzo secondo di “dov’è finito il mio pulsante?” che può costarti ordini. La competenza non sta nel sapere come aggiungerle. Sta nel sapere dove in un negozio PrestaShop si guadagnano il loro posto, dove erodono silenziosamente le conversioni e come inserirle senza trascinare verso il basso il punteggio PageSpeed. Questa guida parla proprio di questa scelta su un negozio PrestaShop: quali template, quali aree del back office e quale budget prestazionale devi rispettare.

Se il tuo vero obiettivo è far sopravvivere il codice front-end personalizzato agli aggiornamenti del tema, quello è un problema diverso (e importante): lo affrontiamo separatamente in CSS e JavaScript personalizzati in PrestaShop senza rompere gli aggiornamenti. Qui diamo per scontato che tu abbia deciso di voler aggiungere movimento e che debba farlo nel modo giusto.

Dove hanno senso le animazioni allo scroll, e dove ti costano ordini

PrestaShop è una piattaforma transazionale, non un sito portfolio. La regola onesta è questa: anima le pagine in cui un visitatore sta esplorando o lasciandosi convincere, mai quelle in cui sta acquistando o confrontando. Tradotto nei controller e nei template reali su cui interverrai:

Quindi che cosa significa per te? La tentazione è attivare una libreria “fade tutto” su tutto il tema e ammirarla dal desktop. Il compito di chi gestisce il negozio è l’opposto: limitare le animazioni solo alla homepage e ai template CMS, ed escludere esplicitamente i template in cui i clienti decidono e pagano. Una griglia categoria che esita prima di mostrare i prodotti non sembra premium: sembra rotta su una connessione lenta.

La prova di realtà su mobile

In molti negozi PrestaShop oltre la metà del traffico arriva da telefono, ed è proprio lì che le animazioni allo scroll peggiorano. Ciò che su un MacBook è fluido, su un Android di tre anni fa può diventare scattoso. Testa su hardware reale di fascia media, non sulla tua macchina di sviluppo, e considera il mobile come un motivo per fare meno, non come un palcoscenico su cui esagerare. I temi responsive di PrestaShop già riorganizzano molto il layout sugli schermi piccoli; sovrapporre animazioni a quel reflow è esattamente il punto in cui nasce lo scorrimento a scatti.

Tipi di animazione adatti a un negozio e-commerce

• Dissolvenza in entrata. Opacità 0 → 1. L’effetto più sicuro, adatto a qualsiasi blocco di contenuto. Se devi sceglierne uno solo, scegli questo.
• Scorrimento verso l’alto. L’elemento sale di 20–30px mentre appare in dissolvenza. Aggiunge un leggero senso di profondità; funziona bene per schede di testimonianze o funzionalità in homepage.
• Rivelazione sfalsata. Ogni elemento di una riga si anima un istante dopo il precedente, creando un effetto a cascata. Riservala a un blocco homepage curato, una riga “in evidenza” selezionata a mano, mai alla griglia categoria, dove rallenta soltanto la scansione.
• Parallasse. Lo sfondo si muove a una velocità diversa rispetto al primo piano. Può essere d’impatto su un singolo hero o su una sezione dedicata alla storia del brand, ma pesa sulle prestazioni ed è spesso causa di scatti su mobile. Al massimo una sezione per pagina, e testala su telefono prima di pubblicarla.

Le regole di design che la mantengono discreta

La differenza tra “premium” e “fastidioso” sta tutta nelle impostazioni, non nella tecnica:

• Discrezione. Se il visitatore nota consapevolmente l’animazione, è troppa. Gli elementi dovrebbero dare l’impressione di essere apparsi naturalmente, non di essersi esibiti.
• Velocità. 200–400ms è il punto ideale. Più veloce sembra reattiva; più lenta sembra impastata. Non superare mai 600ms: nessuno dovrebbe aspettare che la tua pagina finisca di muoversi prima di poterla leggere.
• Una sola volta. Anima un elemento la prima volta che entra nel viewport, poi lascialo tranquillo. Riavviare l’animazione ogni volta che il cliente torna verso l’alto è il modo più comune per far sembrare economico un effetto riuscito.
• Rispetta le preferenze di movimento. Alcuni visitatori impostano prefers-reduced-motion a livello di sistema operativo (spesso per disturbi vestibolari). Rispettala, e ricorda che le norme europee sull’accessibilità si aspettano che il tuo negozio resti pienamente utilizzabile anche per loro.

Prestazioni e accessibilità: i punti non negoziabili

È qui che la maggior parte dei tentativi fai-da-te con le animazioni allo scroll finisce per danneggiare un negozio PrestaShop invece di aiutarlo. Due realtà tecniche decidono se la tua animazione è leggera o costosa:

Anima solo opacity e transform. Queste due proprietà sono gestite dal compositor del browser: non costringono la pagina a ricalcolare il layout, quindi il thread principale resta libero per tutto il resto. Animare width, height, top, left, margin o padding provoca un reflow del layout a ogni frame, e su una pagina categoria PrestaShop ricca di contenuti è esattamente il tipo di costo che si manifesta come uno scatto.

Usa Intersection Observer, mai listener sugli eventi di scroll. Un ingenuo window.addEventListener('scroll', ...) viene eseguito decine di volte al secondo e compete con gli script front-end di PrestaShop (carrello, ajax della ricerca a faccette, carosello). Intersection Observer interviene solo quando un elemento entra davvero nell’area visibile, quindi è corretto e leggero.

Sul fronte accessibilità, la base è questa: non nascondere mai contenuti essenziali dietro un’animazione che dipende da JavaScript. Se uno script fallisce, il contenuto (e soprattutto il prezzo e il pulsante di acquisto) deve essere comunque presente. Non animare il testo mentre uno screen reader potrebbe leggerlo ed evita lampeggi o movimenti rapidi. L’Atto europeo sull’accessibilità considera le animazioni che bloccano o ostacolano l’accesso ai contenuti un problema di conformità, non una scelta di stile.

Le due regole CSS che fanno il grosso del lavoro

Una dissolvenza in entrata corretta e leggera è soprattutto CSS: JavaScript aggiunge solo una classe quando l’elemento entra in vista. Il pattern qui sotto anima solo opacity e transform, e include la protezione prefers-reduced-motion che ti mantiene dalla parte giusta dell’accessibilità. È CSS puro, senza librerie:

/* hidden state: paint it, but offset and transparent */
.mpr-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .35s ease, transform .35s ease;
}

/* JS adds .is-visible when the element scrolls into view */
.mpr-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* respect the visitor's OS-level motion preference */
@media (prefers-reduced-motion: reduce) {
  .mpr-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

Ed ecco l’observer che commuta la classe una sola volta, poi smette di osservare l’elemento: nota la chiamata unobserve, che è il modo in cui rispetti la regola “anima una sola volta” senza lasciare listener in esecuzione:

const io = new IntersectionObserver((entries, obs) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      obs.unobserve(entry.target);
    }
  });
}, { threshold: 0.15 });

document.querySelectorAll('.mpr-reveal').forEach((el) => io.observe(el));

Pubblica quel JS come file esterno registrato tramite l’asset hook del tuo modulo, non come <script> inline in un template, per le ragioni spiegate nella guida su CSS/JS personalizzati citata sopra. Limita la classe .mpr-reveal solo ai template homepage e CMS, esattamente come indicato nella tabella.

Tre modi per aggiungere animazioni allo scroll a PrestaShop

Il primo percorso merita un avvertimento che mette in difficoltà molti commercianti: se modifichi i file del tema per aggiungere script e CSS, fallo in un tema child, altrimenti il prossimo aggiornamento del tema cancellerà tutto in silenzio. Spieghiamo esattamente perché e come in temi child in PrestaShop: perché non dovresti mai modificare il tema parent. Ed evita i pesi massimi: framework completi come GSAP o Anime.js aggiungono 30–60KB di JavaScript per capacità che un negozio non userà mai; una semplice dissolvenza con scorrimento non giustifica quel peso in un sito costruito intorno al funnel di pagamento.

C’è una microinterazione collegata che vale la pena considerare nello stesso momento, perché appartiene alla stessa famiglia di lavoro basata su Intersection Observer: un pulsante torna su che compare in dissolvenza quando il visitatore supera la prima schermata. È uno dei rari movimenti attivati dallo scroll benvenuti su ogni pagina, perché rimuove attrito invece di aggiungerlo.

Dove si inserisce il modulo Scroll Animations

Le impostazioni delle animazioni allo scorrimento mostrano un interruttore di attivazione, un menu a tendina per il tipo di animazione, i campi di ritardo e durata e un campo per i selettori CSS.

La strada del modulo esiste per il proprietario del negozio che vuole una homepage curata, ma non vuole creare un fork del tema né scrivere a mano codice Intersection Observer che potrebbe rompersi al prossimo aggiornamento. Il nostro modulo Scroll Animations aggiunge effetti configurabili di dissolvenza, scorrimento e zoom a qualsiasi elemento dal back office: è basato su un IntersectionObserver nativo senza dipendenze esterne, quindi non trascina un framework da 30KB sulle tue pagine. Che cosa ottieni in concreto? Controlli durata, punto di attivazione ed effetto per ogni elemento dall’amministrazione invece che da una fattura di sviluppo; la logica dell’animazione vive nel modulo, non nel tema, quindi un aggiornamento del tema non può cancellarla; e poiché si appoggia a opacity e transform sul compositor, è progettata per mantenere intatto il tuo punteggio PageSpeed invece di consumarlo.

Qualunque percorso tu scelga, la disciplina resta la stessa, ed è la parte che le guide fai-da-te saltano: limita il movimento alle pagine che persuadono, tienilo lontano dalle pagine che vendono e da quelle che incassano, anima solo opacità e trasformazione, e testalo su un telefono reale prima di considerarlo finito. Un’animazione allo scroll dovrebbe far percepire al visitatore che la pagina è viva, mai costringerlo ad aspettare che si stabilizzi prima di poter acquistare.

Domande frequenti

Dove in un negozio PrestaShop è sicuro usare animazioni allo scroll?

Anima le pagine in cui un visitatore sta esplorando o lasciandosi convincere: la homepage (con parsimonia) e le pagine CMS come Chi siamo o un lookbook. Tieni il movimento fuori dagli elenchi categoria, dalle pagine prodotto e dal pagamento, dove i clienti stanno scansionando, decidendo e pagando. Una griglia categoria che esita prima di mostrare i prodotti viene percepita come rotta, non premium, e qualsiasi ritardo nel pagamento mette direttamente a rischio l’ordine.

Perché tutti insistono su IntersectionObserver invece di un listener sullo scroll?

Un listener dell’evento scroll viene eseguito decine di volte al secondo e compete con gli script front-end di PrestaShop: carrello, ajax della ricerca a faccette, carosello. IntersectionObserver interviene solo quando un elemento entra davvero nell’area visibile, quindi è corretto e leggero. Inoltre rende banale la regola “anima una volta sola”: chiama unobserve sull’elemento dopo che è stato rivelato e il browser smette del tutto di osservarlo.

Quali proprietà CSS sono sicure da animare?

Solo opacity e transform. Entrambe sono gestite dal compositor del browser e non forzano il ricalcolo del layout, quindi il thread principale resta libero. Animare width, height, top, left, margin o padding provoca un reflow a ogni frame, e su una pagina categoria ricca di contenuti è esattamente il costo che si manifesta come uno scatto.

Devo supportare prefers-reduced-motion?

Sì, ed è una sola media query, mostrata nello snippet sopra. Alcuni visitatori impostano prefers-reduced-motion: reduce a livello di sistema operativo, spesso per disturbi vestibolari. Rispettarla non è solo cortesia: l’Atto europeo sull’accessibilità considera le animazioni che ostacolano l’accesso ai contenuti un problema di conformità. Dentro quella media query, imposta l’elemento nel suo stato visibile senza transizione, così appare immediatamente.

Una libreria come AOS o GSAP è una buona idea?

AOS è una soluzione rapida ragionevole se ti senti a tuo agio nel marcare gli elementi con data-aos in un tema child. Evita i pesi massimi: GSAP e Anime.js aggiungono 30–60KB di JavaScript per capacità che un negozio non userà mai, e una semplice dissolvenza con scorrimento non giustifica quel peso in un sito costruito intorno al funnel di pagamento. Il pattern vanilla con IntersectionObserver qui sopra richiede poche righe e non porta con sé alcun costo di framework.

Le animazioni allo scroll danneggeranno il mio punteggio PageSpeed?

Non necessariamente. Se fatte bene, animando solo opacità e trasformazione, usando IntersectionObserver, limitando l’effetto a un paio di template ed evitando framework pesanti. Il costo è trascurabile. Cominciano a fare danni quando attivi una libreria “fade tutto” su tutto il tema, animi proprietà che innescano il layout o carichi un framework di animazione da 30KB per una singola dissolvenza. Limita con precisione e testa su un telefono reale di fascia media.

Perché la mia animazione sembra scattosa sui telefoni ma fluida sul laptop?

Perché oltre metà del traffico è mobile ed è lì che l’animazione peggiora. Un Android di tre anni fa ha molto meno margine della tua macchina di sviluppo, e i temi responsive di PrestaShop già riorganizzano pesantemente il layout sugli schermi piccoli: sovrapporre animazioni a quel reflow è ciò che genera gli scatti. Considera il mobile come un motivo per fare meno: meno elementi animati, niente parallasse e verifica sempre su hardware reale di fascia media.

Guide correlate

• Pulsante torna su: un piccolo dettaglio UX che conta sorprendentemente
• CSS e JavaScript personalizzati in PrestaShop senza rompere gli aggiornamenti
• Temi child in PrestaShop: perché non dovresti mai modificare il tema parent