La nav con le anteprime

Navigazione, Hover, SVGGSAPMediaPeso compresso: Demo 7,8 KBGSAP 28 KBGratisScarica lo zip

Link grandi, uno sotto l'altro, con una freccia accanto alla pagina corrente. Puntando un link, lui prende il suo colore e gli altri si fanno da parte, e accanto alla parola arriva una scheda col disegno di quella pagina: segue il puntatore con un attimo di ritardo, si inclina come si muove, e passando da un link all'altro i disegni scorrono dentro di lei, ognuno con la sua piccola scena.

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 preview nav</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/radio-canada-big@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the nav: big links, one under the other; pointed at, a link takes its colour and a card with a picture of its
         page follows the pointer, leaning as it moves; the arrow shows the current page -->
    <nav class="pv" aria-label="Main" data-nav data-autoclic>
      <svg class="pv__here" viewBox="0 0 24 24" aria-hidden="true" data-here><path d="M4 12H19M13 6L19 12L13 18"/></svg>
      <ul class="pv__list" data-list>
        <li><a class="pv__link" href="#" aria-current="page" style="--c: #f2552c" data-link>Projects</a></li>
        <li><a class="pv__link" href="#" style="--c: #3552f2" data-link data-poster>Studio</a></li>
        <li><a class="pv__link" href="#" style="--c: #d69a00" data-link>Journal</a></li>
        <li><a class="pv__link" href="#" style="--c: #109a63" data-link>Shop</a></li>
        <li><a class="pv__link" href="#" style="--c: #9a4cf0" data-link>Contact</a></li>
      </ul>
    </nav>

    <!-- the card: one picture for each link, one above the other in a strip that slides inside the card -->
    <div class="pv__card" aria-hidden="true" data-card>
      <div class="pv__strip" data-strip>
        <div class="pv__panel" style="--bg: #ff6b4a" data-panel="projects">
          <svg viewBox="0 0 200 200">
            <rect class="a-back" x="55" y="45" width="90" height="112" rx="10" fill="#ffffff" opacity="0.35"/>
            <rect class="a-mid" x="55" y="45" width="90" height="112" rx="10" fill="#ffffff" opacity="0.6"/>
            <g class="a-front">
              <rect x="55" y="45" width="90" height="112" rx="10" fill="#ffffff"/>
              <rect x="65" y="55" width="70" height="62" rx="5" fill="#ffd8cc"/>
              <circle class="a-sun" cx="112" cy="74" r="8" fill="#ff6b4a"/>
              <path d="M65 117L86 90L101 106L111 96L135 117Z" fill="#ff8a6e"/>
              <rect x="65" y="127" width="46" height="6" rx="3" fill="#ffd8cc"/>
              <rect x="65" y="139" width="30" height="6" rx="3" fill="#ffd8cc"/>
            </g>
          </svg>
          <p class="pv__cap">Selected work</p>
        </div>
        <div class="pv__panel" style="--bg: #4363ff" data-panel="studio">
          <svg viewBox="0 0 200 200">
            <rect x="48" y="30" width="104" height="104" rx="8" fill="#ffffff" opacity="0.18"/>
            <path d="M100 34V130M52 82H148" stroke="#ffffff" stroke-opacity="0.45" stroke-width="5"/>
            <rect class="a-light" x="58" y="40" width="30" height="36" rx="3" fill="#ffffff" opacity="0.3"/>
            <rect x="40" y="134" width="120" height="8" rx="4" fill="#ffffff" opacity="0.7"/>
            <g class="a-leaves">
              <path class="a-leaf" d="M100 118C88 104 84 86 92 70C104 82 106 100 100 118Z" fill="#7ee8a8"/>
              <path class="a-leaf" d="M100 118C104 100 116 88 132 86C128 104 116 116 100 118Z" fill="#53d48b"/>
              <path class="a-leaf" d="M100 118C92 106 76 100 62 104C70 118 86 122 100 118Z" fill="#a4f2c3"/>
            </g>
            <path d="M84 116H116L111 134H89Z" fill="#ff8a5c"/>
          </svg>
          <p class="pv__cap">Who we are</p>
        </div>
        <div class="pv__panel" style="--bg: #ffcf33" data-panel="journal">
          <svg viewBox="0 0 200 200">
            <path d="M100 52C84 44 60 42 38 46V150C60 146 84 148 100 156Z" fill="#ffffff" opacity="0.75"/>
            <path d="M100 52C116 44 140 42 162 46V150C140 146 116 148 100 156Z" fill="#ffffff"/>
            <path class="a-line" d="M112 66H150M112 80H148M112 94H150M112 108H140M112 122H148" stroke="#e0a800" stroke-width="4" stroke-linecap="round" fill="none"/>
            <path d="M50 66H86M50 80H84M50 94H88" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
            <g class="a-pencil">
              <path d="M0 0L-5 -14H5Z" fill="#5a3b00"/>
              <rect x="-5" y="-62" width="10" height="48" rx="2" fill="#ff7a59"/>
              <rect x="-5" y="-66" width="10" height="7" rx="2" fill="#ffd1c4"/>
            </g>
          </svg>
          <p class="pv__cap">Notes and essays</p>
        </div>
        <div class="pv__panel" style="--bg: #1bbf80" data-panel="shop">
          <svg viewBox="0 0 200 200">
            <g class="a-bag">
              <path d="M78 74V64C78 50 88 42 100 42C112 42 122 50 122 64V74" stroke="#ffffff" stroke-width="6" fill="none" stroke-linecap="round"/>
              <rect x="56" y="70" width="88" height="92" rx="10" fill="#ffffff"/>
              <rect x="56" y="70" width="88" height="16" rx="8" fill="#d9f7ea"/>
              <g class="a-tag">
                <path d="M128 92L128 112" stroke="#0e7a52" stroke-width="2"/>
                <path d="M118 112H138V136L128 144L118 136Z" fill="#0e7a52"/>
                <circle cx="128" cy="119" r="2.5" fill="#d9f7ea"/>
              </g>
            </g>
          </svg>
          <p class="pv__cap">Prints and books</p>
        </div>
        <div class="pv__panel" style="--bg: #b26bff" data-panel="contact">
          <svg viewBox="0 0 200 200">
            <rect class="a-letter" x="62" y="76" width="76" height="62" rx="4" fill="#ffffff"/>
            <path class="a-letter-lines" d="M72 88H120M72 98H112" stroke="#d7b6ff" stroke-width="4" stroke-linecap="round"/>
            <rect x="50" y="90" width="100" height="70" rx="8" fill="#e9d7ff"/>
            <path d="M50 98L100 132L150 98V152C150 156 147 160 142 160H58C53 160 50 156 50 152Z" fill="#f4eaff"/>
            <path class="a-flap" d="M52 92L100 126L148 92Z" fill="#d4b4ff"/>
          </svg>
          <p class="pv__cap">Say hello</p>
        </div>
      </div>
    </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.

