La barra con la tacca

Menu, SVG, TransizioniGSAPMediaPeso compresso: Demo 4,8 KBGSAP 28 KBGratisScarica lo zip

Una barra di navigazione scura con una tacca nel bordo e un disco corallo che ci galleggia dentro: scegliendo una voce, tacca e disco scivolano lì su una molla, la tacca si allarga correndo, il disco si abbassa e si schiaccia come una goccia, e l’icona sale nel disco con la sua piccola mossa.

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 notched tab bar</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/lexend@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the tab bar: a dark bar with a notch cut in its top edge and a coral disc floating in it. Choosing a tab, the
         notch and the disc slide there on a spring (the notch widens while it runs, the disc dips and squashes),
         the old icon drops back into the bar and the new one rises into the disc. The bar's shape is drawn by the
         script -->
    <nav class="bar" aria-label="Main" data-bar>
      <svg class="bar__shape" aria-hidden="true" data-shape><path data-path/></svg>
      <span class="bar__bubble" aria-hidden="true" data-bubble></span>
      <span class="bar__label" aria-hidden="true" data-label></span>
      <button class="tab" type="button" data-tab="Home" data-autoclic>
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 11.2 12 4.8l8 6.4V20h-5.6v-5.6H9.6V20H4z"/></svg>
        <span class="sr">Home</span>
      </button>
      <button class="tab" type="button" data-tab="Search">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10.5 4.5a6 6 0 1 0 0 12a6 6 0 1 0 0-12zM15 15l4.5 4.5"/></svg>
        <span class="sr">Search</span>
      </button>
      <button class="tab" type="button" data-tab="New">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
        <span class="sr">New</span>
      </button>
      <button class="tab" type="button" data-tab="Saved">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19.5s-7.5-4.6-7.5-10A4.2 4.2 0 0 1 12 7a4.2 4.2 0 0 1 7.5 2.5c0 5.4-7.5 10-7.5 10z"/></svg>
        <span class="sr">Saved</span>
      </button>
      <button class="tab" type="button" data-tab="Profile">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4.5a3.6 3.6 0 1 0 0 7.2a3.6 3.6 0 1 0 0-7.2zM5 19.5c.8-3.4 3.6-5.5 7-5.5s6.2 2.1 7 5.5"/></svg>
        <span class="sr">Profile</span>
      </button>
    </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.

18 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 barra con la tacca» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una barra quasi nera dai bordi arrotondati, con cinque icone grigie: casa, lente, più, cuore e persona. Nel bordo in alto c’è una tacca, e nella tacca galleggia un disco corallo con dentro l’icona della voce scelta, bianca, e sotto il suo nome. Aprendo la pagina la barra sale, la tacca si apre e il disco ci cade dentro con un rimbalzo. Scegliendo un’altra voce la tacca e il disco scivolano fin lì su una molla: correndo la tacca si allarga e il disco si abbassa nella barra e si schiaccia come una goccia, poi rallenta, torna tondo e oltrepassa appena il punto. L’icona di prima riscende nella barra e torna grigia, la nuova sale nel disco e fa la sua mossa: la casa saltella, la lente oscilla, il più fa mezzo giro, il cuore batte, la persona annuisce; il nome sotto il disco sparisce e torna con quello nuovo.

Come funziona

Un contorno solo

La barra è un path SVG che lo script ridisegna a ogni fotogramma: un rettangolo coi bordi tondi e, intorno al punto c, una tacca fatta di due curve di Bézier. Metà della sua larghezza è NOTCH[0] più la velocità per STRETCH, e non entra mai negli angoli arrotondati.

La molla

Il punto c segue la voce scelta con una molla scritta a mano (SPRING), calcolata sul ticker di GSAP a passi di 4 millisecondi. Dalla sua velocità vengono la larghezza della tacca, quanto il disco scende nella barra (DIP) e quanto si schiaccia: più largo e più basso nella stessa misura.

Le icone

L’icona di prima riscende a y 0 con power3.inOut; la nuova sale di RISE pixel con back.out, con un ritardo che cresce con la distanza fra le due voci, così arriva insieme al disco. Arrivata fa la sua mossa (MOVES), sull’icona e non sul pulsante, così non litiga con la salita.

Il nome

Sotto il disco c’è un nome solo che segue c a ogni fotogramma: alla scelta sparisce scendendo appena, cambia testo e torna.

Tastiera e anteprima

Le voci sono pulsanti in un nav, e quella scelta ha aria-current="page"; le frecce spostano il fuoco fra le voci, Inizio e Fine vanno ai capi. L’anteprima della libreria clicca il segno data-autoclic, che lo script sposta ogni volta sulla voce dopo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`START`	script.js	`0`	La voce scelta all’apertura della pagina (0 è la prima).
`SPRING`	script.js	`[210, 0.62]`	La molla di tacca e disco: quanto è rigida e quanto è frenata.
`NOTCH`	script.js	`[42, 34]`	La tacca a riposo: metà della larghezza e profondità, in pixel.
`STRETCH`	script.js	`0.03`	Quanto si allarga la tacca con la velocità.
`DIP`	script.js	`0.012`	Quanto scende il disco nella barra con la velocità.
`RISE`	script.js	`40`	Di quanto sale un’icona per entrare nel disco, in pixel.

Provali nel Playground

Quando usarla

Per la navigazione in fondo allo schermo di una web app o di un sito pensato per il telefono, per le sezioni di un’app, per una barra di strumenti.

Sul telefono

La barra prende la larghezza dello schermo meno un margine e le voci si avvicinano; accanto ai capi la tacca si restringe per non entrare negli angoli arrotondati. Due tocchi veloci non ingrandiscono la pagina.

Con il movimento ridotto

Tacca, disco e icone vanno subito al loro posto: niente scivolata, niente goccia, niente mosse delle icone e niente entrata.

Trappole

Accanto ai capi della barra la tacca entrerebbe negli angoli arrotondati e il contorno si romperebbe: la sua metà è limitata dalla distanza dagli angoli.
La salita dell’icona (y sul pulsante) e la sua mossa (scala, rotazione e y sull’icona) stanno su due elementi diversi: sullo stesso, l’annuire della persona litigherebbe con la salita.
Dalla prima all’ultima voce la distanza è grande: la molla va calcolata a passi di 4 millisecondi al massimo, o un fotogramma lento la farebbe esplodere.
L’icona nuova deve arrivare nel disco quando ci arriva il disco: il suo ritardo cresce con la distanza fra le due voci.

Librerie

GSAP 3.15.0, Lexend (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 3 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.