La galleria che si apre

Gallerie, Transizioni, Immagini, FisicaGSAPImpegnativaPeso compresso: Demo 13 KBGSAP 28 KBGratisScarica lo zip

Sei quadri in una griglia: aprendone uno, il quadro vola fuori dal suo quadrato e si allarga in mezzo allo schermo togliendosi il ritaglio, mentre dietro la pagina si scurisce nel colore del quadro; si passa da un quadro all’altro su una molla e, trascinato in giù, il quadro torna a volo nel suo quadrato.

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 gallery that opens</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jost@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the gallery: six pictures in a grid. Each one opens into the viewer flying out of its square, slides to the
         next on a spring and closes by being dragged down. The pictures are drawn by the script into the sprite -->
    <section class="gallery" aria-label="Summer pictures" data-gallery data-autoclic>
      <svg class="gallery__sprite" aria-hidden="true" focusable="false" data-sprite></svg>
      <ul class="gallery__grid" data-grid></ul>
      <p class="gallery__hint">Open a picture, swipe to the next, drag it down to close.</p>

      <div class="viewer" role="dialog" aria-modal="true" aria-label="Pictures" tabindex="-1" hidden data-viewer>
        <div class="viewer__shade" data-shade></div>
        <div class="viewer__track" data-track></div>
        <div class="viewer__caption" aria-live="polite" data-caption>
          <h2 class="viewer__title" data-cap-title></h2>
          <p class="viewer__line" data-cap-line></p>
        </div>
        <div class="viewer__strip" data-strip><span class="viewer__ring" aria-hidden="true" data-ring></span></div>
        <button class="viewer__btn viewer__close" type="button" aria-label="Close" data-close>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11"/></svg>
        </button>
        <button class="viewer__btn viewer__nav viewer__nav--prev" type="button" aria-label="Previous picture" data-prev>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 6 8.5 12l6 6"/></svg>
        </button>
        <button class="viewer__btn viewer__nav viewer__nav--next" type="button" aria-label="Next picture" data-next>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 6l6 6-6 6"/></svg>
        </button>
      </div>
    </section>
  </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.

9 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 galleria che si apre» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una griglia di sei quadrati dagli angoli tondi, sei quadri disegnati a colori pieni: scogliere al tramonto con un faro, dune, un lago coi monti innevati che si specchiano, un portico con tre archi, campi visti dall’alto con un fiume, onde con una piccola vela. Sotto, Open a picture, swipe to the next, drag it down to close. Sotto il puntatore un quadrato ingrandisce un poco il suo quadro e dal basso sale il nome. Aprendolo, il quadro vola dal suo quadrato al centro dello schermo, crescendo e perdendo il ritaglio fino alla sua forma intera, larga o alta, con un leggero slancio; dietro la pagina si scurisce in una tinta del quadro e la griglia arretra e si spegne; compaiono il nome e una riga sotto il quadro, una striscia coi sei quadri piccoli e un anello intorno a quello aperto, un pulsante tondo per chiudere in alto a destra e, sul computer, le frecce ai lati. Col dito, con le frecce o coi tasti si scorre al quadro accanto su una molla: i quadri si rimpiccioliscono un poco allontanandosi dal centro, il fondo cambia tinta fra un quadro e l’altro, il nome scivola via e arriva il nuovo, l’anello corre lungo la striscia. Trascinato in giù, il quadro segue la mano rimpicciolendo mentre il fondo si schiarisce e la griglia torna avanti; lasciato oltre un certo punto vola indietro nel suo quadrato, altrimenti torna al centro.

Come funziona

Sei disegni, usati tre volte

I quadri li disegna lo script, una volta ciascuno, come simboli SVG (symbol) fatti di sfumature e forme: le colline sono curve morbide che passano per dei punti, i campi una griglia di punti spostati da numeri a caso, ma sempre gli stessi. Ogni quadro si usa con use nei quadrati della griglia (preserveAspectRatio slice, tagliato a quadrato), aperto e nella striscia.

Il volo

