La transizione a scorrimento di lato

TransizioniGSAP, Solo CSSMediaPeso compresso: Demo 7,1 KBGSAP 28 KBGratisScarica lo zip

Un cambio di pagina nello stile minimal: tre pagine di una piccola rivista stanno una accanto all’altra come una striscia e scorrono di lato col clic, con le frecce o trascinandole col dito. Dentro ogni pagina il contenuto resta un po’ indietro, il titolo che esce scappa avanti e quello che entra arriva in ritardo su una molla, le lettere si stringono mentre la striscia corre e una cucitura sottile fra le pagine si piega.

Il codice

Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The side-scroll transition</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- three pages of a small magazine side by side, like a strip: Next, Back, the arrow keys or a drag move it -->
  <main class="stage" data-stage tabindex="-1">
    <div class="track" data-track>
      <section class="page" data-page aria-label="Archive">
        <div class="page__inner" data-inner>
          <p class="kicker" data-kicker>Issue four, autumn</p>
          <h1 class="title" data-title>Things kept.</h1>
          <p class="line" data-line>Objects we could not throw away, and the stories they still tell.</p>
          <div class="rule" aria-hidden="true"><span></span></div>
        </div>
      </section>
      <section class="page" data-page aria-label="Studio" aria-hidden="true">
        <div class="page__inner" data-inner>
          <p class="kicker" data-kicker>Where it is made</p>
          <h2 class="title" data-title>Made by hand.</h2>
          <p class="line" data-line>Two rooms, one long table and a window that faces north.</p>
          <div class="rule" aria-hidden="true"><span></span></div>
        </div>
      </section>
      <section class="page" data-page aria-label="Contact" aria-hidden="true">
        <div class="page__inner" data-inner>
          <p class="kicker" data-kicker>Letters welcome</p>
          <h2 class="title" data-title>Write to us.</h2>
          <p class="line" data-line>We read everything, slowly, and answer on Fridays.</p>
          <div class="rule" aria-hidden="true"><span></span></div>
        </div>
      </section>
      <!-- the seams between the pages: thin lines that bend a little while the strip runs -->
      <svg class="seams" data-seams aria-hidden="true"></svg>
    </div>

    <header class="bar">
      <span class="brand">Ferrow</span>
      <span class="bar__note">A small magazine</span>
    </header>

    <footer class="foot">
      <nav class="names" data-names aria-label="Pages">
        <button type="button" class="name" data-name>Archive</button>
        <button type="button" class="name" data-name>Studio</button>
        <button type="button" class="name" data-name>Contact</button>
        <span class="names__bar" data-bar aria-hidden="true"></span>
      </nav>
      <div class="moves">
        <button type="button" class="pillola pillola--vuota" data-back>
          <svg class="pillola__freccia pillola__freccia--indietro" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.5 8H3M7 3.8 2.8 8 7 12.2" /></svg>
          <span class="pillola__scritta" data-testo="Back">Back</span>
        </button>
        <button type="button" class="pillola" data-next data-autoclic>
          <span class="pillola__scritta" data-testo="Next">Next</span>
          <svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.8 13.2 8 9 12.2" /></svg>
        </button>
      </div>
    </footer>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.

31 valori da cambiare

Apri il Playground

Oppure chiedila a Claude Code

Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:

Prendi «La transizione a scorrimento di lato» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una piccola rivista inventata, Ferrow, su un bianco caldo. Sulla prima pagina, Archive, il titolo «Things kept.» sale al suo posto con l’occhiello, una riga di testo e un filo sottile con la sua tacca; in basso ci sono i nomi delle tre pagine, Archive, Studio e Contact, con un filo vermiglio sotto quello acceso, e due pillole, Back e Next. Al clic su Next la striscia delle pagine scorre a sinistra: la pagina che se ne va scivola via, ma il suo contenuto resta un po’ indietro e il suo titolo scappa avanti; la pagina che arriva entra da destra con il titolo in ritardo, che si posa su una molla con un filo di troppo e torna. Mentre la striscia corre le lettere dei titoli si stringono e, a pagina ferma, si riallargano; la cucitura sottile fra le due pagine si piega come un filo teso e si raddrizza; il filo vermiglio scivola dal nome vecchio al nuovo allungandosi o accorciandosi sulla sua larghezza. Dopo Contact, Next riporta alla prima pagina attraversando la striscia. La striscia si trascina anche col dito o col mouse: segue la mano, ai due capi fa resistenza come un elastico e, lasciata, va alla pagina più vicina tenendo conto dello slancio. Funzionano anche le frecce della tastiera e i nomi in basso.

Come funziona

Una striscia sola

