La fisarmonica che si stacca

Fisarmoniche, SVG, Fisica, TransizioniGSAPImpegnativaPeso compresso: Demo 9,2 KBGSAP 28 KBGratisScarica lo zip

Le domande di una piscina all’aperto stanno su una scheda sola, color acqua. Aprendone una, la scheda si strappa lungo i due bordi della riga come un liquido: le fessure corrono dai lati, l’ultimo filo si spezza in due gocce che rientrano nei bordi e il pezzo si stacca e si allunga sulla risposta. Richiusa, i pezzi si cercano, si toccano e la cucitura si richiude fino ai lati.

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 pull-apart accordion</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geologica@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the questions of an open-air pool. At rest they are one card; opening a question, the card tears along both
         edges of its row like a liquid, the row comes away as a piece of its own and stretches down to show the
         answer. The card is a single path the script draws behind the rows -->
    <div class="faq" data-faq>
      <svg class="faq__shape" aria-hidden="true" focusable="false">
        <defs>
          <linearGradient id="faq-water" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="600" data-gradient>
            <stop offset="0" class="faq__stop-top"/>
            <stop offset="1" class="faq__stop-deep"/>
          </linearGradient>
          <filter id="faq-lift" x="-20%" y="-20%" width="140%" height="150%" color-interpolation-filters="sRGB">
            <feDropShadow class="faq__shadow-far" dx="0" dy="14" stdDeviation="14"/>
            <feDropShadow class="faq__shadow-near" dx="0" dy="2" stdDeviation="1.5"/>
          </filter>
          <filter id="faq-float" x="-30%" y="-40%" width="160%" height="220%" color-interpolation-filters="sRGB">
            <feGaussianBlur in="SourceAlpha" stdDeviation="14"/>
            <feOffset dy="16" result="soft"/>
            <feFlood class="faq__float"/>
            <feComposite in2="soft" operator="in"/>
          </filter>
        </defs>
        <g filter="url(#faq-float)" data-lifts></g>
        <path class="faq__body" fill="url(#faq-water)" filter="url(#faq-lift)" data-body/>
        <g data-seams></g>
      </svg>

      <div class="faq__item" data-item>
        <h3 class="faq__head"><button class="faq__q" type="button" id="faq-q1" aria-expanded="false" aria-controls="faq-a1"><span class="faq__text">Do I need to book?</span><svg class="faq__chev" viewBox="0 0 16 10" aria-hidden="true"><path/></svg></button></h3>
        <div class="faq__a" id="faq-a1" role="region" aria-labelledby="faq-q1" hidden><div class="faq__inner"><p>Lanes go in 45-minute sessions you can book up to a week ahead. If a lane is free you can just walk in: the board by the gate shows which ones.</p></div></div>
      </div>
      <div class="faq__item" data-item>
        <h3 class="faq__head"><button class="faq__q" type="button" id="faq-q2" aria-expanded="false" aria-controls="faq-a2"><span class="faq__text">Is the water heated?</span><svg class="faq__chev" viewBox="0 0 16 10" aria-hidden="true"><path/></svg></button></h3>
        <div class="faq__a" id="faq-a2" role="region" aria-labelledby="faq-q2" hidden><div class="faq__inner"><p>All year round: 25 degrees in the long pool and 30 in the shallow one. On cold mornings the steam rising off the water is half the fun.</p></div></div>
      </div>
      <div class="faq__item" data-item>
        <h3 class="faq__head"><button class="faq__q" type="button" id="faq-q3" aria-expanded="false" aria-controls="faq-a3"><span class="faq__text">What should I bring?</span><svg class="faq__chev" viewBox="0 0 16 10" aria-hidden="true"><path/></svg></button></h3>
        <div class="faq__a" id="faq-a3" role="region" aria-labelledby="faq-q3" hidden><div class="faq__inner"><p>A swim cap, a coin for the lockers and a towel, or borrow one at the desk. Flip-flops help on the deck when the tiles are cold.</p></div></div>
      </div>
      <div class="faq__item" data-item>
        <h3 class="faq__head"><button class="faq__q" type="button" id="faq-q4" aria-expanded="false" aria-controls="faq-a4"><span class="faq__text">Can kids swim alone?</span><svg class="faq__chev" viewBox="0 0 16 10" aria-hidden="true"><path/></svg></button></h3>
        <div class="faq__a" id="faq-a4" role="region" aria-labelledby="faq-q4" hidden><div class="faq__inner"><p>From eight years old, after a short swim test at the desk. Younger children swim with an adult, one grown-up for every two children.</p></div></div>
      </div>
      <div class="faq__item" data-item>
        <h3 class="faq__head"><button class="faq__q" type="button" id="faq-q5" aria-expanded="false" aria-controls="faq-a5"><span class="faq__text">What if it storms?</span><svg class="faq__chev" viewBox="0 0 16 10" aria-hidden="true"><path/></svg></button></h3>
        <div class="faq__a" id="faq-a5" role="region" aria-labelledby="faq-q5" hidden><div class="faq__inner"><p>We clear the water at the first rumble of thunder and wait half an hour after the last one. Your session goes straight back into your account.</p></div></div>
      </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.

