La transizione della griglia

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

Un cambio di pagina minimal a clic: la pagina mostra la sua griglia di impaginazione, le colonne sottili su cui è composta, e le colonne si alzano una dopo l'altra come tasti di pianoforte portandosi via i pezzi della pagina vecchia. Ricadono con la pagina nuova, ognuna col suo rimbalzo, e il titolo si ricompone a onda.

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 layout grid 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: everything sits on the columns of the layout grid -->
    <section class="page page--a is-on" data-page="a" aria-label="Index">
      <header class="bar">
        <span class="brand">Kolm</span>
        <nav class="nav" aria-label="Pages">
          <a class="w" href="#index" aria-current="page"><span class="w__t">Index</span></a>
          <a class="w" href="#work" data-go="b"><span class="w__t">Work</span></a>
        </nav>
      </header>
      <div class="slab" aria-hidden="true"></div>
      <h1 class="big big--a" data-fit><span class="big__line">Quiet</span><span class="big__line">buildings.</span></h1>
      <p class="lede" data-late>A practice of four architects. We draw slowly, build little and keep every line on the grid.</p>
      <a class="go w" href="#work" data-go="b" data-autoclic data-late>
        <span class="w__t">See the work</span>
        <svg class="go__arrow" viewBox="0 0 26 12" aria-hidden="true"><path class="go__shaft" d="M1 6h22"/><path d="M18.5 1.5 23.5 6l-5 4.5"/></svg>
      </a>
      <footer class="foot">
        <span>Architecture and interiors</span>
        <span>Since 2014</span>
      </footer>
    </section>

    <!-- the second page: dark, like the black keys -->
    <section class="page page--b" data-page="b" aria-label="Work" aria-hidden="true">
      <header class="bar">
        <span class="brand">Kolm</span>
        <nav class="nav" aria-label="Pages">
          <a class="w" href="#index" data-go="a"><span class="w__t">Index</span></a>
          <a class="w" href="#work" aria-current="page"><span class="w__t">Work</span></a>
        </nav>
      </header>
      <h2 class="big big--b" data-fit><span class="big__line">Selected work</span></h2>
      <ul class="list" aria-label="Projects">
        <li class="row"><span class="row__rule" data-rule></span><span class="row__name">House on a slope</span><span class="row__kind">Dwelling</span><span class="row__year">2025</span></li>
        <li class="row"><span class="row__rule" data-rule></span><span class="row__name">Two rooms</span><span class="row__kind">Interior</span><span class="row__year">2023</span></li>
        <li class="row"><span class="row__rule" data-rule></span><span class="row__name">Small library</span><span class="row__kind">Public</span><span class="row__year">2021</span></li>
      </ul>
      <a class="go go--back w" href="#index" data-go="a" data-autoclic data-late>
        <svg class="go__arrow" viewBox="0 0 26 12" aria-hidden="true"><path class="go__shaft" d="M25 6H3"/><path d="M7.5 1.5 2.5 6l5 4.5"/></svg>
        <span class="w__t">Back to index</span>
      </a>
      <footer class="foot">
        <span>Built and in progress</span>
        <span>Since 2014</span>
      </footer>
    </section>

    <!-- the keys (slices of a page, one per column) and the layout grid drawn on top: both built by the script -->
    <div class="keys" data-keys aria-hidden="true"></div>
    <div class="grid" data-grid aria-hidden="true"></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.

40 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 della griglia» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Il sito di uno studio di architettura inventato, Kolm, in due pagine: la prima chiara, con un titolo enorme, Quiet buildings., un blocco rosso in piedi su due colonne e una riga di testo; la seconda scura, con Selected work e tre progetti in fila. Tutto sta su una griglia di otto colonne. All'apertura la griglia si disegna dall'alto, colonna dopo colonna, come le guide di un programma di grafica, e la prima pagina cade dentro le colonne una alla volta: ogni colonna atterra, rimbalza due volte e si ferma, e la sua guida si accende un attimo quando tocca terra. Poi la griglia si ritira verso il basso e il testo e il link salgono al loro posto. Al clic su See the work la griglia ricompare sopra la pagina; ogni colonna si abbassa di un soffio, come un tasto premuto, e poi vola via verso l'alto portandosi la sua fetta di pagina, una dopo l'altra da sinistra a destra. Per un istante resta la griglia vuota, poi le colonne ricadono con la pagina scura e il titolo nuovo si ricompone a pezzi, ogni pezzo col suo rimbalzo. Le righe della lista si disegnano da sinistra e il link per tornare sale per ultimo. Al clic su Back to index lo stesso giro parte da destra, come una scala che scende.

Come funziona

Una griglia sola

Le due pagine sono griglie CSS con le stesse colonne: grid-template-columns: repeat(var(--cols), minmax(0, 1fr)), lo stesso margine e lo stesso spazio fra le colonne. Lo script calcola colonne, margine e spazio dalla larghezza e li scrive come variabili, insieme al posto di ogni pezzo (per esempio --at-slab: 6 / span 2), così basta cambiare COLUMNS e tutto si ridispone.

