La transizione dal menabò

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

Un cambio di pagina nello stile minimal: al clic la pagina fa un passo indietro finché tutto il sito si vede in fila come il menabò di una rivista, con le cornici sottili e i nomi delle pagine su una riga. Due coppie di crocini rossi corrono fino alla pagina scelta, allungandosi e richiudendosi con una molla, la fila la porta al centro e la vista ci rientra.

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 flatplan 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 whole site laid out in a row, like the pages of a magazine pinned up on the wall: the camera moves over it -->
    <div class="track" data-track>
      <section class="page page--index" data-page aria-label="Index">
        <header class="bar">
          <a class="brand" href="#index" data-go="0">Marlow</a>
          <nav class="nav" aria-label="Pages">
            <a href="#index" data-go="0" aria-current="page">Index</a>
            <a href="#work" data-go="1">Work</a>
            <a href="#studio" data-go="2">Studio</a>
            <a href="#contact" data-go="3">Contact</a>
          </nav>
        </header>
        <div class="body">
          <p class="kicker">Furniture, rooms and type</p>
          <h1 class="title" data-title>Quiet work.</h1>
          <p class="lede">A small studio that makes a few good things each year, and keeps them going for a long time.</p>
        </div>
        <footer class="foot">
          <span class="note">Since 2014</span>
          <a class="next" href="#work" data-go="1" data-autoclic>
            <span class="next__text">Next, Work</span>
            <span class="next__arrow" aria-hidden="true"><span class="next__shaft"></span><svg class="next__head" viewBox="0 0 8 12"><path d="M1.5 1.5 6.5 6l-5 4.5"/></svg></span>
          </a>
        </footer>
      </section>

      <section class="page page--work" data-page aria-label="Work">
        <header class="bar">
          <a class="brand" href="#index" data-go="0">Marlow</a>
          <nav class="nav" aria-label="Pages">
            <a href="#index" data-go="0">Index</a>
            <a href="#work" data-go="1" aria-current="page">Work</a>
            <a href="#studio" data-go="2">Studio</a>
            <a href="#contact" data-go="3">Contact</a>
          </nav>
        </header>
        <div class="body">
          <h2 class="title" data-title>Work</h2>
          <ul class="list">
            <li><span>Harbour chair</span><span class="list__kind">Oak, wool</span><span>2025</span></li>
            <li><span>Linden lamp</span><span class="list__kind">Brass, paper</span><span>2024</span></li>
            <li><span>Atlas shelf</span><span class="list__kind">Ash</span><span>2023</span></li>
          </ul>
        </div>
        <footer class="foot">
          <span class="note">Three of forty</span>
          <a class="next" href="#studio" data-go="2" data-autoclic>
            <span class="next__text">Next, Studio</span>
            <span class="next__arrow" aria-hidden="true"><span class="next__shaft"></span><svg class="next__head" viewBox="0 0 8 12"><path d="M1.5 1.5 6.5 6l-5 4.5"/></svg></span>
          </a>
        </footer>
      </section>

      <section class="page page--studio" data-page aria-label="Studio">
        <header class="bar">
          <a class="brand" href="#index" data-go="0">Marlow</a>
          <nav class="nav" aria-label="Pages">
            <a href="#index" data-go="0">Index</a>
            <a href="#work" data-go="1">Work</a>
            <a href="#studio" data-go="2" aria-current="page">Studio</a>
            <a href="#contact" data-go="3">Contact</a>
          </nav>
        </header>
        <div class="body">
          <h2 class="title" data-title>Studio</h2>
          <div class="cols">
            <p>Four people around one long table, a workshop downstairs and a window onto the canal.</p>
            <p>We draw everything by hand first, then build it full size, then sit on it for a week.</p>
          </div>
        </div>
        <footer class="foot">
          <span class="note">Visits by appointment</span>
          <a class="next" href="#contact" data-go="3" data-autoclic>
            <span class="next__text">Next, Contact</span>
            <span class="next__arrow" aria-hidden="true"><span class="next__shaft"></span><svg class="next__head" viewBox="0 0 8 12"><path d="M1.5 1.5 6.5 6l-5 4.5"/></svg></span>
          </a>
        </footer>
      </section>

      <section class="page page--contact" data-page aria-label="Contact">
        <header class="bar">
          <a class="brand" href="#index" data-go="0">Marlow</a>
          <nav class="nav" aria-label="Pages">
            <a href="#index" data-go="0">Index</a>
            <a href="#work" data-go="1">Work</a>
            <a href="#studio" data-go="2">Studio</a>
            <a href="#contact" data-go="3" aria-current="page">Contact</a>
          </nav>
        </header>
        <div class="body">
          <h2 class="title" data-title>Say hello.</h2>
          <p class="lede">Monday to Friday, nine to six. Studio 4, Canal Yard.</p>
        </div>
        <footer class="foot">
          <span class="note">Write any time</span>
          <a class="next" href="#index" data-go="0" data-autoclic>
            <span class="next__text">Back to the start</span>
            <span class="next__arrow" aria-hidden="true"><span class="next__shaft"></span><svg class="next__head" viewBox="0 0 8 12"><path d="M1.5 1.5 6.5 6l-5 4.5"/></svg></span>
          </a>
        </footer>
      </section>
    </div>

    <!-- the flatplan: hairline frames, the rule with the page names, the crop marks (all placed by the script) -->
    <div class="plan" data-plan aria-hidden="true">
      <div class="rule" data-rule><span class="rule__line"></span></div>
      <div class="crop" data-crop>
        <span class="crop__c crop__c--tl"><i></i></span>
        <span class="crop__c crop__c--tr"><i></i></span>
        <span class="crop__c crop__c--bl"><i></i></span>
        <span class="crop__c crop__c--br"><i></i></span>
      </div>
    </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.