26 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 fisarmonica che si stacca» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco, da sola al centro, una scheda dagli angoli tondi color acqua di piscina, più chiara in alto e più fonda in basso, con cinque domande in bianco separate da righe sottili: Do I need to book?, Is the water heated?, What should I bring?, Can kids swim alone?, What if it storms?, ognuna con una freccetta. All’arrivo le cinque righe compaiono come gocce separate e, dall’alto in basso, ognuna cola in quella sopra finché la scheda è una sola; poi si apre la seconda domanda. Aprendo una domanda, ai due bordi della sua riga entrano dai lati due fessure con la punta tonda, mentre la riga scende appena: corrono verso il punto in cui la domanda è stata premuta, gli angoli che lasciano dietro si arrotondano e la riga sottile in mezzo svanisce. Quando le due punte si toccano resta un collo d’acqua che si assottiglia e si spezza: i due capi restano un attimo appesi come gocce, uno sotto il pezzo di sopra e uno sopra quello di sotto, e rientrano nei bordi ondeggiando, mentre i pezzi fanno un piccolo salto per allontanarsi. Il pezzo staccato si allunga verso il basso e scopre la risposta, che arriva sfocata e va a fuoco; i pezzi sotto scivolano giù per fargli posto e sotto di lui cresce un’ombra sua, come se galleggiasse. La freccetta si gira passando per una linea piatta. Aprendone un’altra, quella aperta si accorcia e torna su: quando i pezzi sono vicini, i due capi strappati si allungano uno verso l’altro, si toccano e la cucitura si richiude dal punto in cui si sono toccati fino ai lati. Sotto il mouse la scheda si stringe un poco ai due bordi della domanda, dove si strapperebbe.

Come funziona

Una scheda, un tracciato

La scheda è un solo path SVG rifatto a ogni fotogramma dalle posizioni delle righe. Ogni gruppo di righe ancora attaccate è un sotto-tracciato: scende lungo il lato destro e, a ogni cucitura che si sta strappando, entra nella fessura (arco d’angolo, bordo dritto, mezza ellisse per la punta, bordo dritto, arco d’angolo); poi risale dal lato sinistro facendo lo stesso. Le domande sono pulsanti in posizione assoluta che si muovono solo con translate3d; ogni risposta è tagliata da un clip-path inset al fondo del suo pezzo. Mentre si muove, la pagina non viene mai ricalcolata.

Molle che si sommano

Quanto si vede di ogni risposta e ogni spazio fra due righe sono molle, con rigidezza e smorzatura ricavate da una durata e da un rimbalzo come le descrive Apple (OPEN e BOUNCE; gli spazi hanno una molla più svelta). La cima di ogni riga è il fondo di quella sopra più lo spazio fra loro: i pezzi sotto fanno posto da soli e non si sovrappongono mai, nemmeno quando una molla va oltre. I conti si fanno a passi di 1/240 di secondo, col passo del fotogramma limitato a 1/30.

Lo strappo

Una tween di GSAP porta l’avanzamento dello strappo da 0 a 1 con power2.in, piano all’inizio e poi di colpo, in TEAR secondi. Ogni fessura è lunga quella frazione della distanza fra il suo lato e il punto d’incontro (dove si è premuto; il centro per la tastiera), e la sua punta è mezza ellisse alta quanto lo spazio: quando le due punte si toccano, il collo è largo zero. Arrivati a 1 i pezzi sono due, ognuno col suo capo strappato: una gobba fatta da due curve di Bézier, alta il 62 per cento dello spazio, che rientra su una molla regolata da WOBBLE, mentre lo spazio riceve una spinta.

Ricucire

Chiudendo, quando lo spazio scende sotto il 60 per cento di GAP i due capi si allungano uno verso l’altro; quando si toccano la cucitura torna intera con le fessure lunghe fino al punto d’incontro, e una tween power3.out le riporta ai lati in 0,36 secondi. Tutto si può interrompere: riaprendo a metà, la tween si gira e la fessura riparte da dove si trova.

Ombre, righe e riposo

