La barra laterale

Navigazione, Transizioni, SVGGSAPImpegnativaPeso compresso: Demo 7,3 KBGSAP 28 KBGratisScarica lo zip

Una barra scura con le pagine e le loro icone: una pillola chiara scivola sotto la pagina scelta, allungandosi per strada, e ogni icona ha il suo piccolo movimento. Projects apre le sue pagine sotto di sé, e il pulsante in cima chiude la barra fino alle sole icone: da lì il nome di una pagina esce accanto all'icona puntata e scivola da un'icona all'altra.

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 sidebar</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/atkinson-hyperlegible-next@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the sidebar: a light pill slides to the page chosen and every icon has its own little movement; Projects opens
         its pages underneath; the button at the top folds the bar down to its icons, and then the names come out
         beside the pointer -->
    <div class="sb-wrap" data-wrap>
      <nav class="sb" aria-label="Main" data-nav data-autoclic>
        <button class="sb__toggle" type="button" aria-expanded="true" aria-controls="sb-list" aria-label="Collapse the sidebar" data-toggle>
          <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2.5"/><path d="M9.5 4V20"/><path class="i-chev" d="M15.5 9.5L13 12L15.5 14.5"/></svg>
        </button>
        <div class="sb__body" data-body>
          <span class="sb__pill" data-pill aria-hidden="true"></span>
          <ul class="sb__list" id="sb-list">
            <li><a class="sb__item" href="#" aria-current="page" data-item data-icon="home">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path class="i-roof" d="M3.5 10.5L12 3.5L20.5 10.5"/><path d="M5.5 9V20H18.5V9"/><path class="i-door" d="M10 20V14.5H14V20"/></svg>
              <span class="sb__label">Home</span></a></li>
            <li><a class="sb__item" href="#" data-item data-icon="inbox">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 13.5H8L9.5 16.5H14.5L16 13.5H21V20H3Z"/><g class="i-arrow"><path d="M12 3V11M8.5 7.5L12 11L15.5 7.5"/></g></svg>
              <span class="sb__label">Inbox</span></a></li>
            <li class="sb__group">
              <button class="sb__item sb__item--parent" type="button" aria-expanded="true" aria-controls="sb-projects" data-projects data-icon="projects">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 19V5.5H9L11 7.5H19.5V11"/><path class="i-flap" d="M3 19L5.5 11H22L19.5 19Z"/></svg>
                <span class="sb__label">Projects</span>
                <svg class="sb__chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 6.5L15 12L9.5 17.5"/></svg>
              </button>
              <div class="sb__sub" id="sb-projects" data-sub>
                <span class="sb__guide" data-guide aria-hidden="true"></span>
                <ul>
                  <li><a class="sb__item sb__item--child" href="#" data-item><span class="sb__label">Website</span></a></li>
                  <li><a class="sb__item sb__item--child" href="#" data-item><span class="sb__label">Mobile app</span></a></li>
                  <li><a class="sb__item sb__item--child" href="#" data-item><span class="sb__label">Brand book</span></a></li>
                </ul>
              </div>
            </li>
            <li><a class="sb__item" href="#" data-item data-icon="calendar">
              <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2.5"/><path d="M8 3V7M16 3V7M3 10H21"/><rect class="i-day" x="13" y="13.5" width="4.5" height="4.5" rx="1"/></svg>
              <span class="sb__label">Calendar</span></a></li>
            <li><a class="sb__item" href="#" data-item data-icon="reports">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 20.5H21"/><path class="i-bar" d="M6.5 18V12.5"/><path class="i-bar" d="M12 18V8"/><path class="i-bar" d="M17.5 18V4.5"/></svg>
              <span class="sb__label">Reports</span></a></li>
            <li><a class="sb__item" href="#" data-item data-icon="settings">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6.5H7M11 6.5H20M4 12H13M17 12H20M4 17.5H6M10 17.5H20"/><path class="i-knob" d="M9 4V9"/><path class="i-knob" d="M15 9.5V14.5"/><path class="i-knob" d="M8 15V20"/></svg>
              <span class="sb__label">Settings</span></a></li>
          </ul>
        </div>
      </nav>
      <!-- the name of an icon, beside it, while the bar is folded -->
      <span class="sb__tip" aria-hidden="true" data-tip><span data-tip-text></span></span>
    </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.

21 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 laterale» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una barra quasi nera con gli angoli tondi: in cima un pulsante col disegno di una barra laterale, poi Home, Inbox, Projects con le sue pagine Website, Mobile app e Brand book, Calendar, Reports e Settings, ognuna con la sua icona. Sotto Home c'è una pillola grigia con una piccola barra viola sul bordo sinistro. All'arrivo le righe entrano da sinistra una dopo l'altra, la pillola si allarga sotto Home e la casetta apre la porta. Scegliendo un'altra pagina la pillola ci va con il bordo davanti che parte subito e quello dietro che segue, allungandosi per strada e ricompattandosi all'arrivo, e l'icona fa il suo movimento: la porta della casa si apre, la freccia cade nel vassoio, la cartella si apre, il giorno compare sul calendario, le colonne crescono, i cursori scorrono; puntare una pagina col mouse fa lo stesso movimento. Scelta una pagina di Projects, anche Projects resta chiaro. Projects apre e chiude le sue pagine: la freccia gira, la riga guida scende dalla sua icona e le pagine entrano da sinistra, mentre le righe sotto scorrono e la pillola le segue. Il pulsante in cima chiude la barra: la sua freccina si gira, i nomi svaniscono, la barra si stringe alle sole icone e le pagine di Projects si chiudono; da lì, puntando un'icona, il suo nome esce accanto in un'etichetta, che scivola da un'icona all'altra cambiando parola. Toccando Projects a barra chiusa, la barra si riapre con le sue pagine; riaperta, i nomi tornano uno dopo l'altro.

