La paginazione a nastro

Navigazione, Transizioni, TestoGSAP, Solo CSSImpegnativaPeso compresso: Demo 12 KBGSAP 28 KBGratisScarica lo zip

Le pagine di un elenco di risultati stanno su un nastro che corre nella barra, e i puntini di sospensione sono le sue bobine: cambiando pagina il nastro scorre, i numeri passano dentro il carrello scuro della pagina attuale e si accendono di bianco tagliati sul suo bordo, quelli in fondo si avvolgono stringendosi nei puntini che girano, e sotto le cifre dei risultati rotolano.

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 tape pagination</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>
  <main class="stage">
    <!-- the pagination of a list of 472 results, ten to a page. The pages in between are numbers on a tape that runs
         through the bar, and the two sets of dots are its reels: going to another page the tape runs, the numbers
         slide through the dark carriage of the current page (lit white inside it), the ones at the ends are wound
         into the dots and new ones come out of the other side. Under the bar the range of results rolls, digit by
         digit. Without the script, the links below work as they are -->
    <div class="pager" data-pager>
      <nav class="bar" aria-label="Pagination" data-bar>
        <a class="key key--prev" href="?page=6" rel="prev" aria-label="Previous page" data-prev>
          <svg class="key__arrow" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.25 6.5 8.75 12l5.5 5.5"/></svg>
        </a>

        <div class="track" data-track>
          <ol class="slots" data-slots>
            <li class="slot"><a class="slot__page" href="?page=1" aria-label="Page 1">1</a></li>
            <li class="slot"><span class="slot__gap" aria-hidden="true">&hellip;</span></li>
            <li class="slot"><a class="slot__page" href="?page=6" aria-label="Page 6">6</a></li>
            <li class="slot"><a class="slot__page" href="?page=7" aria-label="Page 7" aria-current="page">7</a></li>
            <li class="slot"><a class="slot__page" href="?page=8" aria-label="Page 8">8</a></li>
            <li class="slot"><span class="slot__gap" aria-hidden="true">&hellip;</span></li>
            <li class="slot"><a class="slot__page" href="?page=48" aria-label="Page 48">48</a></li>
          </ol>
          <!-- what the script draws: the carriage, the reels and the tape twice, the second one lit inside the carriage -->
          <span class="carriage" aria-hidden="true" data-carriage></span>
          <span class="reel" aria-hidden="true" data-reel><i></i><i></i><i></i></span>
          <span class="reel" aria-hidden="true" data-reel><i></i><i></i><i></i></span>
          <div class="tape" aria-hidden="true" data-tape></div>
          <div class="tape tape--lit" aria-hidden="true" data-lit></div>
        </div>

        <a class="key key--next" href="?page=8" rel="next" aria-label="Next page" data-next data-autoclic>
          <svg class="key__arrow" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.75 6.5 15.25 12l-5.5 5.5"/></svg>
        </a>
      </nav>

      <p class="range">
        <span class="range__said" aria-live="polite" data-said>Results 61 to 70 of 472</span>
        <span class="range__shown" aria-hidden="true"><span class="odo" data-odo>61</span><span class="range__dash">&ndash;</span><span class="odo" data-odo>70</span> of <span data-total>472</span> results</span>
      </p>
    </div>
  </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.

24 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 paginazione a nastro» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco, da sola al centro, una vaschetta grigio chiaro alta 60 pixel con due tasti bianchi rotondi alle estremità, Previous e Next con le frecce disegnate, e in mezzo le pagine di 472 risultati, dieci per pagina: 1, i puntini, 6, 7 e 8, i puntini, 48. La pagina 7 sta dentro un carrello scuro dagli angoli tondi, col numero bianco; sotto la barra una riga dice 61–70 of 472 results. All'arrivo la barra sale piano e il nastro corre dalla pagina 1 alla 7: il carrello scivola fino al centro, poi si ferma e passano i numeri. Scegliendo un'altra pagina il nastro scorre: i numeri passano attraverso il carrello, e la parte che ci sta dentro è bianca e un po' più grassa, tagliata esattamente sul suo bordo; quelli che arrivano in fondo si stringono sull'asse della larghezza del carattere, si schiacciano e svaniscono dentro i puntini, mentre dall'altra parte ne escono di nuovi che si allargano. I puntini sono due piccole bobine: girano di mezzo giro per ogni pagina che ci passa dentro e tornano sempre dritti, e quando il nastro corre forte si allargano un poco. Il carrello sta su una molla e il nastro lo trascina di qualche pixel prima che torni al suo posto; vicino alla prima e all'ultima pagina il nastro si ferma ed è il carrello a viaggiare, allungandosi con la velocità. Un salto lontano, da 11 a 1 o da 7 a 48, fa passare tutte le pagine di mezzo, con una scia morbida dietro i numeri. Sotto, le cifre dei risultati rotolano come quelle di un contachilometri, verso l'alto se il numero cresce e verso il basso se cala, e le cifre in più si aprono o si chiudono. Col mouse sopra una freccia le bobine si caricano un poco verso quella parte e la freccia si sporge; sopra una pagina compare una piastrina bianca e il carrello si allunga verso di lei; sopra i puntini le bobine girano di più, perché un clic lì salta di cinque pagine. Alla prima o all'ultima pagina la freccia che non porta da nessuna parte affonda nella vaschetta, e cliccarla fa urtare il carrello contro il fondo.

