Persiane sulle immagini
Immagini, Scroll
NuovaGratis
Torna alla libreria
Le foto che vanno nell’indice
Scorri dentro l’anteprima
Animazione di scroll per gallerie nello stile minimal: una foto alla volta si apre al centro in una cornice sottile, una quota ne misura l’altezza, poi scorrendo si rimpicciolisce e scende nel suo posto nella fila dell’indice in basso, dove atterra un pixel troppo in giù e si assesta. A fila piena arriva il titolo.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sable photo archive</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up photo archive, Sable. The stage sticks while you scroll: one print at a time opens in a thin frame,
its size is measured on the side, then it shrinks along the page into its own slot in the index row at the
bottom, lands a pixel too low and settles. When the row is full the title comes in. The prints are drawn in
CSS, from the colours below -->
<main>
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<header class="testa">
<a class="marchio" href="#">Sable</a>
<p class="testa__nota">Photo archive, 2019–2025</p>
</header>
<div class="quota" data-quota aria-hidden="true">
<span class="quota__riga" data-quota-riga></span>
<span class="quota__testo" data-quota-testo></span>
</div>
<p class="didascalia" data-didascalia aria-live="polite"><span data-did-titolo></span> <span class="didascalia__nota" data-did-nota></span></p>
<div class="stampe" data-stampe></div>
<ol class="indice" data-indice aria-label="Index"></ol>
<div class="finale" data-finale>
<h1 class="finale__titolo" data-finale-titolo>Five places, one light.</h1>
<span class="finale__riga" data-finale-riga></span>
<p class="finale__nota" data-finale-nota>The autumn index is complete.</p>
</div>
<p class="cenno" data-cenno><span>Scroll</span><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 3v13M4.5 10.5 10 16l5.5-5.5"/></svg></p>
</div>
</section>
<footer class="piede">
<p>Sable keeps one print of every place it has stood in. Ask for the full index by letter.</p>
</footer>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.
31 valori da cambiare
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 «Le foto che vanno nell’indice» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo con in alto il nome di un archivio fotografico inventato, Sable. Al centro c’è già aperta una stampa, Dune, in una cornice sottile, con accanto una quota che ne misura l’altezza (30 cm) e sotto il titolo e il formato; in fondo alla pagina una fila di cinque posti vuoti, ognuno col suo nome, e un segno vermiglio sotto il posto di Dune. Scorrendo il palco resta fermo: la stampa si rimpicciolisce e scende lungo la pagina dentro il suo posto nella fila, ci arriva un pixel troppo in basso e si assesta, e il nome del posto passa dal grigio al nero. Intanto al centro si apre la stampa successiva, dal basso verso l’alto, e la sua cornice si stringe intorno; la quota si ridisegna con la misura nuova e il segno vermiglio corre sotto il posto dove andrà. Così per tutte e cinque, Dune, Shore, Salt, Quarry e Night. A fila piena arriva il titolo «Five places, one light.»: entra leggero e largo e prende peso stringendosi, poi sotto si disegna una riga vermiglia e compare la nota. Tornando su le stampe escono dall’indice nello stesso ordine al contrario.
Come funziona
Le misure dalla finestra
Lo script misura il palco e ne ricava tutto in pixel: i posti della fila (larghi al massimo un quinto della riga e alti al massimo il 13% dello schermo, in formato 4:5), la stampa aperta (nello spazio libero fra la testata e la fila, con la didascalia sotto e la quota a destra) e il punto del titolo finale. Al resize ricalcola, anche a metà corsa, e ScrollTrigger si rinfresca.
Un numero per tutta la corsa
Un ScrollTrigger senza timeline legge l’avanzamento della sezione, Lenis ammorbidisce lo scroll e una media esponenziale lo insegue ancora (SMOOTH). L’avanzamento diventa un numero u: ogni stampa ha il suo tempo t = u meno il suo posto per 0,62, così la successiva comincia ad aprirsi mentre quella prima parte. Da t vengono l’apertura (clip-path dal basso e un piccolo zoom da 1,12 a 1, da 0 a 0,3), la quota (da 0,28), e il viaggio verso il posto (da 0,55 a 0,95, con power3.inOut, lerp della posizione e scala fino alla misura del posto).
L’atterraggio
Quando una stampa passa nel suo posto riceve un colpo su una molla smorzata (LANDING e SPRING) che la fa scendere di un pixel o due e tornare; il posto vuoto sparisce sotto e il nome passa a inchiostro. Il segno vermiglio sotto la fila è un piccolo tween di GSAP, non legato allo scroll, che si sposta sotto il posto di destinazione della stampa aperta.
Il titolo
Nell’ultimo tratto il titolo entra con opacità e otto pixel di salita, e i suoi assi di Archivo vanno da peso 260 e larghezza 118 a peso 620 e larghezza 94; la riga vermiglia si allarga con scaleX e la nota arriva per ultima.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PRINTS | script.js | ['Dune', 'Shore', 'Salt', 'Quarry', 'Night'] | Le stampe, in ordine (fino a sei). Nomi corti: sul telefono stanno sotto posti stretti. |
SIZES | script.js | ['24 x 30 cm', '30 x 40 cm', '20 x 25 cm', '40 x 50 cm', '24 x 30 cm'] | Il formato scritto accanto a ogni stampa; la quota mostra il secondo numero. |
OPEN | script.js | 0.62 | Quanto è grande la stampa aperta, rispetto allo spazio libero. |
SLOT | script.js | 0.13 | Quanto può essere alto un posto dell’indice, in parte dell’altezza dello schermo. |
LANDING | script.js | 30 | Quanto forte una stampa atterra nel suo posto: 0 la posa senza il pixel di troppo. |
SPRING | script.js | 300 | Quanto è rigida la molla dell’atterraggio: di più è più rapida. |
SMOOTH | script.js | 6 | Quanto in fretta le stampe raggiungono lo scroll: meno è più morbido. |
RIDE | script.js | 1 | Quanto scroll serve per tutto: 2 è il doppio. |
Quando usarla
Per la galleria di un fotografo, di un archivio, di una mostra o di un catalogo: una pagina che mostra le immagini una alla volta e le mette in ordine mentre si scorre, finendo con un titolo sopra la fila completa.
Sul telefono
La stessa animazione con le misure adattate: la fila dei posti prende tutta la larghezza, la stampa aperta sta nello spazio che resta sopra e la quota le sta accanto. Tutto si ricalcola se la finestra cambia misura, anche a metà corsa.
Con il movimento ridotto
Niente si muove e lo scroll non è ammorbidito: le cinque stampe sono già nella fila, col titolo, la riga e la nota sopra, e la pagina compare in dissolvenza.
Trappole
- Una stampa dopo l’altra con un pezzo di scroll ciascuna lasciava il centro vuoto fra l’arrivo di una e l’apertura della successiva: ora la successiva comincia ad aprirsi mentre l’altra parte (0,62 di passo).
- La cornice stava sull’elemento ritagliato dal clip-path e spariva finché la stampa non era aperta tutta: è passata sull’elemento esterno, che non è ritagliato.
- La stampa che va nell’indice passava dietro quella che si apre: mentre viaggia sta davanti.
- Sul telefono i nomi lunghi (Salt flat, Night pool) si toccavano sotto posti larghi 55 pixel: nomi corti.
Librerie
GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,3 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 22 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.
