Il menu col bruco
Menu, Hover, Transizioni
NuovaGratis
Tutti i componenti
Le schede col segnalibro
Quattro schede sotto una riga, e un nastro di stoffa rosso che pende dalla riga sopra quella scelta: cambiando scheda il nastro si arrotola, scorre lungo la riga e ricade sopra la nuova dondolando, mentre il testo entra dal lato da cui arriva.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The bookmark tabs</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the tabs: a ribbon hangs from the top rule above the chosen tab. Choosing another one, the ribbon rolls up,
slides along the rule and drops above it, swinging; the text below comes in from the side of the new tab -->
<div class="book" data-book>
<div class="book__tabs" role="tablist" aria-label="About the house" data-tabs>
<span class="ribbon" aria-hidden="true" data-ribbon><span class="ribbon__cloth" data-cloth></span></span>
<button class="tab" type="button" role="tab" id="tab-rooms" aria-controls="page-rooms" aria-selected="true">The rooms</button>
<button class="tab" type="button" role="tab" id="tab-breakfast" aria-controls="page-breakfast" aria-selected="false" tabindex="-1">Breakfast</button>
<button class="tab" type="button" role="tab" id="tab-arrival" aria-controls="page-arrival" aria-selected="false" tabindex="-1">Getting here</button>
<button class="tab" type="button" role="tab" id="tab-rules" aria-controls="page-rules" aria-selected="false" tabindex="-1">House rules</button>
</div>
<div class="book__pages" data-pages>
<section class="page" role="tabpanel" id="page-rooms" aria-labelledby="tab-rooms" tabindex="0">
<h2>Six rooms under old beams</h2>
<p>Each one has its own bathroom, linen sheets and a window that opens onto the vines. The two on the top floor share a small terrace for the evening.</p>
</section>
<section class="page" role="tabpanel" id="page-breakfast" aria-labelledby="tab-breakfast" tabindex="0" hidden>
<h2>Served until half past ten</h2>
<p>Bread from the village oven, eggs from the hens behind the barn and jams made in August. In good weather the table goes outside, under the fig tree.</p>
</section>
<section class="page" role="tabpanel" id="page-arrival" aria-labelledby="tab-arrival" tabindex="0" hidden>
<h2>Twenty minutes from the station</h2>
<p>Take the road towards the hills and turn left after the stone chapel. If you come by train, write to us and we will meet you on the platform.</p>
</section>
<section class="page" role="tabpanel" id="page-rules" aria-labelledby="tab-rules" tabindex="0" hidden>
<h2>Few rules, kindly kept</h2>
<p>Check-in is from three in the afternoon and check-out by eleven. Quiet after midnight, dogs welcome, and please close the gate behind you.</p>
</section>
</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.
23 valori da cambiare
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 «Le schede col segnalibro» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una riga nera sottile e sotto quattro schede in un carattere da libro: The rooms, Breakfast, Getting here e House rules; quella scelta è nera e più spessa, le altre grigie. Dalla riga pende un nastro di stoffa rosso con la coda a V, sopra la scheda scelta. Scegliendo un’altra scheda il nastro si arrotola nella riga, scorre lungo di essa inclinandosi all’indietro come se fosse trascinato, e ricade sopra la nuova allungandosi un poco oltre la sua misura; poi dondola in avanti per lo slancio e si ferma. Il titolo e il testo della scheda vecchia escono verso il lato che si lascia, quelli della nuova entrano uno dopo l’altro dal lato della nuova scheda, e l’altezza in mezzo cambia piano. Sotto il mouse il nastro si inclina verso la scheda puntata. All’apertura il nastro cade e il primo testo sale.
Come funziona
La riga e il nastro
Le schede stanno in una fila con un bordo superiore di un pixel e mezzo; il nastro è uno span assoluto in cima alla fila, che gira attorno al suo bordo alto. Dentro c’è la stoffa: un rettangolo rosso con una piega scura in alto, le ombre ai lati e la coda a V fatta con clip-path, che si arrotola e si srotola con scaleY dal bordo alto.
Il posto del nastro
Il nastro va al centro della scheda scelta, misurato ogni volta con offsetLeft e offsetWidth; un ResizeObserver lo rimette a posto quando la fila cambia misura, per esempio quando arriva il carattere.
Il cambio
Una timeline: la stoffa va a scaleY 0,12 in 0,18 secondi, il nastro scorre in SLIDE secondi con power3.inOut inclinandosi di 8 gradi all’indietro, la stoffa ricade con back.out(DROP[1]) in DROP[0] secondi, e il nastro dondola fino a SWING gradi in avanti per tornare a zero con elastic.out. Una scelta nuova a metà ferma la timeline e ne fa partire un’altra da dove si trova il nastro.
Il testo
Il titolo e il testo vecchi escono di 28 pixel svanendo, i nuovi entrano da 40 pixel dall’altra parte con power3.out in TEXT secondi, uno dopo l’altro; intanto il contenitore va dall’altezza vecchia alla nuova. Il componente è tenuto dall’alto della pagina, così cambiando altezza si muove solo il suo fondo.
Tastiera e telefono
È un tablist vero: role tab e tabpanel, aria-selected e una sola scheda raggiungibile col tasto Tab; le frecce, Home e End cambiano scheda e portano il focus. Su uno schermo stretto la fila scorre di lato, sfuma dal lato in cui ci sono altre schede, e quella scelta viene portata in vista.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DROP | script.js | [0.55, 1.6] | Il nastro che ricade: i secondi, e quanto si allunga oltre la sua misura. |
SWING | script.js | 10 | Quanto dondola il nastro quando arriva, in gradi. |
SLIDE | script.js | 0.42 | I secondi in cui il nastro arrotolato scorre fino alla nuova scheda. |
LEAN | script.js | 6 | Quanto si inclina il nastro verso una scheda sotto il mouse, in gradi. |
TEXT | script.js | 0.6 | I secondi in cui entrano il titolo e il testo nuovi. |
Quando usarla
Per le informazioni di una casa vacanze, di un prodotto o di un servizio divise in poche parti: le stanze, la colazione, come arrivare. Da tre a sei schede brevi; con di più la fila scorre.
Sul telefono
La fila delle schede scorre di lato se non ci sta, sfumando dal lato in cui ce ne sono altre, e la scheda scelta viene portata in vista. I tocchi fanno come i clic; senza mouse il nastro non si inclina verso le schede.
Con il movimento ridotto
Il nastro salta subito sopra la scheda scelta senza arrotolarsi né dondolare, il testo cambia di colpo e all’apertura tutto è già al suo posto.
Trappole
- Centrato nella pagina, un componente che cambia altezza si sposta tutto in su e in giù a ogni cambio: va tenuto dall’alto.
- Una fila di schede che non va a capo, dentro una griglia, allarga la colonna oltre lo schermo: la colonna va fissata con minmax(0, 1fr), così è la fila a scorrere.
- Con cambi veloci le animazioni del testo si accavallano: a ogni cambio si fermano quelle in corso e si nascondono le pagine che non c’entrano.
- Il nastro si sposta con x e si inclina con rotation, e la stoffa che si arrotola è un elemento dentro di lui: così le tre cose non si pestano.
Librerie
GSAP 3.15.0, Newsreader (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,1 KB; le librerie: GSAP 28 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.