Come funziona

Un numero solo

Il nastro non è una serie di stati ma un numero: la pagina come frazione, che GSAP porta dalla vecchia alla nuova. Da lì ogni fotogramma ricava u, la pagina nella casella di mezzo, fermata vicino ai capi (fra la quarta e la quartultima con un vicino per lato), e la casella del carrello, m + pagina − u: nel mezzo resta ferma e scorrono i numeri, vicino ai capi u si ferma e viaggia il carrello. Un salto di quaranta pagine le fa passare tutte, e un clic a metà strada riparte da dove il nastro è arrivato.

I puntini sono le bobine

Ogni pagina ha la sua posizione sul nastro, r = m + p − u, fermata fra la prima e l'ultima casella dei puntini. Quanto si vede è il minimo fra r − eL e l'ultima casella − r − eR, dove eL ed eR dicono quanto sono aperti i puntini (0 quando la casella tiene la seconda o la penultima pagina). Così una pagina che entra nei puntini si stringe sull'asse wdth del carattere fino a 62, si schiaccia e svanisce nella stessa casella dove i puntini si stanno formando, e le regole classiche della paginazione (i puntini solo se nascondono almeno due pagine) vengono da sole.

Il carrello accende il nastro

Il nastro è disegnato due volte, uguale: i numeri scuri e sopra quelli bianchi, ritagliati a ogni fotogramma con un clip-path inset dalle misure del carrello, angoli tondi compresi. Così un numero a metà strada è bianco dentro e scuro fuori, tagliato sul bordo. I due strati hanno la stessa grazia: il peso dei numeri cresce con la vicinanza al carrello in tutti e due, altrimenti le due metà non combacerebbero. Il carrello segue la sua casella su una molla, il nastro lo trascina con la sua velocità e si allunga quando corre.

Le cifre che rotolano

Sotto la barra ogni numero è una fila di finestrelle, una per cifra, con dentro una colonna di cifre ripetuta due volte, così una finestra va avanti da 9 a 0 senza tornare indietro. Ogni finestra va alla sua nuova cifra con la stessa durata e la stessa curva del nastro, le cifre iniziali che non servono si chiudono in larghezza. Una regione aria-live nascosta dice ai lettori di schermo Results 71 to 80 of 472.

Link veri, nastro disegnato

