Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il menu a quadrante d’orologio
Animazione di testo in stile minimal: il menu di un fotografo di moda sta sul quadrante di un orologio. Le voci girano su un’ellisse, quella davanti prende peso, le altre si schiariscono e dietro l’orizzonte spariscono; a ogni passo la lancetta dei minuti fa un giro intero. All’arrivo il quadrante si avvicina e passa in rassegna le categorie, poi diventa il menu. Rifatta da zero dall’idea di Meech213.
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 clock dial menu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<header class="top">
<span class="brand">Velure</span>
<span class="what">Photography and film</span>
</header>
<!-- the dial: words on an ellipse, a hairline horizon, ticks and two clock hands; the script places everything -->
<nav class="dial" data-dial aria-label="Menu">
<svg class="rim" data-rim aria-hidden="true"></svg>
<ul class="items" data-items role="list"></ul>
<div class="clock" aria-hidden="true">
<span class="hand hand--hour" data-hour></span>
<span class="hand hand--minute" data-minute></span>
<span class="pin" data-pin></span>
</div>
</nav>
<p class="hint" aria-hidden="true">Click a word to turn the dial</p>
</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.
16 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 «Il menu a quadrante d’orologio» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo con in alto, piccolo, il nome dello studio inventato, Velure, e a destra Photography and film. In mezzo un quadrante d’orologio disegnato a linee sottili: un’ellisse di tacche, una riga d’orizzonte appena accennata, due lancette da un pixel e un perno vermiglio. Le parole stanno sul bordo del quadrante, in maiuscolo, in un serif variabile: quella in alto a destra è davanti, nera, più piena e con un’ombra morbida; le vicine sono più chiare e più leggere; quelle che girano sotto l’orizzonte si spengono. All’arrivo il quadrante compare e si avvicina, ingrandito di una volta e mezza dal basso, e passa in rassegna le categorie del lavoro, Editorial, Beauty, Campaigns, Portraits, Music: a ogni passo la ruota gira di una voce e la lancetta dei minuti fa un giro intero, quella delle ore avanza di un’ora. Poi torna a casa, si allontana, le categorie si spengono una dopo l’altra e al loro posto si accendono le pagine, Index, Work, Films, About, Book. Un clic su una parola la porta davanti con lo stesso giro d’orologio, avanti o indietro per la strada più corta; se nessuno clicca, il menu visita due pagine, torna a Index, svanisce e ricomincia.
Come funziona
Un’ellisse e tre numeri
Il quadrante è un riquadro largo il doppio di quanto è alto. Il centro dell’ellisse sta a metà larghezza e all’84 per cento dell’altezza, i raggi sono il 38 per cento della larghezza e il 52 dell’altezza: così le parole in alto stanno dentro il riquadro e quelle in basso finiscono sotto l’orizzonte. Tutto quello che si muove dipende da tre numeri, la rotazione, lo zoom e quanto si vede, che GSAP anima; una funzione sola sul ticker di GSAP mette ogni parola, ogni tacca e le lancette al loro posto con seno e coseno.
Davanti, ai lati, dietro
La lista delle pagine gira due volte attorno al quadrante, come i numeri di un orologio: con cinque pagine i posti sono dieci, a 36 gradi l’uno. Il posto davanti è a meno 45 gradi, in alto a destra. Per ogni parola la distanza da quel posto, ammorbidita con smoothstep, decide il peso (da LIGHT a HEAVY), la grandezza ottica, la scala e l’ombra; il seno dell’angolo dice se è sopra o sotto l’orizzonte, e sotto l’opacità scende a un decimo e poi a zero.
Il giro d’orologio
Per portare davanti una pagina si cerca la rotazione più vicina a quella di adesso che la mette nel posto davanti, così la ruota va sempre per la strada più corta, avanti o indietro. Il tween dura 1,18 secondi con power4.inOut. Le lancette non hanno un tween loro: si calcolano dalla rotazione, un giro intero dei minuti e un’ora delle ore per ogni voce, e quindi partono, frenano e si fermano con la ruota.
L’intro e il menu
All’arrivo il quadrante si ingrandisce fino a 1,5 in 0,82 secondi, con l’origine in basso, e fa un passo ogni 0,87 secondi sulle categorie; poi torna sulla prima pagina e allo zoom 1 in 0,93 secondi, le etichette delle categorie si spengono in 0,24 secondi una ogni 0,018 e le pagine si accendono in 0,52 una ogni 0,04. Lo zoom si ferma prima se la parola più larga uscirebbe dallo schermo. Se nessuno clicca, una timeline nuova visita due pagine, torna alla prima, sfuma e ricomincia; ogni clic ferma quella in corso e ne costruisce una dal punto in cui è la ruota.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PAGES | script.js | 'Index, Work, Films, About, Book' | Le pagine del menu, separate da virgole, da tre a sei. |
CATEGORIES | script.js | 'Editorial, Beauty, Campaigns, Portraits, Music' | Le categorie che l’intro passa in rassegna, una per pagina. |
STEP_TIME | script.js | 1.18 | I secondi che il quadrante impiega a portare davanti la parola cliccata. |
INTRO_STEP | script.js | 0.87 | I secondi di ogni passo mentre l’intro passa le categorie. |
ZOOM | script.js | 1.5 | Quanto si ingrandisce il quadrante durante l’intro (resta più piccolo se lo schermo è stretto). |
PAUSE | script.js | 1.4 | I secondi di sosta su una pagina prima della successiva, quando nessuno clicca. |
LIGHT | script.js | 250 | Il peso delle parole ai lati (da 100 a 900). |
HEAVY | script.js | 560 | Il peso della parola davanti (da 100 a 900). |
Quando usarla
Per il menu di un sito che vive di immagini e vuole una navigazione che sia già un gesto: un fotografo, uno studio di moda, un regista, una rivista, un archivio con poche sezioni. Funziona bene come apertura che presenta le categorie e poi resta come menu.
Sul telefono
La stessa animazione con le misure adattate: il quadrante prende la larghezza dello schermo e anche l’altezza, il carattere scende con lui e lo zoom dell’intro si ferma dove la parola più larga toccherebbe il bordo. Un tocco su una parola fa girare il quadrante.
Con il movimento ridotto
Niente gira e niente si ingrandisce: a ogni passo il quadrante svanisce e ricompare con la parola nuova davanti, e le categorie lasciano il posto alle pagine in dissolvenza.
Trappole
- Con la lista girata una volta sola, cinque parole a 72 gradi l’una, quelle vicine al posto davanti erano troppo lontane e il quadrante sembrava vuoto: la lista gira due volte, come i numeri di un orologio, e ogni parola ha il suo doppio dall’altra parte.
- Con lo zoom di 1,5 sul telefono le parole ai lati uscivano dallo schermo: lo zoom si calcola dalla parola più larga, misurata dopo che il carattere è arrivato, e dalla striscia in alto col nome dello studio.
- Un tween per le lancette e uno per la ruota, partiti insieme, si separavano appena un clic interrompeva il giro: le lancette si calcolano dalla rotazione e non hanno un tween loro.
- Un clic a metà intro lasciava accese le categorie: il clic spegne le categorie, accende le pagine e riporta lo zoom a 1 prima di girare.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 22 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.