Le righe sottili si disegnano solo sul ponte d’acqua che resta e svaniscono man mano che lo strappo corre. La scheda ha due feDropShadow; il pezzo aperto ha in più un’ombra sua, un rettangolo più stretto sfocato e spostato in giù, che cresce con la risposta. Il ciclo gira sul ticker di GSAP solo mentre qualcosa si muove. Le domande sono button dentro un h3 con aria-expanded e aria-controls, le risposte regioni hidden da chiuse; frecce, Home e End passano da una domanda all’altra. La domanda dopo quella aperta ha data-autoclic per l’anteprima.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`FIRST`	script.js	`1`	La domanda aperta all’apertura della pagina, da 0; −1 per nessuna.
`ONLY_ONE`	script.js	`true`	Aprendo una domanda si chiude quella aperta; con false se ne possono aprire tante.
`GAP`	script.js	`16`	Lo spazio fra due pezzi di scheda staccati, in pixel.
`OPEN`	script.js	`0.62`	I secondi di una risposta che si apre o si chiude.
`BOUNCE`	script.js	`0.14`	Quanto le risposte e i pezzi vanno oltre il loro posto e tornano (0 per niente).
`TEAR`	script.js	`0.42`	I secondi che lo strappo ci mette ad attraversare la scheda.
`WOBBLE`	script.js	`0.6`	Quanto ondeggia un capo strappato rientrando nel bordo (0 per niente).
`HINT`	script.js	`8`	Quanto si stringe la scheda ai bordi della domanda sotto il mouse, in pixel; 0 per niente.
`ROUND`	script.js	`22`	Il raggio degli angoli della scheda, in pixel.

Provali nel Playground

Quando usarla

Per le domande frequenti di un servizio, di un locale o di un’app, per le condizioni di un abbonamento o per le sezioni di una scheda prodotto: ovunque le risposte sono tante e se ne legge una alla volta, e il sito ha un carattere morbido, fresco o giocoso. Il pezzo staccato dice subito quale risposta è aperta anche da lontano.

Sul telefono

La scheda è larga al massimo 640 pixel e sul telefono si stringe allo schermo, con 16 pixel di margine per lato (358 su un telefono di 390). Le righe chiuse sono alte 80 pixel sul computer e 72 sul telefono, come nell’altra fisarmonica della libreria, e le domande scendono a 17 pixel. Il dito che preme una domanda fa stringere la scheda ai suoi bordi come il mouse sopra, e lo strappo corre verso il punto toccato.

Con il movimento ridotto

Niente strappo e niente spostamenti: la scheda si divide e si richiude di colpo, già al suo posto, e il testo della risposta compare in dissolvenza. All’apertura la scheda compare in dissolvenza con la seconda domanda già aperta; niente gocce che si fondono e niente pizzico sotto il mouse.

Trappole

Un filo di luce lungo i bordi alti della scheda (lo stesso tracciato ripassato un pixel più in basso e tagliato dentro la scheda) disegnava righe chiare dentro le fessure durante lo strappo: sembravano graffi. È stato tolto.
Il clip-path su un elemento con l’attributo transform si misura nello spazio già spostato: il taglio scendeva insieme al tratto e non tagliava niente. Il taglio va messo su un g intorno, lo spostamento sull’elemento dentro.
Con gli spazi sulla stessa molla delle risposte, le fessure attraversavano la scheda quando erano ancora sottili come un capello e lo strappo sembrava un taglio di forbici. Gli spazi hanno ora una molla loro, più svelta: la fessura è già aperta mentre corre.
All’arrivo le gocce si fondevano mentre la scheda era ancora trasparente, e la fusione non si vedeva. Ora gli spazi restano aperti finché le righe sono comparse, poi si lasciano andare dall’alto, uno ogni 90 millesimi di secondo.
La lista è centrata nella pagina: se la sua altezza seguisse le risposte, aprendone una la cima salirebbe di metà. Ha quindi un’altezza fissa, con posto per tutte le domande, la risposta più lunga e due spazi.
Il raggio degli angoli stava in una variabile CSS che lo script legge solo quando misura: cambiato dal vivo nel Playground, gli angoli non seguivano. È diventato un valore dello script (ROUND).
Due capi strappati possono non toccarsi mai, se lo spazio si chiude più in fretta di quanto si allungano o mentre ondeggiano sotto lo zero: i pezzi resterebbero disegnati separati a distanza zero, con una tacca ai lati. Sotto 0,6 pixel di spazio la cucitura si richiude comunque.
Sul telefono, una domanda toccata subito dopo l’arrivo veniva richiusa un attimo dopo dall’apertura automatica della seconda. Ora una scelta fatta prima cancella l’apertura automatica.

Librerie

GSAP 3.15.0, Geologica (font variabile) 5.3.0.

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

Collaudo

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