La transizione a paravento

Transizioni, 3DGSAP, Solo CSSImpegnativaPeso compresso: Demo 7,5 KBGSAP 28 KBGratisScarica lo zip

Un cambio di pagina nello stile minimal: la pagina è un paravento, con le pieghe segnate da righe sottili. Al clic si richiude a fisarmonica contro il bordo sinistro, in 3D, partendo dal pannello libero, e ogni pannello prende la sua luce; dietro c’è la pagina dopo. Tornando indietro il paravento si riapre un pannello dopo l’altro, passa il piano di un soffio e si assesta.

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 folding screen transition</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <!-- the first page: the screen itself, with its folds drawn as hairlines -->
    <section class="page page--a is-on" data-page="a" aria-label="Studio">
      <div class="creases" data-creases aria-hidden="true"></div>
      <header class="bar">
        <span class="brand">Noll</span>
        <nav class="nav" aria-label="Pages">
          <a href="#studio" aria-current="page">Studio</a>
          <a href="#screens" data-go="b">Screens</a>
        </nav>
      </header>
      <div class="main">
        <h1 class="big" data-big>Make a room.</h1>
        <div class="below">
          <p class="lede">Folding screens in oak, linen and paper. Open one to make a room; fold it to give the room back.</p>
          <a class="go" href="#screens" data-go="b" data-autoclic>
            <span class="go__t">Fold it away</span>
            <svg class="go__arrow" viewBox="0 0 26 12" aria-hidden="true"><path d="M1 6h22M18.5 1.5 23.5 6l-5 4.5"/></svg>
          </a>
        </div>
      </div>
      <footer class="foot">
        <span>Folding screens and room dividers</span>
        <span>Made to order</span>
      </footer>
    </section>

    <!-- the second page: the room behind the screen -->
    <section class="page page--b" data-page="b" aria-label="Screens" aria-hidden="true">
      <header class="bar">
        <span class="brand">Noll</span>
        <nav class="nav" aria-label="Pages">
          <a href="#studio" data-go="a">Studio</a>
          <a href="#screens" aria-current="page">Screens</a>
        </nav>
      </header>
      <div class="main">
        <h2 class="big" data-big>Behind it.</h2>
        <ul class="list" aria-label="Screens">
          <li class="row" data-late><span class="row__rule" data-rule></span><span>Oak</span><span class="row__soft">Four panels</span><span class="row__soft row__end">180 cm</span></li>
          <li class="row" data-late><span class="row__rule" data-rule></span><span>Linen</span><span class="row__soft">Three panels</span><span class="row__soft row__end">170 cm</span></li>
          <li class="row" data-late><span class="row__rule" data-rule></span><span>Paper</span><span class="row__soft">Six panels</span><span class="row__soft row__end">160 cm</span></li>
        </ul>
        <a class="go go--back" href="#studio" data-go="a" data-autoclic data-late>
          <svg class="go__arrow" viewBox="0 0 26 12" aria-hidden="true"><path d="M25 6H3M7.5 1.5 2.5 6l5 4.5"/></svg>
          <span class="go__t">Open the screen</span>
        </a>
      </div>
      <footer class="foot" data-late>
        <span>Folding screens and room dividers</span>
        <span>Made to order</span>
      </footer>
    </section>

    <!-- the screen while it folds: hinged panels, each showing its slice of the first page; built by the script -->
    <div class="screen" data-screen 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.

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

Collega Animorio a Claude Code

Cosa fa

Il sito di un laboratorio inventato che fa paraventi, Noll, in due pagine: la prima color carta, Make a room., attraversata da tre righe sottili dove si piegano i pannelli; la seconda quasi nera, Behind it., con l’elenco dei paraventi in quercia, lino e carta. All’apertura il paravento si apre da sinistra sul fondo scuro, un pannello dopo l’altro, e il titolo prende fiato sulla larghezza. Al clic su Fold it away le pieghe si scuriscono come cerniere che prendono il peso, il paravento dà una piccola spinta dall’altra parte e poi si richiude a fisarmonica contro il bordo sinistro: per primo il pannello libero a destra, poi gli altri, a zig-zag, e quelli girati dalla parte opposta alla luce si scuriscono. Il titolo si spezza sulle pieghe. Dietro c’è la stanza, la pagina scura, che viene avanti di un soffio; il suo titolo prende fiato e l’elenco si disegna. Al clic su Open the screen l’elenco scende e svanisce, la stanza si allontana di un soffio e il paravento si riapre dal bordo sinistro, un pannello dopo l’altro, va un poco oltre il piano e si assesta.

