La cornice che cambia misura

Immagini, TransizioniGSAPMediaPeso compresso: Demo 9,7 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: una galleria con una sola cornice sottile al centro. Le immagini dietro restano ferme e a ogni cambio la cornice prende fiato e scatta su una molla verso un’altra proporzione (quadrata, verticale, panoramica, orizzontale, storia), ritagliandole in un altro modo; la didascalia sotto rotola lettera per lettera.

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>Ratio</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- one thin frame in the middle of the room: the pictures behind it never move, the frame crops them -->
  <main class="room" data-room tabindex="0" role="region" aria-roledescription="gallery" aria-label="Ratio, a gallery of five pictures. Press the arrow keys or click to change picture.">
    <header class="top">
      <p class="mark" data-mark aria-hidden="true">Ratio</p>
      <p class="sub" data-sub>Studies in crop</p>
    </header>

    <div class="pictures" data-pictures aria-hidden="true"></div>

    <svg class="frame" data-frame aria-hidden="true">
      <path class="frame__line" data-line pathLength="1" d="" />
    </svg>

    <div class="caption" data-caption aria-hidden="true">
      <p class="caption__title"><span class="slot" data-title></span></p>
      <p class="caption__meta"><span class="slot slot--format" data-format></span><span class="slot slot--ratio" data-ratio></span></p>
    </div>

    <p class="hint" data-hint aria-hidden="true">Click for the next picture</p>
    <p class="sr" data-live aria-live="polite"></p>
  </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.

33 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 cornice che cambia misura» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una stanza color carta, con in alto a sinistra il nome di una galleria inventata, Ratio, e a destra una riga piccola. In mezzo una riga nera sottile si disegna tutto intorno a un quadrato, partendo da un angolo; dentro, l’immagine si apre da una linea orizzontale con una molla: un sole basso che tocca il mare, disegnato con forme piatte e sfumature morbide e con una grana leggera da stampa. Sotto la cornice salgono il titolo, Low sun, e a destra il nome della forma e la proporzione, Square 1:1: le lettere escono da sotto una dopo l’altra e si allargano con un piccolo rimbalzo dell’asse della larghezza. Dopo un paio di secondi la cornice cambia: si stringe di un soffio, poi scatta su una molla verso la proporzione nuova, la supera di poco e si assesta, mentre lo spazio bianco fra immagine e riga si apre e si richiude con un elastico. All’inizio è ancora l’immagine di prima, ritagliata in un altro modo (dietro la cornice non si muove niente); poi la nuova entra con una tendina, di lato se la cornice si allarga, dal basso se si alza. Intanto la didascalia rotola: le lettere del titolo vecchio scappano in alto, quelle nuove salgono da sotto, poi il nome della forma e la proporzione. Le cinque immagini sono due colline in verticale (4:5), un’acqua ferma con un’isola in panoramica (21:9), un arco di terracotta in orizzontale (3:2) e un campo di notte nel formato delle storie (9:16), poi si ricomincia. Un clic passa all’immagine dopo, un clic sul terzo sinistro torna a quella prima (la riga in fondo dice da che parte si va); anche le frecce della tastiera e, sul telefono, il tocco e lo scorrere del dito. Col mouse la cornice scivola di qualche pixel verso il puntatore sopra l’immagine ferma, e quando ci si passa sopra lo spazio bianco si stringe e l’immagine resta finché non si esce.

Come funziona

Le immagini non si muovono

Ogni immagine è un SVG grande quanto la stanza, disegnato dallo script intorno al centro della cornice: il sole, le colline, l’isola e l’arco stanno sempre nel mezzo, così ogni ritaglio è un buon ritaglio. Tutte stanno in un contenitore solo, tagliato con clip-path: inset(), e la finestra è la cornice: cambiando i quattro valori di inset cambia la forma, mentre le immagini restano dove sono. Sopra c’è una piastrella di rumore disegnata una volta su una canvas, in multiply, per la grana.

Le proporzioni

Ogni voce di PICTURES ha la sua proporzione scritta come larghezza:altezza. Per ognuna la misura si trova facendola stare nello spazio libero (tolti il nome in alto e la didascalia in basso) e poi limitandone l’area a poco più di quella del quadrato: così la panoramica non diventa enorme e la storia non sparisce, sembra davvero la stessa immagine tagliata in un altro modo.

Una molla vera