Le tre pagine stanno in un contenitore (track) una accanto all’altra, a left 0, 100% e 200%. Tutto il movimento dipende da un numero solo, st.pos, la posizione della striscia in pagine: GSAP lo porta da una pagina all’altra con power3.inOut e una funzione sul ticker disegna tutto il resto a ogni fotogramma con translate3d. Così il trascinamento, le frecce, i nomi e il clic muovono la stessa cosa, e un cambio di misura della finestra a metà corsa non rompe niente: le posizioni in pixel si ricalcolano dalla larghezza del momento.

La parallasse

Per ogni pagina d = i − pos dice quanto è lontana. Il contenuto della pagina si sposta di −d × larghezza × PARALLAX, quindi resta indietro rispetto alla pagina. I titoli inseguono la striscia su una molla (rigidità e freno in TITLE_SPRING, a piccoli passi): lo scarto fra striscia e molla, moltiplicato per TITLE_LAG, sposta in avanti il titolo della pagina che esce e indietro quello della pagina che entra; il peso passa da un verso all’altro con clamp(2 × d × verso), così a pagina ferma lo scarto è zero e non c’è nessun salto. Quando la molla arriva va un filo oltre e torna: è l’assestamento del titolo.

Le lettere che si stringono

La velocità della molla dei titoli, divisa per una velocità di riferimento, dice quanto si corre; la larghezza del carattere (font-stretch di Archivo variabile) va da 112% a riposo verso 62% secondo SQUEEZE, inseguendo il valore in modo morbido. Le cuciture fra le pagine sono path SVG ridisegnati a ogni fotogramma: una curva quadratica il cui punto di controllo si sposta con la velocità della striscia, fino a BEND pixel.

Il dito

Pointer events a mano: sotto i 6 pixel di spostamento è ancora un clic; poi la striscia segue la mano (pos = pos iniziale − spostamento ÷ larghezza), ai due capi lo spostamento si moltiplica per RESISTANCE. Lasciando, la velocità degli ultimi campioni, per SNAP, dice dove la striscia si fermerebbe; si va alla pagina più vicina a quel punto, mai più di una per volta, con power3.out. touch-action: pan-y lascia al telefono lo scorrimento in verticale.

Il nome e il movimento ridotto

Il filo vermiglio sotto i nomi è un solo elemento: la sua x e la sua larghezza si interpolano fra quelle del nome prima e del nome dopo secondo la parte frazionaria di pos, misurate a ogni resize. Con il movimento ridotto le pagine stanno una sopra l’altra e si scambiano in dissolvenza, senza parallasse né scorrimento; anche il trascinamento cambia pagina in dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`DURATION`	script.js	`1.1`	I secondi per passare da una pagina alla vicina (dopo un trascinamento un po’ meno).
`PARALLAX`	script.js	`0.3`	Quanto il contenuto resta indietro rispetto alla sua pagina: 0 si muove con lei, 0.5 resta indietro di mezza pagina.
`TITLE_LAG`	script.js	`0.55`	Quanto il titolo della pagina che esce scappa avanti e quello della pagina che entra arriva in ritardo.
`TITLE_SPRING`	script.js	`[150, 21]`	La molla dei titoli: rigidità e freno. Meno freno, più il titolo va oltre prima di posarsi.
`SQUEEZE`	script.js	`0.6`	Quanto si stringono le lettere dei titoli mentre la striscia corre: 0 niente, 1 fino alla larghezza minima del carattere.
`SNAP`	script.js	`0.25`	Quanto conta lo slancio del dito nello scegliere la pagina dove fermarsi.
`RESISTANCE`	script.js	`0.3`	La resistenza ai due capi della striscia quando la si trascina: 0 è un muro, 1 nessuna resistenza.
`BEND`	script.js	`28`	Quanto si piegano al massimo le cuciture fra le pagine, in pixel.

Provali nel Playground

Quando usarla

Per passare fra le sezioni di un sito piccolo (una rivista, uno studio, un portfolio, la presentazione di un’app) come se fossero pagine affiancate: col clic sul computer e col dito sul telefono.

Sul telefono

La stessa animazione: le pagine si trascinano col dito di lato mentre lo scorrimento in verticale resta al telefono; i titoli sono più piccoli e le pillole scendono sotto i nomi.

Con il movimento ridotto

Niente scorrimento né parallasse: le pagine si scambiano in dissolvenza, col clic, le frecce o un trascinamento.

Trappole

Il segno dello scarto fra striscia e titoli cambia da una pagina all’altra: con un se/altrimenti secco il titolo saltava quando la pagina passava per il centro. Il peso clamp(2 × d × verso) va da −1 a 1 passando per zero proprio dove la pagina è ferma.
La molla dei titoli con un passo lungo (un fotogramma da 1/30 di secondo) esplodeva: ora si integra a passi di 1/120 di secondo.
Un trascinamento cominciato su un pulsante rubava il clic: il trascinamento parte solo fuori dai pulsanti e solo dopo 6 pixel.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 7,1 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 21 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Da fare

Licenza d’uso

Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.