Sotto il nastro ci sono le caselle vere: link con href ?page=N e aria-label Page N, aria-current sulla pagina attuale, i puntini come pulsanti Ahead 5 pages, to page 12. Il loro testo è trasparente e i numeri che si vedono stanno sul nastro, aria-hidden; senza lo script i link si vedono e funzionano. Le caselle cambiano subito, il nastro le raggiunge; il fuoco della tastiera passa alla nuova pagina attuale. Quando niente si muove il ciclo smette di disegnare. L'anteprima della libreria clicca a turno la pagina 1, la pagina dopo quella attuale, i puntini e Next: hanno data-autoclic.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`RESULTS`	script.js	`472`	Quanti risultati ha l'elenco.
`PER_PAGE`	script.js	`10`	I risultati di ogni pagina.
`START`	script.js	`7`	La pagina aperta quando il componente si carica.
`NEIGHBOURS`	script.js	`1`	Le pagine mostrate da ogni lato di quella attuale (meno su uno schermo stretto, se non ci stanno).
`SKIP`	script.js	`5`	Quante pagine salta un clic sui puntini.
`STEP`	script.js	`0.5`	I secondi che il nastro ci mette a spostarsi di una pagina (un salto lontano un po' di più).
`FAR`	script.js	`1.1`	Il tempo più lungo di un salto, in secondi, per quanto lontano vada.
`TURN`	script.js	`0.5`	Quanto girano i puntini per ogni pagina che ci si avvolge dentro, in giri (0,5: mezzo giro, e tornano dritti).
`SWAY`	script.js	`1`	Quanto il nastro trascina il carrello prima che torni indietro sulla molla (0 per niente).
`SMEAR`	script.js	`1`	Quanto lasciano la scia i numeri quando il nastro corre forte (0 niente scia).
`WIND`	script.js	`0.16`	Quanto si caricano le bobine col mouse sopra una freccia, in pagine (0,16: un piccolo giro).

Provali nel Playground

Quando usarla

Sotto un elenco lungo diviso in pagine: i risultati di una ricerca, gli ordini di un negozio, l'archivio di un blog, una tabella di un pannello di controllo. Il nastro fa vedere dove si va e quanta strada si fa, anche in un salto di quaranta pagine, e la riga sotto dice subito quali risultati ci sono.

Sul telefono

La barra si stringe allo schermo con 16 pixel di margine per lato (358 pixel su un telefono di 390) e scende a 56 di altezza, coi tasti di 40; ogni pagina è un bersaglio di circa 34 per 44 pixel. Se i vicini scelti non ci stanno con caselle di almeno 34 pixel se ne mostrano meno, e un numero lungo che non entra nella sua casella si stringe sull'asse della larghezza. Il dito sopra una freccia carica le bobine come il mouse, e una pagina premuta si rimpicciolisce sul nastro.

Con il movimento ridotto

Il nastro non scorre: numeri e carrello si dissolvono e ricompaiono già sulla pagina nuova, le cifre dei risultati si scambiano in dissolvenza, i puntini non girano. All'arrivo il componente compare solo in dissolvenza; niente molla, niente scia, niente bobine che si caricano.

Trappole

Con Hubot Sans le cifre tabulari hanno lo zero barrato e l'uno con la base, da editor di codice: 70 sembrava 7Ø. È diventato Archivo, che ha cifre tabulari pulite e un asse della larghezza che scende fino a 62, più della corsa che serve per stringere un numero nei puntini.
La scia della velocità, un text-shadow sullo strato del nastro, sporcava anche la prima e l'ultima pagina, che non si muovono mai. Ora quelle due hanno una classe che la toglie.
La prima scia erano tre copie nette del numero: nelle foto sembrava una doppia immagine. Ora sono quattro copie morbide sempre più chiare, e la scia non supera tre decimi della casella: al telefono quella di un numero a due cifre arrivava sopra il numero accanto.
Col mouse su Next il nastro si sporgeva di un settimo di pagina: a riposo i puntini restavano storti e accanto spuntava il numero dopo, schiacciato contro di loro, e sembrava un errore. Ora il nastro resta fermo e si caricano solo le bobine.
Il carrello che si spostava di quattro pixel verso la pagina sotto il mouse lasciava il suo numero fuori centro, come un difetto di allineamento. Ora si allunga: cresce solo il bordo dalla parte della pagina, l'altro resta fermo.
Dopo un clic su una pagina col mouse ancora sopra, il carrello restava allungato verso la casella di prima, perché pointerover non scatta di nuovo. Ora dopo ogni cambio di pagina si ricalcola che cosa c'è sotto il puntatore.
Le caselle sono fisse e cambiano numero: premendo Invio sull'8 il fuoco restava nella stessa casella, che ora teneva il 9. Ora il fuoco passa alla nuova pagina attuale; sulle frecce resta, finché non affondano.
La larghezza delle finestrelle delle cifre si misurava dalla prima cifra, che però, data la larghezza alla finestra, misurava la finestra stessa: caricato il carattere vero, restavano larghe come quelle del carattere di riserva. Ora misura una cifra a parte, nascosta.
Con inline-flex sulla riga dei risultati gli spazi intorno a of sparivano (70of): la riga è tornata in linea e solo i numeri sono inline-flex.
Al telefono i numeri a tre cifre (249 250 251) non entravano nelle caselle di 36 pixel e il 250 usciva dal carrello: un numero troppo lungo per la sua casella ora si stringe sull'asse della larghezza, lo stesso gesto dei puntini.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Collaudo

Provata il 6 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.