28 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 con le anteprime» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco cinque link molto grandi, Projects, Studio, Journal, Shop e Contact, in nero, con una freccia accanto a Projects. All'arrivo le parole salgono una dopo l'altra e la freccia entra da sinistra. Col mouse su un link la parola scivola un poco a destra e prende il suo colore, le altre si schiariscono, e oltre la fine della parola compare una scheda colorata con l'ombra, che segue il puntatore con un attimo di ritardo e si inclina quando si muove, senza mai coprire la parola. Ogni link ha il suo disegno con una piccola scena: per Projects tre fogli si aprono a ventaglio e sorge un sole, per Studio crescono le foglie di una pianta alla finestra, per Journal una matita scrive le righe di un quaderno, per Shop una borsa cade e la sua etichetta dondola, per Contact una busta si apre e la lettera sale; sotto, una riga come Selected work o Say hello. Passando da un link all'altro i disegni scorrono in verticale dentro la scheda. Il clic fa fare un piccolo salto alla scheda, e la freccia si ritrae, scivola accanto al nuovo link e ci punta con un rimbalzo.

Come funziona

La scheda è della finestra

La scheda è un elemento fixed fuori dalla nav, che lascia passare il puntatore, e si muove con gsap.quickTo su x, y e rotation: a ogni movimento del puntatore si chiede un posto nuovo e il tween lo raggiunge in FOLLOW secondi con power3.out. Il posto è GAP pixel a destra del puntatore ma mai prima della fine della parola (misurata con un Range sul testo del link, più il passo di 0,12 em che fa quando è puntata), a sinistra se non c'è spazio, e sempre dentro la finestra.

