La nav col mirino

Navigazione, Hover, TransizioniGSAPMediaPeso compresso: Demo 4,8 KBGSAP 28 KBGratisScarica lo zip

La cornice di messa a fuoco di una fotocamera sta sul link corrente. Puntando un altro link la cornice ci scivola sopra e cerca il fuoco, allargandosi e stringendosi mentre la parola passa da sfocata a nitida, poi le staffe lampeggiano verdi; un clic scatta la foto, con il mirino che diventa nero per un istante e un lampo di luce nella cornice.

Il codice

Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nella scheda 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 viewfinder nav</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/spline-sans-mono@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the nav: the focus frame of a camera sits on the current link; pointed at, another link is brought into focus,
         and a press takes the picture, with the viewfinder going black for an instant -->
    <nav class="vf" aria-label="Main" data-nav>
      <ul class="vf__list" data-list>
        <li><a class="vf__link" href="#" aria-current="page" data-link><span data-word>Portraits</span></a></li>
        <li><a class="vf__link" href="#" data-link data-autoclic><span data-word>Weddings</span></a></li>
        <li><a class="vf__link" href="#" data-link data-autoclic><span data-word>Travel</span></a></li>
        <li><a class="vf__link" href="#" data-link data-autoclic><span data-word>About</span></a></li>
      </ul>
      <!-- the faint frame that stays on the current link, and the focus frame that moves -->
      <span class="vf__frame vf__frame--ghost" data-ghost aria-hidden="true"><i></i><i></i><i></i><i></i></span>
      <span class="vf__frame vf__frame--af" data-af aria-hidden="true"><b class="vf__flash" data-flash></b><i></i><i></i><i></i><i></i></span>
      <span class="vf__shutter" aria-hidden="true"><i data-blade></i><i data-blade></i></span>
    </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.

14 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 «La nav col mirino» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero quattro link in maiuscolo con un carattere monospaziato, Portraits, Weddings, Travel e About, grigi tranne quello corrente, chiaro. All'arrivo una cornice di quattro staffe ad angolo entra larga e trasparente e si stringe sul link corrente cercando il fuoco, mentre la parola passa da sfocata a nitida; trovato il fuoco, le staffe diventano verdi e lampeggiano. Col mouse su un altro link la cornice ci scivola sopra, bianca e con le staffe più lunghe, si allarga, si stringe oltre la parola, si riapre un poco e si ferma, e intanto la parola, che si schiarisce, si sfoca e torna nitida; a fuoco le staffe lampeggiano verdi e tornano corte. Sul link corrente resta una cornice sottile e grigia. Uscendo dalla fila la cornice torna sul link corrente. Il clic scatta la foto: due lame nere si chiudono sulla fila dall'alto e dal basso e si riaprono, le staffe si stringono e tornano con un rimbalzo, nella cornice si accende una luce bianca che sfuma, e il link diventa quello corrente. Toccando un link non ancora a fuoco, la foto parte appena la cornice lo mette a fuoco.

Come funziona

Una cornice di quattro staffe

La cornice è uno span con quattro i agli angoli, ognuno un quadrato di --arm pixel con due soli bordi, spessi --line. Lo script la mette sulla scatola di un link (misurata con offsetLeft, offsetTop, offsetWidth e offsetHeight) aperta o chiusa di pad pixel: translate per il posto e width e height per la misura, così le staffe tengono il loro spessore.

La caccia al fuoco

Una timeline sposta la scatola sul link con expo.out in SLIDE secondi, mentre pad passa per i fotogrammi chiave PAD + 11, PAD − 5, PAD + 3 e PAD in SLIDE × 0,7 più HUNT secondi. La parola puntata è sfocata di |pad − PAD| × 0,22 pixel, al massimo 3: è nitida proprio quando la cornice si ferma.

Il fuoco

Alla fine la cornice prende la classe is-locked (verde, con una transizione di colore di 0,12 secondi), la linea passa da 3 a 2 pixel, i bracci tornano da 12 a 9 pixel con back.out(3) e gli angoli lampeggiano (opacità da 0,25 a 1, tre passaggi da 0,07 secondi).

Lo scatto

Due lame nere, ognuna mezza fila più un margine e con l'origine sul bordo esterno, vanno da scaleY 0 a 1 in BLINK × 0,35 secondi, aspettano BLINK × 0,15 e si riaprono in BLINK × 0,65; intanto nella cornice una sfumatura radiale bianca si accende a 0,7 e si spegne, e pad scende a PAD − 3 e torna con elastic.out. Una pressione su un link non ancora a fuoco aspetta il fuoco: lo scatto parte da lì.

Tasti, ritorno e anteprima

Il Tab su un link (focus-visible) ci porta la cornice e Invio scatta; uscendo dalla fila col puntatore (dopo 0,25 secondi) o col fuoco la cornice torna sul link corrente, e la cornice sottile si vede solo mentre l'altra è altrove. Un ResizeObserver rimisura quando le parole cambiano larghezza. L'anteprima della libreria clicca a turno gli altri link.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SLIDE`	script.js	`0.32`	I secondi che la cornice impiega a spostarsi su un altro link.
`HUNT`	script.js	`0.5`	I secondi che impiega a trovare il fuoco una volta lì.
`BLINK`	script.js	`0.2`	I secondi del buio dell'otturatore.
`PAD`	script.js	`5`	Quanto sta lontana la cornice dalla parola a fuoco, in pixel.

Provali nel Playground

Quando usarla

Per la nav di chi lavora con le immagini: un fotografo, uno studio video, un noleggio di attrezzatura, un festival di cinema, una scuola di fotografia, un'app per le foto.

Sul telefono

Il testo va da 12 a 16 pixel con la larghezza e gli spazi si stringono, così i quattro link stanno in una riga anche su 390 pixel; ogni link è alto 45 pixel e un tocco mette a fuoco e scatta, senza aspettare il doppio tocco.

Con il movimento ridotto

La cornice salta sul link senza scivolare e senza cercare il fuoco, la parola non si sfoca, le staffe diventano verdi senza lampeggiare, il mirino non diventa nero e lo scatto è solo una luce breve nella cornice; la cornice sottile sul link corrente compare e sparisce senza dissolvenza.

Trappole

La cornice cambia misura con width e height, non con una scala: scalata, ingrosserebbe anche le linee delle staffe.
Il filtro blur va tolto del tutto quando la parola è a fuoco (filter vuoto, non blur(0px)): un filtro lasciato acceso, anche a zero, fa disegnare la parola su un livello a parte.
Il lampeggio delle staffe e lo spessore delle linee vanno fermati e rimessi a posto ogni volta che la cornice riparte (killTweensOf e set), o una cornice interrotta resterebbe a metà opacità.
Lo scatto aspetta il fuoco: dopo un tocco su un link lontano la cornice è ancora in viaggio, e lo scatto parte quando trova il fuoco, solo se il link a fuoco è quello premuto.
Le lame dell'otturatore devono avere il colore della pagina e coprire anche un po' di margine: sono loro a nascondere la fila per un istante.

Librerie

GSAP 3.15.0, Spline Sans Mono (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 4,8 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.