La facilità è una funzione scritta a mano: la posizione di una molla lasciata andare da ferma, 1 meno e alla meno dt per (cos wt più d/w sin wt). Il primo superamento vale e alla meno d pi greco su w, quindi SPRING sceglie proprio quanto la cornice va oltre; il piccolo resto che rimane a fine corsa si spalma sulla coda, così il tween arriva preciso. Prima della molla la cornice si stringe dell’1,6% in un sesto di secondo: è il respiro che prepara il salto.

La riga e lo spazio bianco

La riga sottile è un path in un SVG grande quanto la stanza, ridisegnato a ogni fotogramma dal ticker di GSAP intorno alla finestra, a mezzo pixel per restare nitida. Lo spazio fra immagine e riga è un numero a parte: durante il cambio si apre con power2.out e si richiude con elastic.out, e col mouse sopra si stringe; così la riga non tocca mai l’immagine, anche quando la molla va oltre. All’apertura la riga si disegna con stroke-dashoffset su pathLength 1.

La tendina e la didascalia

L’immagine nuova sale sopra le altre e si scopre con un clip-path: inset() suo, che corre da un lato del riquadro che contiene la cornice vecchia e la nuova; parte quando la molla è già a un terzo, così prima si vede la vecchia ritagliata in un altro modo. La didascalia segue il bordo basso della riga ed è larga quanto lei. Ogni testo sta in una fessura con overflow nascosto: le righe vecchie e nuove stanno una sopra l’altra nella stessa cella della griglia, le lettere escono in alto e entrano dal basso, e la variabile --w porta l’asse wdth del carattere da 76 a 100 con un elastico.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PICTURES`	script.js	`[{ title: 'Low sun', shape: 'Square', ratio: '1:1' }, …]`	Le immagini, in ordine: il titolo, il nome della forma e la proporzione della cornice (larghezza:altezza, per esempio 16:9). I disegni sono cinque e si ripetono se le voci sono di più.
`HOLD`	script.js	`2.6`	Quanti secondi resta ogni immagine prima della successiva.
`MORPH`	script.js	`1.15`	Quanti secondi impiega la cornice a cambiare forma.
`SPRING`	script.js	`0.4`	Quanto la cornice va oltre prima di assestarsi: 0 arriva liscia, 1 rimbalza parecchio.
`MAT`	script.js	`10`	Lo spazio bianco fra l’immagine e la riga, in pixel (0 = la riga sul bordo dell’immagine).
`SIZE`	script.js	`0.8`	Quanto spazio della stanza occupa la cornice.
`AUTOPLAY`	script.js	`true`	Se le immagini cambiano da sole. Con false cambiano solo col clic, col dito o con le frecce.

Provali nel Playground

Quando usarla

Per una galleria che deve sembrare un oggetto e non una griglia: il portfolio di un fotografo o di un illustratore, la pagina di una mostra, la vetrina di uno studio di grafica, un sito di stampe d’arte, la presentazione di un progetto. Mostra bene immagini di formati diversi senza deformarle né tagliarle a caso.

Sul telefono

La stessa animazione con le misure adattate: la cornice occupa quasi tutta la larghezza, il titolo è più piccolo. Un tocco passa all’immagine dopo, lo scorrere del dito a destra o a sinistra va avanti o indietro.

Con il movimento ridotto

Niente si muove: tutto compare in dissolvenza, e a ogni cambio cornice, immagine e didascalia svaniscono e ricompaiono con la forma nuova, senza molla, tendina né lettere che rotolano.

Trappole

Con la tendina che partiva insieme alla molla l’idea non si capiva: si vedeva solo un’immagine nuova in una cornice nuova. Parte quando la molla è a un terzo, così prima si vede l’immagine vecchia ritagliata in un altro modo.
Una riga che seguiva la cornice con un po’ di ritardo, nei salti grandi (dalla storia alla panoramica) finiva sopra l’immagine: lo spazio bianco è un numero a parte che si apre e si richiude con un elastico, e la riga è sempre la finestra più quello spazio.
Fra una panoramica e una storia l’area cambiava del triplo e sembravano due immagini diverse: ogni forma sta nello spazio libero ma la sua area non supera di molto quella del quadrato.
Le lettere che si allargano con l’elastico cambiano la larghezza della riga: le righe vecchie e nuove stanno nella stessa cella della griglia, così la fessura non salta, e il nome della forma sta a destra, lontano dal titolo.
La riga di un pixel su coordinate intere si sfoca su due pixel: il path si disegna sul mezzo pixel, e la finestra su pixel interi.

Librerie

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 9,7 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 14 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Da fare

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.