La fisarmonica delle domande

Fisarmoniche, Testo, TransizioniGSAPMediaPeso compresso: Demo 4,4 KBGSAP + SplitText 31 KBGratisScarica lo zip

Cinque domande con una risposta aperta alla volta: aprendone una il più gira in una croce dentro un cerchio che si riempie, dietro si accende una scheda scura e le righe della risposta salgono una dopo l’altra.

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 questions accordion</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the questions: one open at a time. Opening one, its plus turns into a cross inside a disc that fills, a card
         lights up behind it, the answer opens and its lines rise one after another -->
    <div class="faq" data-faq>
      <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">How long does delivery take?</span><span class="faq__icon" aria-hidden="true"><span></span><span></span></span></button></h3>
        <div class="faq__a" id="faq-a1" role="region" aria-labelledby="faq-q1" hidden><p>Orders leave the workshop within two working days. Delivery takes three to five days in Europe and up to ten elsewhere, and you get a tracking link as soon as the parcel moves.</p></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">Can I change or cancel my order?</span><span class="faq__icon" aria-hidden="true"><span></span><span></span></span></button></h3>
        <div class="faq__a" id="faq-a2" role="region" aria-labelledby="faq-q2" hidden><p>Yes, until it ships. Reply to the confirmation e-mail and we will change the size or the address, or cancel it altogether.</p></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 if it doesn’t fit?</span><span class="faq__icon" aria-hidden="true"><span></span><span></span></span></button></h3>
        <div class="faq__a" id="faq-a3" role="region" aria-labelledby="faq-q3" hidden><p>Send it back within thirty days, unworn, and you get a full refund. A return label is already in the box.</p></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">Do you gift-wrap?</span><span class="faq__icon" aria-hidden="true"><span></span><span></span></span></button></h3>
        <div class="faq__a" id="faq-a4" role="region" aria-labelledby="faq-q4" hidden><p>Every order can be wrapped in recycled paper with a handwritten card. Leave a note at checkout and tell us what to write.</p></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">How should I care for it?</span><span class="faq__icon" aria-hidden="true"><span></span><span></span></span></button></h3>
        <div class="faq__a" id="faq-a5" role="region" aria-labelledby="faq-q5" hidden><p>Wash it cold and inside out, and dry it flat in the shade. It gets softer with every wash.</p></div>
      </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/SplitText.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.

19 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 delle domande» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero cinque domande separate da righe sottili, ognuna con un più dentro un cerchio. Aprendo una domanda il più gira di 135 gradi e diventa una croce mentre il cerchio si riempie di bianco, dietro la riga si accende una scheda scura dagli angoli tondi, la risposta si apre e le sue righe salgono una dopo l’altra, ognuna da sotto il proprio bordo. Aprendone un’altra, quella aperta si chiude nello stesso momento: le sue righe svaniscono, si ripiega e la croce torna un più. Sotto il mouse una domanda si sposta un poco a destra. All’apertura le domande arrivano una dopo l’altra e si apre la prima risposta.

Come funziona

Le domande

Ogni domanda è un pulsante dentro un titolo, con aria-expanded e aria-controls, e la sua risposta è una regione che a riposo è hidden. Il più sono due barrette in un cerchio fatto con un box-shadow inset; la scheda dietro la riga è uno pseudo-elemento più largo della riga, disegnato da due variabili CSS che GSAP muove (--card-on e --card-scale).

Aprire

La risposta va da altezza zero alla sua (height auto, misurata da GSAP) in OPEN secondi con power3.inOut. Le sue righe sono tagliate da SplitText con una maschera ciascuna e salgono da yPercent 110 a zero, LINES secondi una dopo l’altra. L’icona gira di SPIN gradi con back.out e prende il fondo chiaro e le barrette scure.

Chiudere

Le righe svaniscono in 0,18 secondi, l’altezza torna a zero, l’icona torna indietro e la scheda si spegne; alla fine la risposta torna hidden e SplitText rimette il testo com’era. Una domanda riaperta a metà chiusura riparte dall’altezza in cui si trova.

Tastiera e screen reader

Invio e Spazio aprono e chiudono; le frecce in su e in giù, Home e End passano da una domanda all’altra. SplitText mette sul paragrafo un aria-label con la frase intera e nasconde le righe, così gli screen reader leggono la risposta come prima.

Tenuta dall’alto

La lista è tenuta in alto nella pagina, così aprendo e chiudendo si muove solo il suo fondo; se la finestra cambia mentre una risposta è aperta, il testo torna intero e va a capo da solo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`OPEN`	script.js	`0.55`	I secondi di una risposta che si apre (per chiudersi un po’ meno).
`LINES`	script.js	`0.07`	I secondi fra una riga della risposta e la successiva.
`SPIN`	script.js	`135`	Quanto gira il più aprendosi, in gradi: 135 fa una croce.
`FIRST`	script.js	`0`	La domanda aperta all’apertura della pagina, da 0; −1 per nessuna.

Provali nel Playground

Quando usarla

Per le domande frequenti di un negozio, di un servizio o di un evento, per le condizioni di vendita o per una scheda di dettagli: ovunque ci sono tante risposte e se ne legge una alla volta.

Sul telefono

Le domande si stringono alla larghezza dello schermo e il loro carattere scende a 18 pixel; i tocchi aprono e chiudono come i clic.

Con il movimento ridotto

Le risposte si aprono e si chiudono di colpo, senza righe che salgono; la croce e la scheda compaiono subito e all’apertura la prima risposta è già aperta.

Trappole

Le righe di SplitText valgono solo per la larghezza in cui sono state tagliate: se la finestra cambia, il testo torna intero, e per questo la risposta si taglia ogni volta che si apre.
Riaprendo una risposta mentre si chiude, partire da altezza zero darebbe uno scatto: si parte dall’altezza in cui si trova, e da zero solo se era chiusa del tutto.
Il colore dell’icona va animato fra colori veri: GSAP non sa interpolare un var() scritto in un tween, per questo il colore del testo si legge dalla variabile all’inizio.
La scheda dietro la riga è più larga della riga stessa (con un inset negativo): così la domanda non cambia posto quando la scheda si accende.

Librerie

GSAP 3.15.0, SplitText (GSAP) 3.15.0, Instrument Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 4,4 KB; le librerie: GSAP + SplitText 31 KB.

Collaudo

Provata il 3 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

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.