I tasti sono fette della pagina

Le pagine vere non si tagliano mai. Per ogni colonna lo script crea un div con overflow hidden, largo dalla metà dello spazio a sinistra alla metà di quello a destra, e ci mette dentro una copia di tutta la pagina spostata di -x: ogni tasto mostra solo la sua fetta, e insieme coprono la pagina senza fessure. Nelle copie si tolgono data-autoclic e data-go, e i link escono dal Tab.

Premuto, poi via

Ogni tasto si abbassa di DIP pixel in 0,12 secondi con power2.out, poi sale fuori dallo schermo con power3.in, che parte piano e accelera. Il tasto dopo parte STAGGER secondi più tardi, nello stesso ordine in cui la griglia si è disegnata: ogni colonna se ne va appena la sua guida è pronta.

La caduta e il rimbalzo

Ogni tasto della pagina nuova parte appena il suo è uscito e cade con power2.in, come un peso. Toccata terra sale di BOUNCE pixel con power2.out e ricade con power2.in, poi lo stesso con un quarto dell'altezza e metà del tempo: due rimbalzi veri, non un elastico. Nello stesso istante la guida della sua colonna si accende e si spegne in mezzo secondo. Visto che i tasti arrivano sfalsati, anche i rimbalzi lo sono, e il titolo si ricompone a onda.

Regia, telefono e movimento ridotto

Ogni cambio è una timeline sola, con timeScale per SPEED; un clic che arriva mentre la pagina cambia aspetta in coda. Alla fine la pagina vera prende il posto dei tasti, la griglia si ritira verso il basso e i dettagli rimasti (le righe della lista, il testo, il link) arrivano per ultimi. Sul telefono la griglia ha metà delle colonne e i pezzi vanno uno sotto l'altro. Con il movimento ridotto la griglia compare in dissolvenza, le pagine si scambiano in dissolvenza e la griglia svanisce.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`COLUMNS`	script.js	`8`	Le colonne della griglia, e quindi i tasti, su uno schermo largo; il telefono ne usa la metà.
`STAGGER`	script.js	`0.07`	I secondi fra un tasto e il successivo: 0 = si alzano e ricadono tutti insieme.
`LIFT`	script.js	`0.55`	I secondi che un tasto impiega a salire fuori dallo schermo con la pagina vecchia.
`DROP`	script.js	`0.5`	I secondi che un tasto impiega a ricadere con la pagina nuova.
`BOUNCE`	script.js	`14`	Di quanti pixel un tasto rimbalza quando atterra: 0 = si ferma e basta.
`DIP`	script.js	`5`	Di quanti pixel un tasto si abbassa, come premuto, prima di alzarsi: 0 = parte subito.
`SPEED`	script.js	`1`	La velocità di tutto: 2 è il doppio, 0.5 la metà.

Provali nel Playground

Quando usarla

Per passare da una pagina all'altra in un sito costruito su una griglia che si sente: uno studio di architettura o di grafica, un portfolio, una rivista, un archivio di progetti, il passaggio fra la home e l'elenco dei lavori. Rende bene con una pagina chiara e una scura, come i tasti bianchi e neri.

Sul telefono

La stessa transizione con le misure adattate: la griglia ha quattro colonne invece di otto, quindi quattro tasti, i titoli si stringono fino a stare nella larghezza, il blocco rosso sta sopra il titolo e il testo va sopra il link. Un tocco sul link la fa partire e la riporta indietro.

Con il movimento ridotto

Niente si sposta: la griglia compare in dissolvenza, la pagina nuova compare in dissolvenza sopra la vecchia con tutto già al suo posto, poi la griglia svanisce.

Trappole

I dettagli che arrivano per ultimi (il testo, il link, le righe della lista) venivano preparati, spostati e trasparenti, in un callback della timeline. Con un salto in avanti, come progress(1) quando si ridimensiona la finestra a metà cambio, il tween che li rialza era già partito dai valori vecchi e la pagina restava senza link: ora si preparano mentre la timeline si costruisce, sulla pagina ancora nascosta.
Le copie dentro i tasti si portano dietro anche gli stili in linea scritti da GSAP: le righe della lista, già disegnate alla visita prima, avevano transform in linea e comparivano nei tasti che cadono, prima del loro momento. La regola che le nasconde nelle copie ha !important e, finito il disegno, GSAP toglie i suoi stili con clearProps.
Con tasti larghi quanto le colonne, a riposo fra un tasto e l'altro si vedeva il fondo grigio negli spazi: ogni tasto va dalla metà dello spazio a sinistra alla metà di quello a destra, il primo e l'ultimo fino ai bordi.
Le copie della pagina portavano con sé data-autoclic: il pilota automatico conta tutti gli elementi segnati e cliccava le copie. Nelle copie si tolgono data-autoclic e data-go.
Sul telefono il blocco rosso, alto fino al titolo, finiva sotto le lettere: con quattro colonne sta nella sua riga, sopra il titolo.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Collaudo

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