La transizione a celle

Transizioni, TestoGSAP, Solo CSSMediaPeso compresso: Demo 5,7 KBGSAP + CustomEase 31 KBGratisScarica lo zip

Un cambio di pagina nello stile minimal per il sito di un hotel di montagna: al clic una tenda di 240 celle color sabbia, venti colonne di dodici, si chiude sulla pagina in un’onda che parte dall’angolo in basso a destra, mentre un velo scurisce sotto; poi si riapre con la stessa onda e le parole del titolo nuovo arrivano a salti, in ordine sparso, larghe e leggere, e si stringono prendendo peso. Rifatta da zero sull’idea del cambio di pagina di sondaven.com.

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 cell 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>
  <main class="stage" data-stage>
    <!-- the first page: the rooms of a small mountain hotel, on warm paper -->
    <section class="page page--a is-on" data-page="a" aria-label="Rooms">
      <header class="bar">
        <span class="brand">Hollin</span>
        <nav class="nav" aria-label="Pages">
          <a class="nav__link" href="#rooms" aria-current="page">Rooms</a>
          <a class="nav__link" href="#seasons" data-go="b">Seasons</a>
        </nav>
      </header>
      <span class="rule" aria-hidden="true"></span>
      <h1 class="title" data-title><span class="title__line">Rooms above</span><span class="title__line">the treeline.</span></h1>
      <div class="under">
        <p class="lede" data-late>Twelve rooms of larch and stone, a stove in each, and windows that open on the valley.</p>
        <a class="go" href="#seasons" data-go="b" data-autoclic data-late>
          <span class="go__text">See the seasons</span>
          <svg class="go__arrow" viewBox="0 0 26 12" aria-hidden="true"><path d="M1 6h22"/><path d="M18.5 1.5 23.5 6l-5 4.5"/></svg>
        </a>
      </div>
      <footer class="foot" data-late>
        <span>A hotel in the high woods</span>
        <span>Open all year</span>
      </footer>
    </section>

    <!-- the second page: the seasons, on the dark brown of the woods at night -->
    <section class="page page--b" data-page="b" aria-label="Seasons" aria-hidden="true">
      <header class="bar">
        <span class="brand">Hollin</span>
        <nav class="nav" aria-label="Pages">
          <a class="nav__link" href="#rooms" data-go="a">Rooms</a>
          <a class="nav__link" href="#seasons" aria-current="page">Seasons</a>
        </nav>
      </header>
      <span class="rule" aria-hidden="true"></span>
      <h2 class="title" data-title><span class="title__line">Snow comes</span><span class="title__line">early here.</span></h2>
      <div class="under">
        <p class="lede" data-late>Trails and rivers in summer, quiet slopes from November. The stove is lit either way.</p>
        <a class="go" href="#rooms" data-go="a" data-autoclic data-late>
          <svg class="go__arrow go__arrow--back" viewBox="0 0 26 12" aria-hidden="true"><path d="M25 6H3"/><path d="M7.5 1.5 2.5 6l5 4.5"/></svg>
          <span class="go__text">Back to the rooms</span>
        </a>
      </div>
      <footer class="foot" data-late>
        <span>Summer and winter</span>
        <span>Open all year</span>
      </footer>
    </section>

    <!-- the curtain: a veil and a grid of cells, built by the script -->
    <div class="curtain" data-curtain aria-hidden="true">
      <div class="curtain__veil" data-veil></div>
      <div class="curtain__cells" data-cells></div>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomEase.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.

41 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 celle» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Hollin, un piccolo hotel inventato in alto nei boschi, ha due pagine: le stanze, su una carta bianco caldo, e le stagioni, sul bruno quasi nero del bosco di sera. All’apertura la pagina è coperta da una tenda color sabbia che si apre: è fatta di venti colonne di dodici celle, e ogni cella si ritira di lato verso il suo centro, una dopo l’altra, in un’onda che comincia dall’angolo in basso a destra e si allarga verso l’alto a sinistra, a scalini. Intanto le parole del titolo, «Rooms above the treeline.», arrivano in ordine sparso: alcune saltano giù dall’alto, altre su dal basso, crescendo da niente, e ognuna atterra larga e sottile e poi si stringe e prende peso finché il titolo è compatto. Al clic su «See the seasons» la tenda si richiude con la stessa onda: le celle si allungano dalla loro linea di mezzo fino a toccarsi, e la pagina che resta scoperta fra una striscia e l’altra si scurisce sotto un velo nero. A tenda chiusa la pagina cambia; la tenda si riapre sul bruno e arriva «Snow comes early here.» nello stesso modo, poi il testo piccolo e il link per tornare. Un altro clic riporta alle stanze.

Come funziona

La tenda

La tenda è un div sopra le pagine con dentro un velo nero e venti colonne in flex, ognuna con dodici celle in colonna (flex: 1). Ogni cella ha margin -1px, come sul sito: le celle si sovrappongono di un pixel e a tenda chiusa non resta nessuna fessura. Partono da scaleX(0), cioè strette fino a sparire verso la loro linea di mezzo, perché l’origine della trasformazione è il centro.

L’onda