Come funziona

La pillola a due molle

La pillola è una scatola sotto la lista, di cui lo script mette top e height. I suoi due bordi sono due molle senza rimbalzo che a ogni fotogramma inseguono la riga della pagina scelta (offsetTop sommato risalendo gli offsetParent fino alla lista): il bordo dalla parte in cui la pillola va ha la molla più rigida, il cui tempo è circa SLIDE secondi, l'altro TRAIL volte quella, così la pillola si allunga e si ricompatta.

Seguire la riga

Quando le righe si spostano (Projects che si apre o si chiude, la barra che si piega) la pillola si sposta con la sua riga della stessa misura e nello stesso fotogramma, e le molle fanno solo il viaggio da una pagina all'altra. Mentre le pagine di Projects sono nascoste, la pillola sta su Projects.

Le icone

Ogni icona ha una timeline in pausa sulle parti del suo SVG (il tetto e la porta, la freccia, il davanti della cartella, il giorno, le colonne, le tacche dei cursori), che riparte da capo (restart) quando la pagina è scelta o puntata; a riposo ognuna mostra come finisce il suo movimento (progress(1)).

Projects e la barra piegata

La scatola delle pagine di Projects anima l'altezza fra zero e quella della sua lista (power3.inOut, 0,45 secondi), la freccia gira di 90 gradi, la guida scende (scaleY) e le pagine entrano una dopo l'altra; le pagine nascoste sono inert, fuori dalla strada del Tab. Piegando, i nomi svaniscono spostandosi di 6 pixel uno dopo l'altro, la larghezza passa da 248 a 66 pixel in FOLD secondi e le pagine di Projects si chiudono; aprendo succede il contrario, e alla fine le pagine si riaprono se erano aperte.

L'etichetta, i tasti e l'anteprima

A barra piegata, puntare un'icona o arrivarci col Tab mostra il suo nome in un'etichetta accanto: entra da 8 pixel a sinistra con back.out, scivola sull'icona dopo in 0,28 secondi e la sua parola rotola; Escape o l'uscita dalla barra la nascondono, e dopo un tocco resta per 1,2 secondi. Il pulsante in cima ha aria-expanded e la sua etichetta dice Collapse o Expand the sidebar. Un clic da script sulla barra (l'anteprima della libreria) fa il passo dopo di un piccolo giro: Inbox, Website, piega, Calendar col suo nome, apre, chiude Projects, Home, riapre Projects.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SLIDE`	script.js	`0.42`	Più o meno i secondi che il bordo davanti della pillola impiega ad arrivare.
`TRAIL`	script.js	`0.55`	Quanto è rigido il bordo dietro rispetto a quello davanti: di meno allunga di più la pillola.
`FOLD`	script.js	`0.5`	I secondi che la barra impiega a piegarsi o ad aprirsi.

Provali nel Playground

Quando usarla

Per la barra di un'app o di un pannello di gestione: una posta, un gestionale, un'app di progetti, il pannello di un sito, uno strumento per le prenotazioni, una dashboard.

Sul telefono

La barra è larga 248 pixel aperta e 66 piegata, e sta in uno schermo da telefono; le righe sono alte 40 pixel (34 le pagine di Projects). Senza hover, a barra piegata un tocco su un'icona sceglie la pagina e mostra il suo nome per 1,2 secondi.

Con il movimento ridotto

La pillola salta sulla pagina scelta senza allungarsi, le icone stanno ferme, la barra si piega e si apre di colpo, le pagine di Projects compaiono e spariscono senza scorrere e l'etichetta del nome compare e sparisce senza muoversi; all'arrivo le righe sono già al loro posto.

Trappole

Mentre le pagine di Projects si aprono, le righe sotto si spostano: una pillola mandata con un tween verso un posto preso all'inizio arriverebbe nel posto sbagliato. Per questo segue la sua riga a ogni fotogramma.
La pillola si sposta con top e height, non con un transform: il transform resta libero per la sua entrata, che GSAP anima con scaleX, e i due non si sovrascrivono.
I nomi nascosti con l'opacità restano leggibili per i lettori di schermo, ed è quello che serve a barra piegata; le pagine di Projects chiuse invece diventano inert, o il Tab finirebbe su righe invisibili.
La barra ha overflow hidden per tagliare i nomi mentre si stringe: per questo l'etichetta del nome sta fuori dalla barra, accanto a lei, o verrebbe tagliata anche lei.
Le icone partono dalla fine del loro movimento (progress(1)): un fromTo in pausa scrive subito lo stato di partenza, e le colonne di Reports, per esempio, resterebbero a zero finché non si sceglie la pagina.

Librerie

GSAP 3.15.0, Atkinson Hyperlegible Next (font variabile) 5.3.0.

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