All’apertura il quadro è già al suo posto, grande e intero, e lo script lo riporta nel quadrato: lo sposta sul centro del quadrato, lo scala alla sua misura e con un clip-path inset lo ritaglia al quadrato centrale, con gli angoli tondi che restano uguali sullo schermo. Poi GSAP riporta spostamento, scala e ritaglio a zero in OPEN secondi: lo spostamento con back.out (un poco oltre e indietro), il ritaglio con power3.out. Chiudendo, lo stesso al contrario verso il quadrato della griglia.

La molla fra i quadri

I quadri aperti stanno in fila, uno schermo l’uno dall’altro; la posizione è un numero (quale quadro, coi decimali) che una molla (SWIPE) porta al quadro scelto, calcolata sul ticker di GSAP a passi di 4 millisecondi. Trascinando, la fila segue il dito (con resistenza oltre il primo e l’ultimo); lasciata, passa al quadro accanto se è andata oltre un quinto della larghezza (22 per cento) o se è stata lanciata. Ogni quadro rimpicciolisce di DEPTH allontanandosi dal centro e il fondo prende la tinta fra quelle dei due quadri.

Giù per chiudere

Un trascinamento in verticale porta via il quadro: segue la mano (di lato per 0,7) e rimpicciolisce fino a 0,65, il fondo e i comandi sfumano e la griglia torna avanti. Oltre DISMISS pixel, o con un lancio veloce, vola nel suo quadrato; altrimenti torna al centro con back.out.

Tasti e anteprima

Il visore è una finestra (role dialog, aria-modal): le frecce e Inizio e Fine cambiano quadro, Esc chiude e Tab resta dentro; su un trackpad uno scorrimento di lato passa a un quadro solo. Chiuso, la focalizzazione torna al quadrato. Un clic da script (l’anteprima della libreria) apre un quadro, va avanti due volte e lo chiude.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`OPEN`	script.js	`0.62`	I secondi del volo di un quadro che si apre (a chiudere va un po’ più svelto).
`SWIPE`	script.js	`[260, 0.86]`	La molla fra un quadro e l’altro: quanto è rigida e quanto è frenata.
`DEPTH`	script.js	`0.1`	Quanto rimpicciolisce un quadro allontanandosi dal centro.
`DISMISS`	script.js	`110`	Di quanti pixel si trascina in giù un quadro per chiuderlo.

Provali nel Playground

Quando usarla

Per un portfolio, le camere di una struttura, i piatti di un menu, un catalogo di prodotti, un reportage: ovunque una griglia di immagini debba aprirsi senza perdere il filo.

Sul telefono

Due colonne di quadrati; aperto, il quadro prende la larghezza dello schermo, si sfoglia col dito e si chiude trascinandolo in giù. Le frecce ai lati non ci sono: restano la striscia dei quadri piccoli e il pulsante per chiudere.

Con il movimento ridotto

Il quadro si apre e si chiude senza volo, già al suo posto; fra un quadro e l’altro si passa senza molla e i quadri ai lati non rimpiccioliscono. Trascinato in giù, il quadro segue ancora la mano.

Trappole

Un quadro che passa da un quadrato a un rettangolo non si fa con scale, che lo deformerebbe: il quadro è già della sua forma, un clip-path inset lo ritaglia a quadrato e scale lo rimpicciolisce, così il ritaglio si apre durante il volo.
Gli angoli tondi del ritaglio scalano insieme al quadro: per vederli uguali sullo schermo il raggio si divide per la scala del momento.
Chiudendo, la griglia sta tornando alla sua misura: il quadrato si misura togliendo per un attimo la trasformazione alla griglia, altrimenti il quadro atterrerebbe un po’ accanto.
Un quadrato sotto il puntatore ha il quadro ingrandito: il ritaglio di partenza e di arrivo tiene conto della scala letta dal CSS calcolato, o il volo comincerebbe con un salto.
La prima volta che Safari disegna grande un quadro impiega un fotogramma lungo, e il volo partirebbe già a metà: il quadro resta fermo sul suo quadrato per due fotogrammi, uguale a lui, e poi vola.

Librerie

GSAP 3.15.0, Jost (font variabile) 5.3.0.

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