Le celle stanno nell’ordine delle colonne: la prima colonna dall’alto in basso, poi la seconda. Per lo stagger di GSAP la griglia è [COLS, ROWS], quindi ogni sua «riga» è una nostra colonna e la distanza fra due celle è quella vera. Con from: 'end' l’onda parte dall’ultima cella, in basso a destra, e con each 0,03 ogni cella aspetta tre centesimi di secondo per ogni passo di distanza: la cella più lontana parte dopo circa due terzi di secondo. Ogni cella si allunga in 0,4 secondi con la curva 0.76, 0, 0.24, 1, lenta all’inizio e alla fine.

Il velo e il cambio

Sotto le celle un velo nero va da trasparente a pieno in 1,2 secondi con la stessa curva: scurisce le strisce di pagina ancora scoperte. A 1,2 secondi dal clic la tenda è chiusa: la pagina vecchia si nasconde, quella nuova si mostra con le parole già al punto di partenza, e parte la riapertura, con le celle che tornano a scaleX(0) nello stesso ordine e il velo che se ne va.

Le parole a salti

Le parole del titolo sono divise a mano in span (una per GSAP, con dentro una per gli assi del carattere). Partono da yPercent -150, 75, -75 e 150 a giro, scala 0 e opacità 0 e arrivano a zero, uno e uno in 1,2 secondi con la curva 0.25, 1, 0.5, 1, 0,2 secondi dopo che la tenda comincia ad aprirsi, una ogni 0,025 secondi in ordine casuale. Il testo dentro parte con font-stretch al 125% e peso 280 e arriva all’88% e 640: la parola atterra larga e leggera e si compatta.

Movimento ridotto

Con prefers-reduced-motion la tenda non c’è: la pagina nuova compare sopra l’altra in dissolvenza in 0,6 secondi, già composta.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`COLS`	script.js	`20`	Le colonne della tenda (sul sito sono venti).
`ROWS`	script.js	`12`	Le celle di ogni colonna (sul sito dodici).
`CELL_TIME`	script.js	`0.4`	In quanti secondi una cella si allunga o si ritira.
`EACH`	script.js	`0.03`	Il distacco fra una cella e la vicina, in secondi: più alto, l’onda è più lenta.
`FROM`	script.js	`'end'`	Da dove parte l’onda: end (in basso a destra), start (in alto a sinistra), center, edges, random.
`HOLD`	script.js	`1.2`	Dopo quanti secondi dal clic, a tenda chiusa, cambia la pagina.
`VEIL`	script.js	`1`	Quanto scurisce il velo sotto le celle: 0 niente, 1 nero.
`VEIL_TIME`	script.js	`1.2`	In quanti secondi arriva il velo, e in quanti se ne va.
`JUMPS`	script.js	`[-150, 75, -75, 150]`	Da dove arrivano le parole, in percentuale della loro altezza, a giro: negativo dall’alto, positivo dal basso.
`WORD_TIME`	script.js	`1.2`	In quanti secondi arriva una parola.
`WORD_EACH`	script.js	`0.025`	Il distacco fra una parola e l’altra, in ordine sparso.
`WORD_DELAY`	script.js	`0.2`	Quanto aspettano le parole dopo che la tenda comincia ad aprirsi.
`WIDE`	script.js	`125`	La larghezza del carattere (asse wdth, in %) con cui una parola atterra, prima di stringersi.
`LIGHT`	script.js	`280`	Il peso con cui una parola atterra, prima di prendere quello del titolo.
`CELL_EASE`	script.js	`'0.76, 0, 0.24, 1'`	La curva delle celle e del velo (quella del sito).
`WORD_EASE`	script.js	`'0.25, 1, 0.5, 1'`	La curva delle parole (quella del sito).

Provali nel Playground

Quando usarla

Per il cambio di pagina del sito di un hotel, di una casa vacanze, di uno studio di architettura o di un marchio dai toni caldi, dove la pagina nuova arriva con un titolo grande.

Sul telefono

La stessa tenda di venti colonne per dodici celle, più strette e più alte; il titolo più piccolo e il link sotto il testo. Un tocco cambia pagina.

Con il movimento ridotto

Niente tenda e niente salti: la pagina nuova compare in dissolvenza, già composta.

Trappole

Lo stagger a griglia di GSAP legge gli elementi riga per riga: con le celle messe colonna per colonna, come sul sito, la griglia va scritta [COLS, ROWS] e non [ROWS, COLS], altrimenti l’onda si storce in diagonale.
La riapertura va costruita al momento della costruzione della timeline, con la pagina giusta già passata come argomento: aggiunta a una timeline che sta per finire, partiva dopo il suo onComplete e il clic successivo trovava la demo libera a metà.
SplitText è un plugin: le parole si dividono a mano in due span, uno per il salto e la scala e uno dentro per font-stretch e peso, perché il transform di GSAP e gli assi del carattere stiano su elementi diversi.
Le celle con margin -1px si sovrappongono: senza, a tenda chiusa resta una griglia di fessure sottili dove si vede la pagina.
Un clic durante l’apertura veniva ignorato (la demo era «occupata») e il poster del collaudo usciva a caso, a volte con la tenda chiusa e a volte senza tenda. Ora l’apertura ha una timeline sua: un clic la porta alla fine con progress(1) e parte subito la tenda.

Librerie

GSAP 3.15.0, CustomEase (GSAP) 3.15.0, Archivo (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 5,7 KB; le librerie: GSAP + CustomEase 31 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.