Animazioni JSJSSnippet

Come Creare uno Scrolling Orizzontale con GSAP e ScrollTrigger

Scopri come realizzare un effetto di scorrimento orizzontale elegante e moderno utilizzando GSAP e il plugin ScrollTrigger. Questo tutorial ti mostrerà come animare i contenuti in senso orizzontale anziché verticale, creando un impatto visivo unico.

1. Struttura HTML

Per prima cosa, nell’index.html suddividiamo il layout in sezioni. Il contenitore .container ospita due “pannelli” (.panel), ai quali applicheremo l’effetto di scrolling orizzontale. Ecco una struttura di esempio:

<section class="banner">
  <!-- content here -->
</section>

<div class="container">
  <section class="panel">
    <!-- content here -->
  </section>
  <section class="panel">
    <!-- content here -->
  </section>
</div>

<section class="footer">
  <!-- content here -->
</section>

Nel <head> ricordati di importare le librerie GSAP e ScrollTrigger, necessarie per animare correttamente gli elementi.

2. Stili CSS

Nella sezione <style> o nel tuo file styles.css, definisci le regole per l’aspetto grafico e l’impostazione dell’effetto orizzontale.

html {
  overflow-y: scroll;
  height: 100%;
}

body {
  overflow-y: visible;
  height: unset;
  margin: 0;
  /* Altre proprietà come font, colore testo, ecc. */
}

.container {
  width: 200%;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
  background: #f7f7f7;
}

section.panel {
  width: 100%;
  height: 100%;
}

/* Esempio di colore per i pannelli dispari */
.container .panel:nth-child(odd) {
  background: #a50000; /* rosso scuro */
}
  • overflow-y: scroll su <html>: abilita lo scorrimento verticale del documento.
  • overflow-y: visible su body: rimuove gli eventuali comportamenti predefiniti di altezza e margini.
  • .container con width: 200%: impostando due pannelli affiancati, la larghezza totale diventa 200%.
  • .panel con width: 100%: ogni pannello occupa tutta la larghezza del viewport, consentendo l’effetto di “slittamento” orizzontale.

3. JavaScript e GSAP

Per animare i pannelli, registra ScrollTrigger in GSAP e imposta l’animazione che muoverà gli elementi orizzontalmente in base allo scroll dell’utente.

gsap.registerPlugin(ScrollTrigger);

const sections = gsap.utils.toArray(".panel");
const container = document.querySelector(".container");

gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".container",
    pin: true, // Blocca il container in posizione
    scrub: 1,  // L'animazione segue lo scroll in modo fluido
    snap: 1 / (sections.length - 1), // Passa in modo uniforme da un pannello all’altro
    end: () => `+=${container.offsetWidth}`, // Distanza totale di scroll
  },
});
  • pin: true: fissa il contenitore .container, simulando lo scrolling verticale mentre il contenuto si muove in orizzontale.
  • scrub: 1: rende il movimento fluido e legato alla velocità di scroll.
  • snap: 1 / (sections.length - 1): forza il passaggio da un pannello al successivo in modo deciso.
  • end: () => \+=${container.offsetWidth}“: definisce la lunghezza dell’animazione in base alla larghezza complessiva dei pannelli.

4. Conclusioni

Implementare lo scrolling orizzontale con GSAP e ScrollTrigger è un modo eccellente per dare al tuo sito un aspetto dinamico e accattivante. Ricorda di testare il risultato su vari dispositivi e browser per garantire la massima compatibilità. Con questi concetti di base, puoi personalizzare i colori, il numero di pannelli e persino introdurre transizioni più complesse.

Buon divertimento con le animazioni web!

Mobile e accessibilità

  • Touch swipe: disabilita l’effetto sotto una certa viewport con matchMedia e usa overflow-x: scroll nativo su mobile.
  • prefers-reduced-motion: bypassa l’effetto GSAP e usa layout verticale standard se l’utente ha disabilitato le animazioni.
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
  initHorizontalScroll();
}

Alternativa nativa: scroll-driven animations

Nel 2026 esiste un’alternativa CSS-only a GSAP ScrollTrigger per molti casi: le Scroll-Driven Animations, supportate da Chrome (dal 115) e Firefox. Con animation-timeline: scroll() puoi legare un’animazione CSS alla posizione di scroll senza JavaScript:

.panel {
  animation: slide-in linear;
  animation-timeline: scroll(root);
  animation-range: 0% 100%;
}

@keyframes slide-in {
  from { transform: translateX(0); }
  to   { transform: translateX(-200%); }
}

Per effetti semplici, questa soluzione è più performante e leggera di GSAP. Per animazioni complesse con scrubbing preciso, GSAP resta superiore.

Hai trovato utile questo Articolo? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.

Condividi

Articoli Recenti

Categorie popolari

AltroCSSJSTipsGuide

Potrebbe interessarti: