Le colonne in controsenso
Scroll, Immagini, Hover
NuovaGratis
Torna alla libreria
La carta che si scioglie
Scorri dentro l’anteprima
Un foglio color pietra copre il fotogramma di un film e, scorrendo, si scioglie a chiazze e isole: il bordo è la linea di livello di un rumore che cambia nel tempo, ricalcolata a ogni fotogramma come clip-path, e il puntatore lo morde.
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="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La carta che si scioglie</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<!-- la scena: più alta dello schermo, il palco resta fermo mentre il foglio si scioglie -->
<section class="scena" data-scena>
<div class="palco" data-palco>
<!-- sotto: il fotogramma del film, disegnato dallo script, e una frase -->
<div class="fotogramma">
<canvas class="fotogramma__tela" data-tela aria-hidden="true"></canvas>
<p class="frase" aria-hidden="true"><span>Non è il mare</span><span>che ci separa</span></p>
</div>
<!-- sopra: il foglio, tagliato da un clip-path che lo script ricalcola a ogni fotogramma -->
<div class="foglio" data-foglio>
<p class="nota" data-nota>Scorri: il foglio grigio si scioglie a chiazze sull’immagine che c’è sotto. Col mouse puoi morderne il bordo.</p>
<h1 class="foglio__titolo">Il faro</h1>
<dl class="crediti">
<div><dt>Regia</dt><dd>Nora Valli</dd></div>
<div><dt>Anno</dt><dd>2019</dd></div>
<div><dt>Con</dt><dd>Livio Sarti, Ada Moretti</dd></div>
</dl>
<p class="foglio__azioni">
<a class="foglio__tasto" href="#">Guarda il film</a>
<a class="foglio__tasto" href="#">Il programma</a>
</p>
</div>
</div>
</section>
<section class="dopo">
<p class="dopo__testo">Un guardiano del faro e una ragazza che arriva col traghetto dell’ultima corsa. Tre settimane di mareggiate, e una lettera che nessuno dei due vuole spedire.</p>
</section>
</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="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.
26 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 carta che si scioglie» da Animorio e adattala al mio sitoCosa fa
La pagina di un film: un foglio color pietra col titolo enorme, i crediti su righe sottili e due bottoni, e sotto il fotogramma, un faro al tramonto disegnato dallo script con una frase in grande. Il bordo del foglio non è mai dritto: si muove piano da solo, come carta bagnata. Scorrendo il palco resta fermo e il foglio sale sciogliendosi in chiazze e isole, finché resta solo il fotogramma; col puntatore sopra, dove passi la carta si scioglie prima, come se la mordessi.
Come funziona
Un campo invece di una riga
Su una griglia di celle da 14 pixel lo script calcola un numero per ogni nodo: (bordo − y) / 105 + rumore × 1,7. Il rumore è a valori in tre dimensioni, x, y e il tempo, con tre ottave (0,6, 0,28 e 0,12 a frequenze 1, 2,1 e 4,3) su chiazze di 190 pixel. Dove il numero è sopra zero c’è carta; lontano dalla fascia il rumore non serve e non si calcola.
I quadrati in marcia
In ogni cella i segni dei quattro angoli danno uno dei sedici casi: dove il segno cambia, il contorno passa sul lato nel punto in cui l’interpolazione lineare dice zero, e nei due casi a sella decide la media del centro. L’anello di nodi fuori dal palco vale sempre meno uno, così ogni contorno si chiude: seguendo i due vicini di ogni punto si scrivono i percorsi.
Un clip-path a ogni fotogramma
I percorsi diventano clip-path: path(evenodd, …) sul foglio, che quindi taglia anche i suoi testi. La regola evenodd fa i buchi dentro la carta e le isole di carta dentro i buchi senza dover orientare i contorni.
Scorrere e mordere
Uno ScrollTrigger dà l’avanzamento della scena, alta 2,6 schermi: il bordo va dall’80% dell’altezza fino a −40%, inseguito a 7 al secondo. Il puntatore scava nel campo una campana larga 80 pixel e profonda 2,4 fasce; la sua forza sale a 5 al secondo e cala a 2,2, la posizione lo segue a 9. Il tempo del rumore avanza di 0,12 al secondo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PASSO | script.js | 14 | Il lato di una cella della griglia, in pixel: più piccolo, bordo più fine e più conti. |
SCALA, BANDA, ONDA | script.js | 190, 105, 1.7 | Quanto sono grandi le chiazze, quanto è larga la fascia che si sfalda e quanto il rumore sposta il bordo. |
VITA | script.js | 0.12 | Quanto in fretta il bordo cambia da solo. |
MORSO, RAGGIO | script.js | 2.4, 80 | Quanto è profondo e largo il morso del puntatore. |
DA, A | script.js | 0.8, −0.4 | Dove sta il bordo all’inizio e alla fine dello scorrimento, in parte dell’altezza. |
Quando usarla
Per passare da una copertina a una fotografia senza un taglio netto: la pagina di un film, di un disco, di un vino, un racconto con un’immagine grande. Il foglio può portare il titolo e i dati.
Sul telefono
Il foglio si scioglie allo stesso modo con lo scorrimento; un dito appoggiato sul palco morde come il puntatore, e quando si alza il morso si richiude piano.
Con il movimento ridotto
Niente scioglimento: il foglio coi titoli sta sopra e il fotogramma sotto, fermi, e la sezione è alta quanto serve.
Trappole
- Tanti poligoni accostati, uno per cella, lasciano fili sottili fra una cella e l’altra per colpa dell’antialiasing: i segmenti vanno cuciti in contorni chiusi.
- Senza un anello di nodi sempre vuoti intorno alla griglia, un contorno che tocca il bordo resta aperto e il path si chiude nel posto sbagliato.
- Calcolare il rumore su tutta la griglia a ogni fotogramma costa troppo: lontano dalla fascia il segno lo decide solo il livello.
- Con clip-path: path() vuoto l’elemento si vede tutto: quando la carta è finita il percorso diventa M0 0Z.
Librerie
GSAP 3.15.0, Instrument Serif 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,9 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 28 settembre 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.