L'inclinazione

La velocità del puntatore di traverso si misura da un movimento all'altro, in pixel al secondo, si ammorbidisce (ogni volta il 35% verso il valore nuovo) e diventa la rotazione: TILT gradi per pixel al secondo, al massimo MAXTILT. Quando il puntatore si ferma per un decimo di secondo la scheda si raddrizza.

Le pagine in una striscia

Dentro la scheda i cinque disegni stanno uno sopra l'altro in una striscia; mostrare il link i porta la striscia a meno i volte l'altezza della scheda con power3.inOut, così scendendo nella lista i disegni arrivano dal basso e salendo dall'alto. Ogni disegno ha una timeline in pausa che riparte da capo quando arriva (restart), e a riposo mostra come finisce (progress(1)).

Seguire il puntatore ovunque

Invece di pointerenter e pointerleave sui link, un solo pointermove sulla finestra guarda cosa c'è sotto il puntatore (closest('[data-link]')): sopra un link la scheda arriva, altrove se ne va, e se ne va anche quando il puntatore esce dalla finestra. L'aspetto del link puntato (il colore, il passo, gli altri al 22%) sta nel CSS, guidato da un attributo data-hover e da una classe is-hover.

Dito, tasti e anteprima

Un tocco sceglie il link e mostra la sua scheda accanto alla parola per 1,6 secondi; il Tab (focus-visible) mette la scheda accanto alla parola che ha il fuoco e Invio la sceglie. Un clic da script sulla nav (l'anteprima della libreria) è un mouse finto: arriva sul link dopo quello corrente, scivola su quello dopo ancora, lo preme ed esce a destra; un mouse vero che si muove prende subito il suo posto.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`FOLLOW`	script.js	`0.45`	I secondi che la scheda impiega a raggiungere il puntatore.
`TILT`	script.js	`0.012`	Quanto si inclina la scheda per ogni pixel al secondo del puntatore.
`MAXTILT`	script.js	`14`	Quanto si inclina al massimo, in gradi.
`GAP`	script.js	`34`	Quanto sta lontana la scheda dal puntatore, in pixel.

Provali nel Playground

Quando usarla

Per la nav di un sito con poche pagine molto diverse fra loro: uno studio creativo, un'agenzia, un fotografo, una rivista, un negozio con le sue sezioni, il menu a tutta pagina di un portfolio.

Sul telefono

Le parole vanno da 40 a 86 pixel con la larghezza e sotto i 600 pixel la scheda diventa di 150 per 186; senza hover, un tocco sceglie il link e mostra la sua scheda accanto alla parola, dentro lo schermo, per 1,6 secondi.

Con il movimento ridotto

La scheda compare e sparisce di colpo e sta subito al suo posto, senza ritardo e senza inclinarsi; i disegni cambiano senza scorrere e mostrano già la fine della loro scena, la parola puntata cambia colore senza spostarsi, la freccia salta sulla pagina scelta e all'arrivo le parole sono già al loro posto.

Trappole

La scheda è position fixed fuori dalla nav: dentro un antenato con un transform, fixed non si riferirebbe più alla finestra.
Le parole entrano con un'animazione di GSAP che lascia transform e opacità scritti sull'elemento: vanno tolti alla fine (clearProps), o lo spostamento e lo schiarirsi dell'hover, che stanno nel CSS, non funzionerebbero più.
La scheda non deve coprire la parola puntata: il suo posto parte dalla fine della parola, misurata con un Range sul testo, perché il link è largo quanto la fila e la parola no.
Un puntatore finto che manda eventi può farli risalire dai link (bubbling) e far credere che il puntatore sia uscito: per questo la nav ascolta pointermove sulla finestra e guarda cosa c'è sotto, invece di fidarsi di pointerleave.
La busta di Contact apre il lembo davanti alla lettera e poi lo fa passare dietro: a metà scena il lembo si sposta prima della lettera nel disegno (insertBefore), e torna davanti a ogni nuova scena.

Librerie

GSAP 3.15.0, Radio Canada Big (font variabile) 5.3.0.

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