Il titolo che si alza dalla linea
Transizioni, Testo, Immagini
NuovaGratis
Torna alla libreria
La foto a stecche che girano
Nello stile minimal: una foto divisa in stecche orizzontali, come una persiana. Le stecche girano su se stesse una dopo l’altra dall’alto, ognuna su una molla che va qualche grado oltre e si posa, e dietro c’è già la foto successiva; la didascalia cambia lettera per lettera, stringendosi e allargandosi sull’asse della larghezza.
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>The photo on turning slats</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>
<main class="stage" data-stage>
<p class="mark">Lattis</p>
<!-- the plate: the script places it and cuts the photo into slats; behind them waits the next photo -->
<figure class="plate" data-plate role="img">
<div class="settle" data-settle>
<div class="behind" data-behind aria-hidden="true"></div>
<div class="slats" data-slats aria-hidden="true"></div>
</div>
<div class="ruler" data-ruler aria-hidden="true"></div>
<i class="marker" data-marker aria-hidden="true"></i>
<figcaption class="cap" aria-hidden="true">
<span class="cap__title" data-title></span>
<span class="cap__meta" data-meta></span>
</figcaption>
</figure>
</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.
19 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 «La foto a stecche che girano» da Animorio e adattala al mio sitoCosa fa
Una pagina color carta, con in alto a sinistra il nome di uno studio di fotografia inventato, Lattis. Al centro c’è una foto verticale e sotto, a sinistra, una parola sola che le fa da didascalia; a destra una riga piccola coi dati dello scatto. Accanto al bordo sinistro della foto corre un righello sottile: una tacca grigia su ogni giunta fra due stecche. All’inizio le tacche si disegnano dall’alto, e le stecche arrivano di taglio, invisibili, e girano una dopo l’altra fino a mostrare la prima foto, una duna all’alba. Dopo qualche secondo le stecche girano ancora, dall’alto verso il basso: ognuna ruota in 3D sul suo asse lungo, si scurisce mentre volta le spalle alla luce, va qualche grado oltre il suo posto e si assesta, e sul retro porta già la foto successiva. Dalle fessure fra le stecche che girano si vede la foto nuova che aspetta dietro. Una piccola tacca rossa scende lungo il righello insieme all’onda, e ogni tacca grigia che incontra si allunga un attimo e torna con un elastico; quando l’ultima stecca si posa tutta la foto si siede di un pixel. Intanto la didascalia cambia lettera per lettera: le lettere della parola vecchia escono verso l’alto stringendosi, quelle della nuova salgono da sotto larghe e leggere, poi prendono peso e si assestano sulla loro larghezza con un piccolo elastico. Le foto sono tre, disegnate dallo script su una canvas: la duna, la bassa marea con un sasso sulla sabbia bagnata, un arco in un muro rosa. Poi si ricomincia dalla prima. Col mouse sopra la foto ferma le stecche vicine al puntatore si inclinano e fra loro si sbircia la foto che verrà; un clic sulla foto fa girare subito le stecche.
Come funziona
Una foto, tante stecche
La foto è divisa in SLATS stecche orizzontali, ognuna un div con due facce: davanti la sua striscia della foto di adesso, dietro (girata di 180 gradi e con backface-visibility: hidden) la stessa striscia della foto successiva. Ogni faccia ha la foto intera come sfondo, grande quanto la cornice e spostata in su di quanto la stecca è lontana dall’alto: così le stecche ferme combaciano al pixel. Sotto le stecche c’è un livello con la foto successiva, che si vede dalle fessure mentre girano.
La molla di ogni stecca
Ogni stecca ha un angolo, a, e a ogni fotogramma il ticker di GSAP scrive rotateX(a). Per girare va da 0 a -180 gradi con una curva fatta a mano: la risposta di una molla smorzata, che parte da ferma, va oltre di OVERSHOOT gradi e si posa. Lo smorzamento si ricava dall’oltre voluto, quindi la manopola dice proprio di quanti gradi la stecca sbaglia prima di assestarsi.
L’onda dall’alto
Le stecche partono una dopo l’altra, a STAGGER secondi di distanza, dalla prima in alto. Mentre girano si scuriscono: sopra ogni faccia c’è un velo scuro con un’opacità che cresce quanto più la faccia volta le spalle a chi guarda (1 meno il coseno dell’angolo). Una tacca rossa scende lungo il righello al passo dell’onda, e quando l’ultima stecca si posa tutta la foto scende di un pixel e torna con un elastico.
Il cambio senza salto
Finita l’onda, ogni stecca mostra il retro, cioè la foto nuova. In quel momento le facce davanti prendono la foto nuova, quelle dietro e il livello di sotto la foto dopo ancora, e tutti gli angoli tornano a zero: l’immagine resta identica e il giro dopo riparte da capo. Ogni stecca è un pixel più alta della sua parte e sta sotto la successiva, così fra due stecche ferme non si vede mai una riga della foto di dietro.
La didascalia lettera per lettera
La didascalia è in Archivo, un carattere variabile con gli assi wght e wdth, e ogni lettera è uno span con due variabili CSS lette da font-variation-settings. La parola vecchia esce verso l’alto lettera per lettera mentre la sua larghezza scende a 62; la nuova sale da sotto a larghezza 125 e peso 220, e si posa a 100 con elastic.out e a peso 560. Lo spazio della riga taglia le lettere sopra e sotto, così le due parole non si toccano mai.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
IMAGE_A | script.js | '' | La prima foto: un indirizzo, o un file caricato nel Playground. Vuoto, la duna disegnata dallo script. La foto riempie la cornice verticale come background-size: cover. |
IMAGE_B | script.js | '' | La seconda foto (vuoto: la bassa marea disegnata dallo script). |
IMAGE_C | script.js | '' | La terza foto (vuoto: l’arco disegnato dallo script). |
CAPTIONS | script.js | [{ title: 'Dune', meta: 'f/8, 1/500 s' }, ...] | Le didascalie delle tre foto, nell’ordine: la parola che cambia lettera per lettera e la riga piccola a destra. |
SLATS | script.js | 9 | In quante stecche è divisa la foto. |
STAGGER | script.js | 0.07 | I secondi fra una stecca e la successiva (0 = girano tutte insieme). |
OVERSHOOT | script.js | 6 | Di quanti gradi una stecca gira oltre il suo posto prima di assestarsi (0 = si ferma secca). |
HOLD | script.js | 2.6 | Quanti secondi ogni foto resta ferma prima che le stecche girino di nuovo. |
Quando usarla
Per far scorrere poche foto con calma e con un gesto riconoscibile: l’apertura del portfolio di un fotografo o di un architetto, le camere di un albergo o di una casa vacanze, i piatti di un ristorante, le copertine di un blog di viaggi. Funziona con qualunque foto, anche caricata nel Playground.
Sul telefono
La stessa animazione con le misure adattate: la foto è larga quasi quanto lo schermo, le stecche più basse, il righello più corto e la didascalia più piccola. Un tocco sulla foto ferma fa girare subito le stecche.
Con il movimento ridotto
Niente gira né scivola: le foto e le didascalie si danno il cambio con una dissolvenza lenta, la foto successiva compare da sotto mentre la prima svanisce.
Trappole
- Con le stecche alte esattamente la loro parte, fra due stecche ferme si vedeva una riga sottile della foto di dietro (il bordo di ogni stecca è sfumato quando il browser la disegna su un livello suo): ogni stecca è un pixel più alta e sta sotto la successiva.
- Una stecca di taglio, a 90 gradi, con la prospettiva non sparisce del tutto: sopra il centro della foto si vede dal basso e lascia un filo. Vicino ai 90 gradi la stecca è nascosta con visibility.
- Le facce girate usano backface-visibility: hidden, che in Safari vuole anche il prefisso -webkit-, come transform-style: preserve-3d sulla stecca: senza, il retro si vede attraverso il davanti.
- Il clic durante la pausa ferma la timeline prima del cambio: la didascalia nuova era già pronta sotto la riga e restava lì, invisibile, a confondere il giro dopo. Ora quella in attesa si butta prima di prepararne un’altra.
- Una foto caricata da un altro sito non si può ridisegnare su una canvas senza bloccarla: le foto vanno come sfondo CSS delle facce, e solo quelle fatte dallo script passano dalla canvas.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,8 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
