Il menu delle voci che si stendono fra i margini

Menu, Testo, HoverGSAP, Solo CSSMediaPeso compresso: Demo 6,8 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal, su nero: il menu di una piccola libreria. Fra due margini sottili, come i bordi di una colonna stampata, le voci stanno corte e leggere a sinistra; quella sotto il puntatore allarga le lettere su una molla, prende peso e larghezza finché riempie la riga da margine a margine e, passando un poco oltre, spinge i due margini in fuori di qualche pixel, che lì diventano vermigli.

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 menu whose links stretch between the margins</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the menu of a small bookshop. Between two hairline margins, like the edges of a printed column, the links sit
         short on the left. The one under the pointer stretches its letters until it touches both margins and pushes
         them out by a pixel; the margins bulge there in vermilion. The page you are on stays a little stretched. -->
    <div class="column" data-frame>
      <div class="top">
        <span class="brand">Orvel Books</span>
        <button class="toggle" type="button" aria-expanded="false" aria-controls="orvel-menu" data-toggle data-autoclic>
          <span class="toggle__words" aria-hidden="true">
            <span class="toggle__word" data-word-open>Menu</span>
            <span class="toggle__word" data-word-close>Close</span>
          </span>
          <span class="sr" data-toggle-name>Open the menu</span>
        </button>
      </div>

      <div class="field" data-field>
        <svg class="margins" aria-hidden="true" data-margins>
          <path class="margin" data-margin-left></path>
          <path class="margin" data-margin-right></path>
          <path class="margin margin--hot" data-hot-left></path>
          <path class="margin margin--hot" data-hot-right></path>
        </svg>
        <nav class="menu" id="orvel-menu" aria-label="Main" data-menu inert>
          <ul class="menu__list">
            <li><a class="row" href="#books" data-desc="New and second-hand, two floors" aria-current="page" data-row><span class="row__mask"><span class="row__word" data-word>Books</span></span></a></li>
            <li><a class="row" href="#authors" data-desc="Forty writers who read here" data-row><span class="row__mask"><span class="row__word" data-word>Authors</span></span></a></li>
            <li><a class="row" href="#readings" data-desc="Thursdays at seven" data-row><span class="row__mask"><span class="row__word" data-word>Readings</span></span></a></li>
            <li><a class="row" href="#journal" data-desc="Notes from the counter" data-row><span class="row__mask"><span class="row__word" data-word>Journal</span></span></a></li>
            <li><a class="row" href="#visit" data-desc="12 Canal Row, open daily" data-row><span class="row__mask"><span class="row__word" data-word>Visit</span></span></a></li>
          </ul>
        </nav>
      </div>

      <p class="note" data-note><span class="note__line" data-note-line>Point at a link, it fills the line</span></p>
    </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.

24 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 «Il menu delle voci che si stendono fra i margini» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su nero c'è il nome di una libreria inventata, Orvel Books, e un pulsante a pillola sottile con la parola Menu, che si allarga un poco quando ci si passa sopra. Premuto, Menu sale e al suo posto arriva Close, e dall'alto si disegnano due margini sottilissimi, a sinistra e a destra della colonna, come i bordi di una pagina stampata. Le cinque voci salgono una dopo l'altra dalle loro maschere, Books, Authors, Readings, Journal e Visit, in maiuscolo, leggere e strette, tutte a sinistra; Books, la pagina in cui si è, è già un poco più larga. Passando il puntatore su una voce, le sue lettere si allontanano su una molla, prendono peso e larghezza, finché la parola occupa tutta la riga da un margine all'altro; la molla la porta un poco oltre, e la parola spinge i due margini in fuori di qualche pixel: lì i margini si incurvano e diventano vermigli, poi si assestano. Le altre voci lasciano andare e tornano corte. Cliccando una voce, la voce si allarga ancora una volta, resta vermiglia un attimo e il menu si chiude: le voci scendono nelle maschere dall'ultima, i margini si arrotolano verso l'alto e Close torna Menu.

Come funziona

Una molla per voce