62 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 dal menabò» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Il sito di uno studio di arredamento inventato, Marlow, in quattro pagine e quasi niente: Index, Work, Studio e Contact, ognuna con un titolo grande in Archivo stretto, una riga di testo e il link alla pagina dopo. All’apertura il sito si vede dall’alto come un menabò: le pagine in fila sul fondo grigio caldo, una riga sottile sotto che si disegna dal centro, le tacche ai bordi di ogni pagina, i nomi che salgono uno dopo l’altro e quattro crocini rossi che si disegnano agli angoli della prima. Poi la vista ci entra e il titolo sente l’arrivo: le lettere scendono di un pelo una dopo l’altra e tornano su con una molla. Al clic su Next, Work (o su una voce del menu) la pagina si allontana, abbastanza da vedere sia sé stessa sia quella chiesta, con lo sguardo a metà strada fra le due. I crocini corrono: la coppia davanti parte per prima, quella dietro la segue un attimo dopo, così la cornice si allunga sopra le pagine in mezzo e poi si richiude intorno a quella nuova con un piccolo rimbalzo; sotto, il nome della pagina nuova prende peso e si allarga. La fila scivola finché la pagina scelta è al centro e intanto la vista ci rientra, si ferma un pelo oltre la misura piena e si assesta. Dall’ultima pagina, Back to the start torna alla prima attraversando tutto il sito: la vista si allontana di più e i crocini fanno tutta la fila.

Come funziona

Il sito in fila

Le quattro pagine sono vere, grandi esattamente quanto lo schermo, e stanno una accanto all’altra dentro un solo contenitore, distanti GAP volte la loro larghezza. Lo script non muove mai le pagine: muove la vista. La vista sono due numeri, cx (la pagina al centro, che può essere anche 1,4, fra due pagine) e s (lo zoom), e da questi due numeri esce un solo transform sul contenitore: translate per mettere cx al centro e scale(s) con l’origine in alto a sinistra. Così passo indietro, scorrimento e rientro sono tre tween su due numeri.

Il menabò in un altro strato

Le cornici, la riga, le tacche, i nomi e i crocini non stanno dentro le pagine: un bordo da un pixel rimpicciolito a un terzo diventerebbe un terzo di pixel e sparirebbe. Stanno in uno strato sopra, a misura vera, e a ogni fotogramma la funzione box(p) dice dove cade la pagina p con la vista di quel momento. Lo strato si vede tanto quanto la vista è lontana: opacità da 0 a misura piena fino a 1 a SCALE.

