Il titolo che si alza dalla linea
Transizioni, Testo, Immagini
NuovaGratis
Torna alla libreria
Il fotogramma che esce dalla pellicola
Nello stile minimal: una striscia di pellicola disegnata a linee sottili, con le perforazioni, scorre di lato e si ferma su una molla con un fotogramma fra le due tacche rosse. Il fotogramma si sgancia ed esce dalla striscia fino a diventare una stampa grande, con il titolo e il numero del fotogramma che si allarga e prende peso; poi rientra nel suo posto con un piccolo colpo e la striscia riparte.
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>Halide</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a hairline film strip runs through the room; the frame that stops at the gate comes out of the strip as a print -->
<main class="stage" data-stage tabindex="0" role="region" aria-roledescription="film strip" aria-label="Halide, a roll of film. Click, tap or press Enter to move on.">
<header class="top">
<p class="mark" data-mark aria-hidden="true">Halide</p>
<p class="hint" data-hint aria-hidden="true">Click to move on</p>
</header>
<canvas class="film" data-film aria-hidden="true"></canvas>
<div class="caption" data-caption aria-hidden="true">
<p class="caption__title"><span class="slot" data-title></span></p>
<p class="caption__frame"><span class="caption__label" data-label>Frame</span><span class="slot slot--num" data-num></span></p>
</div>
<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.
27 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 «Il fotogramma che esce dalla pellicola» da Animorio e adattala al mio sitoCosa fa
Una stanza color carta, con in alto a sinistra il nome di un laboratorio fotografico inventato, Halide, e a destra una riga piccola. Le due linee della pellicola si disegnano attraverso tutta la pagina, quella sopra da sinistra e quella sotto da destra, e dietro di loro compaiono le perforazioni; poi i fotogrammi si aprono uno dopo l’altro da una linea orizzontale, con un piccolo rimbalzo. Sono cinque fotografie in bianco e nero disegnate dallo script, con la grana e gli angoli un po’ più scuri delle stampe ai sali d’argento: il sole sulla linea del mare, una scala a mezzogiorno, una porta aperta in una stanza buia, una duna, la luna sull’acqua. Al centro, sopra e sotto la striscia, due tacche rosse segnano il punto dove la pellicola si ferma. La striscia fa un passo indietro di pochi pixel, poi corre verso sinistra e frena su una molla: va un paio di pixel oltre e torna, e quando il fotogramma arriva fra le tacche le tacche scattano e la striscia sobbalza di un pixel e mezzo. Il fotogramma si sgancia salendo di cinque pixel ed esce dalla striscia, crescendo fino a diventare una stampa grande in mezzo alla stanza, mentre la striscia scivola in basso e i suoi fotogrammi si fanno chiari; al posto del fotogramma resta il suo vuoto, una cornice sottile. Sotto la stampa sale il titolo lettera per lettera, con l’asse della larghezza che si apre su un elastico, e a destra arriva il numero del fotogramma in rosso, prima stretto e sottile, poi largo e pieno. Dopo un paio di secondi le lettere scappano in alto, la stampa torna giù rimpicciolendo, si ferma qualche pixel sopra il suo posto e ci cade dentro con un colpo, e la striscia riparte per il fotogramma successivo, due più in là. Col mouse il fotogramma della striscia sotto il puntatore si alza di qualche pixel, e sopra la stampa grande la stampa resta fuori finché il puntatore non esce. Un clic, un tocco o Invio fanno rientrare subito la stampa e passano avanti.
Come funziona
Una canvas sola
La pellicola, le perforazioni, i fotogrammi, le tacche e la stampa grande sono disegnati a ogni fotogramma dal ticker di GSAP su una canvas grande quanto la stanza, alla densità di pixel dello schermo. Le linee di un pixel stanno sui pixel interi dello schermo (la funzione hp), così restano nitide anche mentre la striscia si muove. Solo i testi sono nel DOM, perché il carattere variabile lavori con i suoi assi.
Una striscia senza fine
Lo stato è un numero solo, pos: il fotogramma che sta sulla porta, anche a metà. Ogni fotogramma k sta a (k meno pos) volte il passo dal centro e mostra la foto k modulo il numero delle foto; le perforazioni, sei per fotogramma, seguono lo stesso numero. Si disegnano solo quelli che si vedono, e dopo un giro intero pos torna indietro di tante foto quante sono: sullo schermo non cambia niente.
La corsa su una molla vera
La facilità della corsa è la posizione di una molla smorzata 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 si sceglie w perché la striscia vada oltre proprio di OVERSHOOT pixel, qualunque sia la distanza. Il momento in cui arriva la prima volta alla porta è (pi greco meno arcotangente di w/d) diviso w: lì la timeline mette il colpo, le tacche che scattano e la striscia che sobbalza su un elastic.out.
La stampa che esce
La stampa è un numero p da 0 a 1: il suo rettangolo è a metà strada fra il posto nella striscia (ricalcolato a ogni fotogramma, perché intanto la striscia scende) e il posto grande. Così parte e torna sempre esattamente dal suo vuoto. Mentre è piccola si disegna dalla copia già ridotta, da grande dalla foto intera. Prima di partire sale di cinque pixel (si sgancia); al ritorno arriva cinque pixel sopra e poi ci cade dentro.
Il titolo e il numero
Ogni testo sta in una fessura con overflow nascosto e ogni lettera è uno span. Le lettere del titolo salgono da sotto mentre la variabile --w porta l’asse wdth di Anybody da 66 a 100 con un elastico; quelle del numero partono strette e sottili (wdth 52, wght 220) e si allargano e prendono peso fino a 100 e 640. Uscendo scappano in alto, e la fessura si svuota.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FRAMES | script.js | [{ title: 'Tide line', code: '14A' }, …] | I fotogrammi della striscia, in ordine: il titolo sotto la stampa e il numero del fotogramma. I disegni sono cinque e si ripetono se le voci sono di più. |
IMAGE | script.js | '' | La tua foto nel primo fotogramma: un indirizzo, o un file caricato nel Playground. Viene ritagliata a 3:2 come una copertina. Vuoto, il primo fotogramma lo disegna lo script. |
RUN | script.js | 1.5 | Quanti secondi impiega la striscia a correre da una fermata alla successiva. |
SKIP | script.js | 2 | Di quanti fotogrammi avanza la striscia a ogni fermata. |
OVERSHOOT | script.js | 2 | Di quanti pixel la striscia va oltre la porta prima che la molla la riporti indietro (0 = si ferma liscia). |
HOLD | script.js | 2.3 | Quanti secondi la stampa resta fuori dalla striscia. |
SIZE | script.js | 0.86 | Quanto spazio libero della stanza occupa la stampa grande. |
AUTOPLAY | script.js | true | Se la striscia va avanti da sola. Con false si muove solo col clic, col tocco o con Invio. |
Quando usarla
Per mostrare un lavoro fatto di immagini come un rullino: il portfolio di un fotografo o di un regista, la pagina di un laboratorio di sviluppo e stampa, un festival di cinema o di fotografia, il racconto di un viaggio, la galleria di un progetto. Funziona bene anche in testa a una pagina, come un’introduzione che si guarda da sola.
Sul telefono
La stessa animazione con le misure adattate: la striscia è più bassa, la stampa grande occupa quasi tutta la larghezza e il titolo e il numero sono più piccoli. Un tocco fa rientrare la stampa e passa avanti.
Con il movimento ridotto
Niente corre né si sposta: la striscia è ferma, e a ogni fermata la stanza svanisce e ricompare con la stampa grande e la sua didascalia già al loro posto, poi svanisce di nuovo e torna la striscia col fotogramma nuovo alla porta.
Trappole
- La stampa che partiva dal posto calcolato all’inizio si staccava dal suo vuoto, perché intanto la striscia scende: il suo rettangolo si ricalcola a ogni fotogramma fra il posto nella striscia di quel momento e quello grande.
- Le lettere del titolo, nascoste appena sotto la fessura, spuntavano per un pixel sotto la striscia ancora prima che la stampa uscisse (la fessura ha un margine in basso per le discendenti): partono più in basso, al 140%.
- Uscendo verso l’alto, il puntino della i restava a sbirciare sopra il bordo della fessura: finita l’uscita la fessura si svuota.
- Una molla con lo stesso superamento in percentuale andava oltre di un pixel nelle corse corte e di dieci in quelle lunghe: il superamento si chiede in pixel e diventa una percentuale dividendo per la distanza di ogni corsa.
- Disegnare tanti fotogrammi piccoli dalla foto grande a ogni fotogramma la sgrana: per la striscia c’è una copia ridotta per ogni foto, rifatta quando la finestra cambia misura.
Librerie
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 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.