Come funziona

Cerniere una dentro l’altra

Il paravento è una catena di cerniere: ogni cerniera è un div con transform-style: preserve-3d e transform-origin sul bordo sinistro, e contiene la faccia del suo pannello e la cerniera dopo, spostata a destra di una larghezza. Girare una cerniera porta con sé tutti i pannelli dopo di lei. Ogni faccia ha overflow: hidden e dentro una copia intera della pagina, spostata a sinistra di quanto serve per mostrare la sua fetta: le copie non hanno data-go né data-autoclic e i loro link escono dal Tab.

Lo zig-zag

Ogni pannello ha la sua piega f, da 0 (piatto) a 90 (di taglio). L’angolo assoluto è +f per i pannelli pari e −f per i dispari, e a ogni cerniera si scrive la differenza con il pannello prima: rotateY(+f), rotateY(−2f), rotateY(+2f)… Così i bordi si toccano sempre e il paravento si schiaccia contro il bordo sinistro. Chiudendo, le pieghe partono dal pannello libero; aprendo, da quello attaccato al bordo, sfalsate di STAGGER.

La luce sui pannelli

Sopra ogni faccia c’è un velo scuro con opacità SHADE · sin(f) per i pannelli girati via dalla finestra e un terzo di quella per gli altri: chiudendosi, il paravento si riempie di strisce chiare e scure come un paravento vero. Le pieghe a riposo sono righe di un pixel al 17% d’inchiostro; al clic si scuriscono prima che il paravento si muova.

Le curve e l’assestamento

La timeline muove un solo numero da 0 a 1 con ease none; ogni pannello ne ricava il suo tempo e lo passa per power3.inOut chiudendo e per back.out(1.1) aprendo, così il paravento riaperto va qualche grado oltre il piano e torna. Prima di chiudersi riceve una spinta di 3 gradi dall’altra parte. La pagina dietro viene avanti da scale 0.965 a 1 mentre il paravento se ne va.

Misure, telefono e movimento ridotto

Le larghezze dei pannelli e delle copie si scrivono di nuovo a ogni ridimensionamento, anche a metà piega: gli angoli sono numeri, quindi il disegno continua giusto. Al telefono i pannelli sono uno di meno. La prospettiva sta solo sul paravento, non sul palco. Con il movimento ridotto le due pagine si scambiano in dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PANELS`	script.js	`4`	Quanti pannelli ha il paravento su uno schermo largo; al telefono uno di meno.
`FOLD`	script.js	`1.15`	I secondi che il paravento impiega a richiudersi.
`UNFOLD`	script.js	`1.3`	I secondi che il paravento impiega a riaprirsi.
`STAGGER`	script.js	`0.35`	Quanto sono sfalsati i pannelli, come parte del tempo: 0 = tutti insieme.
`SHADE`	script.js	`0.4`	Quanto si scurisce un pannello girato via dalla luce.
`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 arredamento o di interni: un marchio di mobili, uno studio di interior design, un negozio di tessuti, un hotel che mostra le stanze, la pagina di una collezione che si apre su un catalogo. Va bene dove la seconda pagina è «dietro» la prima: una stanza, un retrobottega, una collezione.

Sul telefono

La stessa piega con un pannello di meno, così i pannelli restano larghi abbastanza da leggere il titolo spezzato sulle pieghe; il paravento si chiude contro il bordo sinistro dello schermo alto e si riapre da lì.

Con il movimento ridotto

Niente si piega: la pagina dopo compare in dissolvenza sopra quella di prima, con il titolo e l’elenco già al loro posto.

Trappole

overflow: hidden su un elemento con preserve-3d lo appiattisce, e la fisarmonica diventava un foglio solo: il ritaglio sta su una faccia che non ha figli in 3D, e la cerniera dopo è sorella della faccia, non figlia.
Il paravento nascosto con visibility: hidden si vedeva lo stesso, perché le copie della pagina dentro avevano visibility: visible e un figlio visibile si vede anche in un genitore nascosto: il paravento si nasconde con display: none.
Con il paravento quasi piatto Chrome lasciava trasparire il titolo della pagina dietro (le pieghe si interrompevano proprio lì): finché tutti i pannelli sono sotto i quattro gradi la pagina dietro non si disegna, tanto non si vede.

Librerie

GSAP 3.15.0, Bricolage Grotesque (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 19 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.