Ogni voce ha un numero s fra 0 (corta) e 1 (stesa), che segue la sua meta con una molla (SPRING): 1 per la voce sotto il puntatore, REST per la pagina in cui si è quando non si punta niente, 0 per le altre. La molla è poco frenata, quindi la voce va un poco oltre 1 e torna.

Le lettere che riempiono la riga

Ogni parola è divisa in lettere. All'apertura e al resize si misura la sua larghezza col peso e la larghezza dell'asse più bassi e più alti (WEIGHT, WIDTH). A ogni fotogramma la spaziatura fra le lettere è s per la differenza fra la colonna e la larghezza naturale, diviso il numero degli spazi: con s uguale a 1 la parola misura esattamente la colonna, oltre 1 la supera di poco. L'ultima lettera non ha spaziatura, così la parola finisce sul margine.

I margini che cedono

I due margini sono due tracciati SVG ridisegnati a ogni fotogramma, un punto ogni 3 pixel: ogni voce stesa oltre 0,78 li spinge in fuori con una campana larga poco meno di una riga, fino a PUSH pixel. Un secondo tracciato vermiglio copre solo il tratto spinto dalla voce più stesa, più acceso quanto più spinge.

Apertura, chiusura, scelta

GSAP: Menu e Close si scambiano, i margini si disegnano dall'alto in 0,8 secondi, le voci salgono dalle maschere con back.out a STAGGER secondi l'una dall'altra. Scegliendo una voce la sua molla riceve una spinta in più, la voce passa dal vermiglio al bianco, e dopo tre quarti di secondo il menu si chiude: le voci scendono dall'ultima e i margini si ritirano.

Tastiera e telefono

Il pulsante ha aria-expanded e il menu chiuso è inert; le frecce spostano la voce stesa, Esc chiude, Tab gira fra pulsante e voci. Sul telefono il dito che scorre sulle voci fa come il puntatore (il campo ha touch-action none solo a menu aperto), e un tocco sceglie.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SPRING`	script.js	`[190, 15]`	La molla della voce che si stende: quanto è rigida e quanto è frenata (meno, più rimbalzo).
`REST`	script.js	`0.16`	Quanto resta stesa la pagina in cui si è quando non si punta niente.
`WEIGHT`	script.js	`[300, 640]`	Il peso di una voce corta e di una voce stesa.
`WIDTH`	script.js	`[100, 112]`	La larghezza dell'asse di una voce corta e di una voce stesa.
`PUSH`	script.js	`3`	Di quanti pixel una voce stesa spinge in fuori i margini.
`STAGGER`	script.js	`0.05`	I secondi fra una voce e l'altra all'apertura e alla chiusura.

Provali nel Playground

Quando usarla

Per il menu di chi lavora con le parole: una libreria, una casa editrice, una rivista, una fonderia di caratteri, un'agenzia di testi. Sta bene con quattro, cinque o sei voci corte su un fondo scuro o chiaro; le parole lunghe vogliono una colonna un po' più larga.

Sul telefono

La colonna è larga quanto lo schermo meno 32 pixel e alta al massimo l'88% dell'altezza; le voci si rimpiccioliscono con la larghezza e l'altezza. Il dito che scorre sulle voci le stende come il puntatore, e un tocco sceglie.

Con il movimento ridotto

Niente molle né rimbalzi: la voce sotto il puntatore è subito stesa, le voci e i margini compaiono e spariscono in dissolvenza.

Trappole

La larghezza naturale di una parola cambia col peso e con l'asse della larghezza: si misura una volta ai due estremi (e al resize) e in mezzo si interpola, invece di misurare a ogni fotogramma, che costringerebbe il browser a ricalcolare la pagina.
letter-spacing aggiunge spazio anche dopo l'ultima lettera, e la parola non arriverebbe sul margine: l'ultima lettera ha la spaziatura a zero.
Il pilota dell'anteprima clicca ogni 2,8 secondi: i clic senza dettaglio (detail 0) fanno partire il giro solo a menu chiuso, e durante il giro si ignorano.

Librerie

GSAP 3.15.0, Mona Sans (font variabile, con gli assi della larghezza e del peso) 5.3.0.

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

Collaudo

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