L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
L’indice alfabetico
La rubrica di un telefono con l’indice dalla A alla Z sul bordo: trascinando il dito sull’indice le lettere vicine si gonfiano fuori dal bordo lungo un arco, la lettera sotto il dito diventa una grande bolla a fianco, e la lista salta alle persone con quell’iniziale con un piccolo scatto per ogni lettera passata. Lasciando, l’arco rientra su una molla.
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 alphabet index</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/figtree@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- a contacts list with the A to Z index on its edge. Drag along the index: the letters near the finger swell
out from the edge along an arc, the letter under it grows into a big bubble beside it, and the list jumps to
that letter with a small kick for every letter passed. Letting go, the arc sinks back on a spring -->
<section class="book" aria-labelledby="book-title" data-book>
<header class="book__head">
<h1 class="book__title" id="book-title">Contacts</h1>
<p class="book__sub">Everyone you know</p>
</header>
<div class="book__body">
<div class="book__list" tabindex="0" aria-label="Contacts" data-list>
<div class="book__shake" data-shake></div>
</div>
<!-- the index: the swollen track, the letters, and the bubble with the letter under the finger -->
<div class="index" data-index>
<svg class="index__track" aria-hidden="true" data-track><path data-track-path/></svg>
<div class="index__letters" role="listbox" tabindex="0" aria-label="Jump to letter" aria-orientation="vertical" data-letters></div>
<div class="bubble" aria-hidden="true" data-bubble>
<svg class="bubble__shape" viewBox="-60 -60 120 120"><path class="bubble__shadow" data-bubble-path/><path class="bubble__shadow" data-bubble-path/><path data-bubble-path/></svg>
<span class="bubble__letter" data-bubble-letter>A</span>
</div>
</div>
</div>
<p class="sr" aria-live="polite" data-live></p>
</section>
</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.
19 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 «L’indice alfabetico» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, un riquadro alto con gli angoli molto arrotondati, senza nessun telefono intorno: in cima Contacts, sotto la lista delle persone divisa per l’iniziale del cognome, con l’intestazione di ogni lettera che resta in alto scorrendo. Ogni persona ha le iniziali in un quadrato arrotondato tinto con un colore preso dal nome, il nome col cognome in grassetto e una nota sotto (mobile, Dentist, Climbing partner). Sul bordo destro l’indice delle 26 lettere, blu; quelle senza nessuno (I, Q, U, X) sono grigio chiaro, e la lettera in cima alla lista è bianca su un quadratino blu. Premendo e trascinando sull’indice, una fascia chiara si stacca dal bordo e si gonfia sotto il dito; le lettere vicine escono dal bordo lungo un arco a campana e si ingrandiscono, la più grande sotto il dito, e le altre si scostano in su e in giù per far posto. A fianco compare una bolla blu con una punta verso la lettera, con la lettera grande in bianco. Passando su una lettera, la lista salta alle sue persone su una molla rigida, con un piccolo scatto nella direzione del dito per ogni lettera passata; la bolla dà un colpetto, la lettera nella bolla rotola e l’intestazione d’arrivo si illumina un istante. Le lettere vuote si saltano: si va a quella con persone più vicina. Lasciando, l’arco rientra con un piccolo rimbalzo e la bolla si ritira. Un clic su una lettera, le frecce o una lettera scritta sulla tastiera portano lì con lo stesso arco.
Come funziona
Il dito in lettere
La posizione del dito sull’indice diventa un numero continuo, in lettere: 0 al centro della A, 25 al centro della Z. Da qui la lettera scelta: il numero arrotondato, ma solo se il dito ha passato il confine fra due lettere di HYSTERESIS (l’isteresi, così sul bordo non sfarfalla); se la lettera è vuota si prende la più vicina con persone, cercando prima nella direzione del dito.
L’arco a campana
Ogni lettera ha una distanza d dal dito, in lettere, e da lì una campana g = exp(-d²/2σ²) con σ = SPREAD, moltiplicata per quanto è gonfio l’arco. La lettera esce dal bordo di BULGE × g pixel e cresce di 1 + (GROW − 1) × g; per far posto, tutte si spostano di una tangente iperbolica della distanza, in su sopra il dito e in giù sotto. La fascia chiara è un tracciato SVG preso dalla stessa campana.
Molle per entrare e uscire
Quanto è gonfio l’arco è un numero su una molla (SWELL) poco smorzata: premendo va a 1, lasciando torna a 0 con un piccolo rimbalzo. Anche il centro dell’arco segue il dito su una molla rigida, e la bolla segue la lettera scelta. Le molle sono rigide, quindi ogni fotogramma si divide in passi di al massimo 1/120 di secondo, col fotogramma limitato a 1/30.
La lista che scatta
A ogni lettera nuova lo scrollTop della lista corre all’intestazione della lettera su una molla rigida e quasi critica. Una seconda molla, vivace e poco smorzata, riceve un colpo di velocità nella direzione del dito, più forte se le lettere passate sono più d’una, e sposta la lista di qualche pixel con translateY: è lo scatto. Dove il telefono lo permette, navigator.vibrate dà anche un tocco.
Tastiera e lettori di schermo
L’indice è un listbox con aria-activedescendant, le lettere sono option e quelle vuote hanno aria-disabled. Le frecce vanno alla lettera con persone dopo o prima, Home ed End ai capi, una lettera scritta va lì; l’arco si gonfia e rientra dopo un attimo senza tasti. Un clic su una lettera (anche da tastiera) fa scorrere il dito da solo fin lì, con GSAP.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BULGE | script.js | 44 | Di quanto esce dal bordo la lettera sotto il dito, in pixel. |
SPREAD | script.js | 2.3 | Quante lettere per parte prende l’arco: la larghezza della campana. |
GROW | script.js | 1.9 | Quanto si ingrandisce la lettera sotto il dito. |
SWELL | script.js | [260, 0.5] | L’arco che si gonfia e rientra: la forza della molla e lo smorzamento (1 = senza rimbalzo). |
HYSTERESIS | script.js | 0.18 | Di quanto il dito supera il confine fra due lettere prima che la lettera cambi, in lettere. |
KICK | script.js | 5 | Lo scatto della lista a ogni lettera, in pixel. |
HAPTICS | script.js | true | Una piccola vibrazione a ogni lettera, sui telefoni che la permettono. |
Quando usarla
Per ogni lista lunga in ordine alfabetico: contatti, clienti, artisti di una libreria musicale, glossari, elenchi di città o di paesi, ingredienti. Con meno di una quarantina di voci la lista si scorre da sola e l’indice non serve.
Sul telefono
È fatto per il dito: l’indice ha touch-action: none, così trascinare sull’indice non fa scorrere la pagina, e la cattura del puntatore lo tiene anche se il dito esce dal bordo. Il riquadro è largo quanto lo schermo meno 32 pixel e alto quanto lo schermo permette; la lista si scorre normalmente col dito. Niente sfora di lato.
Con il movimento ridotto
Le lettere non si muovono e non crescono, la fascia non si gonfia e la lista non scatta: la lettera scelta si accende, la bolla compare in dissolvenza accanto a lei e resta un attimo, e la lista va subito alla lettera.
Trappole
- Con una molla rigida sullo scrollTop e un fotogramma lento (1/30 di secondo) il passo esplodeva: la lista finiva in fondo invece che alla lettera. Ogni fotogramma si divide in passi di 1/120 di secondo e le molle restano stabili anche a pochi fotogrammi al secondo.
- Ingrandendo le lettere sotto il dito, le vicine si sovrapponevano: ognuna si sposta di una tangente iperbolica della distanza dal dito, che apre lo spazio vicino al dito e lascia ferme quelle lontane.
- Senza isteresi, un dito fermo sul confine fra due lettere le alternava a ogni pixel e la lista saltava avanti e indietro: la lettera cambia solo quando il dito ha passato il confine di HYSTERESIS.
- Il rimbalzo della molla sotto lo zero spingeva le lettere fuori dal riquadro, a destra: lo spostamento usa solo la parte positiva, il rimbalzo si vede nella grandezza.
- Un filtro drop-shadow sulla bolla e sulla fascia, che cambiano a ogni fotogramma, faceva crollare i fotogrammi: l’ombra della bolla sono due copie della forma, più chiare e spostate.
Librerie
GSAP 3.15.0, Figtree (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 5 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.