I crocini che si allungano

I quattro crocini seguono due numeri, pl e pr: la pagina inquadrata dalla coppia di sinistra e quella inquadrata dalla coppia di destra. Andando avanti parte prima pr, con power3.inOut, e STRETCH secondi dopo parte pl, con back.out: per un momento le due coppie inquadrano pagine diverse e la cornice si allunga sopra quelle in mezzo, poi la coppia dietro arriva, supera di un niente e si richiude. Andando indietro le parti si scambiano. Ogni braccio si disegna dal suo angolo con scale e back.out.

Quanto allontanarsi

Per una pagina vicina basta SCALE; per una lontana la vista si allontana finché le due pagine e quelle in mezzo stanno nel 90 per cento della larghezza, e guarda a metà strada fra le due. Poi la fila scorre fino alla pagina nuova mentre la vista rientra già: i due tween si sovrappongono e il movimento diventa una curva sola. Il rientro va a 1,006 con power3.inOut e si posa a 1 con power2.out; intanto le lettere del titolo nuovo scendono di 0,045em, una dopo l’altra, e tornano con elastic.out.

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 e parte appena la pagina riempie lo schermo, senza aspettare l’ultimo assestamento. Solo la pagina sullo schermo si raggiunge col Tab e con i lettori di schermo. Sul telefono le pagine sono alte e strette e il menabò è lo stesso, più piccolo. Con il movimento ridotto niente si sposta: la pagina svanisce e quella nuova compare già al suo posto.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SCALE`	script.js	`0.3`	Quanto diventano piccole le pagine nel menabò: 0.3 è un terzo dello schermo, 0.5 la metà. Per le pagine lontane la vista si allontana comunque di più.
`GAP`	script.js	`0.12`	Lo spazio fra due pagine, in parti della larghezza di una pagina.
`OUT`	script.js	`0.7`	I secondi del passo indietro.
`MOVE`	script.js	`0.6`	I secondi che i crocini impiegano a correre fino alla pagina accanto (un po’ di più per quelle lontane).
`STRETCH`	script.js	`0.14`	Quanto la coppia di crocini dietro resta indietro rispetto a quella davanti, in secondi: 0 = la cornice si sposta rigida.
`IN`	script.js	`0.8`	I secondi del rientro nella pagina nuova.
`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 di poche pagine dove conta l’insieme: il portfolio di un designer o di un fotografo, lo studio di un architetto, una rivista o un piccolo editore, la presentazione di una collezione. Fa vedere in un colpo d’occhio dove si è e dove si va, quindi funziona bene quando le pagine sono poche (da tre a sei) e hanno facce diverse.

Sul telefono

La stessa transizione con le misure adattate: le pagine sono alte e strette come lo schermo, il menabò le mostra in fila più piccole, la riga e i nomi stanno sotto. I titoli si adattano alla larghezza e un tocco sul link fa il giro.

Con il movimento ridotto

Niente si sposta e niente si ingrandisce: il menabò non compare, la pagina svanisce e quella nuova compare in dissolvenza già al suo posto.

Trappole

Dall’ultima pagina alla prima, con lo zoom fisso, la coppia di crocini davanti correva fuori dallo schermo e per un momento non se ne vedeva nessuno: ora la vista si allontana quanto serve per vedere le due pagine e guarda a metà strada fra loro.
Le cornici disegnate come bordo delle pagine si rimpiccolivano con loro e sparivano: tutto il menabò sta in uno strato a misura vera, rimesso al suo posto a ogni fotogramma.
Il pilota automatico delle anteprime clicca ogni 2,8 secondi e il giro dall’ultima pagina alla prima dura quasi tanto: il clic che arriva prima della fine va in coda e parte appena la pagina riempie lo schermo, tagliando solo l’ultimo assestamento.
La coda si svuota dentro un callback della timeline che finisce, e la nuova timeline porta a termine la vecchia con progress(1): chiamarlo dall’interno della stessa timeline la interromperebbe a metà, quindi il clic in coda parte un attimo dopo con delayedCall.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 7,3 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.