La valutazione a stelle
Valutazioni, SVG, Hover
NuovaGratis
Tutti i componenti
La nav con l'evidenziatore
Una fila di link in cui quello corrente è segnato in giallo, con un evidenziatore appoggiato accanto. Scegliendo un altro link la penna si alza, vola in un arco, si posa all'inizio della parola e la ripassa, stendendo il giallo sotto la punta, mentre il vecchio segno si assottiglia e sbiadisce; puntando un link, la penna si sporge verso di lui.
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 highlighter nav</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/petrona@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the nav: the current link is marked in yellow, and the highlighter pen rests by it; choosing another link the
pen flies over and draws the new mark across the word, while the old one dries away -->
<nav class="hl" aria-label="Main" data-nav>
<svg class="hl__marks" aria-hidden="true" data-marks><defs data-clips></defs></svg>
<ul class="hl__list" data-list>
<li><a class="hl__link" href="#" aria-current="page" data-link><span data-word>Work</span></a></li>
<li><a class="hl__link" href="#" data-link data-autoclic><span data-word>Studio</span></a></li>
<li><a class="hl__link" href="#" data-link data-autoclic><span data-word>Journal</span></a></li>
<li><a class="hl__link" href="#" data-link data-autoclic><span data-word>Contact</span></a></li>
</ul>
<!-- the pen and its shadow on the paper: the point of the felt tip is the corner they turn around -->
<div class="hl__shadow" aria-hidden="true" data-shadow>
<svg viewBox="0 0 30 120"><path d="M5 9Q5 4 10 4H20Q25 4 25 9V92L21 106V112L13 120L10 117V106L5 92Z"/></svg>
</div>
<div class="hl__pen" aria-hidden="true" data-pen>
<div class="hl__bob" data-bob>
<svg viewBox="0 0 30 120">
<path class="pen__tip" d="M10 105H20V112L13 120L10 117Z"/>
<path class="pen__collar" d="M5 91H25L21 106H9Z"/>
<rect class="pen__body" x="4" y="22" width="22" height="71" rx="3"/>
<path class="pen__grip" d="M8 78H22M8 82.5H22M8 87H22"/>
<rect class="pen__label" x="9.5" y="36" width="11" height="30" rx="2"/>
<rect class="pen__sheen" x="6.5" y="25" width="2.4" height="62" rx="1.2"/>
<rect class="pen__cap" x="5" y="3" width="20" height="23" rx="5"/>
<rect class="pen__ring" x="3.5" y="20" width="23" height="5" rx="2"/>
</svg>
</div>
</div>
</nav>
</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.
15 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 «La nav con l'evidenziatore» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco quattro link in un carattere con le grazie, Work, Studio, Journal e Contact, grigi tranne quello corrente, nero. All'arrivo un evidenziatore giallo col cappuccio nero entra dall'alto a destra, si posa all'inizio di Work e ci passa sopra, lasciando una striscia gialla con le estremità oblique, come quelle di una punta a scalpello, i bordi appena mossi e la fine sfilacciata; poi si alza un poco e resta appoggiato in fondo alla parola, inclinato, con la sua ombra sulla carta, respirando appena. Il mouse su un altro link lo fa diventare nero e la penna si sporge verso di lui alzandosi un poco; uscendo dalla fila torna al suo posto. Cliccando un altro link la penna si alza, con l'ombra che si allontana, vola in un arco fino all'inizio della parola, si posa e la ripassa da sinistra a destra: il giallo si stende sotto la punta e, finito, l'inchiostro si scurisce appena lungo i bordi. Intanto il segno vecchio si assottiglia verso la sua linea di mezzo e sbiadisce. Ogni segno è un po' diverso: pende di poco, sborda dalla parola di qualche pixel e ha due righe più chiare lungo la striscia. Cliccando il link già segnato, la penna picchietta due volte sulla carta.
Come funziona
I segni sotto le parole
Dietro i link c'è un SVG grande quanto la nav, senza viewBox, così le sue unità sono pixel. Il segno di una parola è una fascia dal 10% al 97% della sua altezza (la parola è uno span, misurato con offsetLeft e offsetTop), allungata di 4-8 pixel a sinistra e 4-9 a destra, con le estremità oblique di un terzo dell'altezza come una punta a scalpello, i bordi spezzati con mezzo pixel di tremolio, la fine sfilacciata, due righe bianche al 32% e l'inchiostro più scuro lungo i bordi.
Il giallo dietro la punta
Ogni segno ha un suo clipPath con un rettangolo: mentre la penna ripassa la parola, a ogni aggiornamento la sua larghezza arriva fino alla punta più mezzo scalpello, così il giallo c'è fin dove la punta è passata. Alla fine il rettangolo si apre del tutto e l'inchiostro dei bordi compare in 0,6 secondi.
La penna
La penna e la sua ombra sono due scatole senza misura messe sulla punta, con il disegno appeso sopra e misurato in em, così segue la grandezza del testo. Uno stato solo (posto, rotazione e sollevamento) muove tutte e due: sollevata, la penna sale fino a 24 pixel e cresce del 12%, mentre l'ombra resta sulla carta, si allontana e si schiarisce. Vicino al lato destro della finestra la penna si raddrizza quanto serve per non uscire dalla pagina.
Il viaggio
Una timeline: si alza (0,2 secondi), vola su una curva di Bézier quadratica dal punto in cui si trova all'inizio della parola, con il punto di controllo ARC pixel più su (0,3 secondi più la distanza diviso 1100, al massimo 0,7), si posa (0,12 secondi), ripassa la parola a SPEED pixel al secondo con power1.inOut (almeno 0,26 secondi) e si alza un poco fermandosi appena oltre la fine. Il segno vecchio si asciuga: scaleY a 0,3 dal suo centro e opacità a zero in 0,5 secondi, poi si toglie insieme al suo clip.
Sporgersi, tasti e anteprima
Puntando un link col mouse, o arrivandoci col Tab, la penna si sposta verso di lui di LEAN della distanza, alzandosi e girandosi fino a 8 gradi da una parte o 16 dall'altra; uscendo dalla fila, o col fuoco che se ne va, torna a riposo. I clic sono quelli dei link, e aria-current passa al link scelto. L'anteprima della libreria clicca a turno gli altri link.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SPEED | script.js | 420 | Quanto in fretta la penna ripassa una parola, in pixel al secondo. |
ARC | script.js | 46 | Quanto in alto vola la penna fra due parole, in pixel. |
SLANT | script.js | 1.4 | Quanto può pendere un segno, al massimo, in gradi. |
LEAN | script.js | 0.3 | Quanto si sporge la penna verso un link puntato, come parte della distanza. |
Quando usarla
Per la nav di un sito che scrive o insegna: una rivista, un blog, una casa editrice, un corso, una cartoleria, il portfolio di chi illustra.
Sul telefono
La fila si stringe con lo schermo (il testo fino a 19 pixel, gli spazi fino a 14) e ogni link è alto 45 pixel; il tocco sceglie senza aspettare il doppio tocco, e vicino al bordo destro la penna si raddrizza per restare nello schermo.
Con il movimento ridotto
Il segno nuovo compare intero di colpo e quello vecchio sparisce, la penna salta al suo posto accanto alla parola senza volare e senza sporgersi verso i link puntati, non respira e all'arrivo non entra: è già lì.
Trappole
- Ogni segno ha un clipPath con il suo id: con un clip solo per tutti, il segno vecchio che sbiadisce verrebbe tagliato come quello nuovo che si disegna.
- Il segno vecchio va tolto insieme al suo clipPath quando ha finito di sbiadire, o a ogni scelta la nav si riempirebbe di clip inutili.
- Le parole stanno fra due livelli: i segni dietro e la penna davanti. Così il giallo non copre mai il nero delle lettere, e la penna passa sopra di loro.
- Una scelta può arrivare mentre la penna vola: la timeline si interrompe e la nuova parte da dove la penna si trova, per questo il punto di partenza del volo si legge quando il volo comincia (onStart), non quando si crea la timeline.
- Safari può dire che i font sono pronti prima che il carattere sia arrivato: un ResizeObserver sulla fila ridisegna il segno corrente e rimette la penna quando le parole cambiano larghezza.
Librerie
GSAP 3.15.0, Petrona (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,6 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 4 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.
