Il caricamento che diventa marchio
Transizioni, SVG, Testo
NuovaGratis
Torna alla libreria
La transizione dal diaframma
Un cambio di pagina nello stile minimal: il diaframma di un obiettivo, poche lamelle scure dal contorno sottile, si chiude ruotando sulla pagina vecchia e scatta su un forellino color vermiglio, mentre la scala dei diaframmi arriva a f/22. Poi si riapre girando all'indietro sulla pagina nuova e il titolo si allarga dal centro del foro, lettera dopo 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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The aperture transition</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the first page: everything is centred on the point where the lens closes -->
<section class="page page--a is-on" data-page="a" aria-label="Still light">
<header class="bar">
<span class="brand">Oriel</span>
<nav class="nav" aria-label="Pages">
<a href="#still-light" aria-current="page">Still light</a>
<a href="#portraits" data-go="b">Portraits</a>
</nav>
</header>
<div class="hero">
<h1 class="title" data-title>Still light</h1>
<div class="below">
<p class="lede" data-rise>Photographs made by one north window, slowly, with the shutter open a little longer than it should be.</p>
<a class="go" href="#portraits" data-go="b" data-autoclic data-rise>
<span class="go__text">See the portraits</span>
<svg class="go__iris" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="8.5"/><path class="go__hex" d="M10 4.6 14.68 7.3v5.4L10 15.4 5.32 12.7V7.3Z"/></svg>
</a>
</div>
</div>
<footer class="foot">
<span>A photography studio</span>
<span>Film and paper</span>
</footer>
</section>
<!-- the second page: its title widens out of the hole the lens leaves -->
<section class="page page--b" data-page="b" aria-label="Portraits" aria-hidden="true">
<header class="bar">
<span class="brand">Oriel</span>
<nav class="nav" aria-label="Pages">
<a href="#still-light" data-go="a">Still light</a>
<a href="#portraits" aria-current="page">Portraits</a>
</nav>
</header>
<div class="hero">
<h2 class="title" data-title>Portraits</h2>
<div class="below">
<p class="lede" data-rise>Forty faces, the same chair and the same hour of the afternoon, one exposure each.</p>
<a class="go" href="#still-light" data-go="a" data-autoclic data-rise>
<span class="go__text">Back to still light</span>
<svg class="go__iris" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="8.5"/><path class="go__hex" d="M10 4.6 14.68 7.3v5.4L10 15.4 5.32 12.7V7.3Z"/></svg>
</a>
</div>
</div>
<footer class="foot">
<span>A photography studio</span>
<span>Sittings by letter</span>
</footer>
</section>
<!-- the accent seen through the smallest hole, the blades of the lens and the f-number (all moved by the script) -->
<div class="spot" data-spot aria-hidden="true"></div>
<svg class="iris" data-iris aria-hidden="true">
<path class="iris__blades" data-blades fill-rule="evenodd"/>
<path class="iris__edges" data-edges/>
</svg>
<span class="stop" data-stop aria-hidden="true">f/22</span>
</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
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 transizione dal diaframma» da Animorio e adattala al mio sitoCosa fa
Il sito di uno studio fotografico inventato, Oriel, in due pagine e quasi niente: fondo color carta, un titolo enorme al centro, una riga di testo, un link. All'apertura lo schermo è l'interno di un obiettivo chiuso: nero, sei righe sottili che girano a girandola intorno al centro e in mezzo un forellino esagonale color vermiglio, con f/22 scritto sotto. Il diaframma si apre ruotando, il foro cresce e mostra la carta, e il titolo Still light si allarga proprio dal centro del foro: le lettere di mezzo per prime, strettissime e sottili, che si allargano spingendo via le vicine, superano di un soffio la loro larghezza e si assestano prendendo peso. Poi salgono il testo e il link. Al clic su See the portraits la piccola lente accanto al link scatta, e sul sito si chiude il diaframma vero: le lamelle entrano dagli angoli girando, sempre più in fretta, il titolo vecchio si stringe verso il centro, il numero sotto il foro conta i diaframmi da f/1.4 a f/22 e le lamelle scattano un pixel oltre il forellino e tornano indietro con un piccolo rimbalzo. Per un respiro resta solo il punto di colore. Poi il diaframma si riapre girando all'indietro sulla pagina Portraits, color pietra, e il titolo nuovo si allarga dal foro allo stesso modo. Il link Back to still light rifà tutto al contrario. Col puntatore sopra un link le parole si allargano con un elastico e la piccola lente si chiude ruotando.
Come funziona
Un foro, non sei lamelle
Il diaframma è un solo SVG grande quanto il palco con due tracciati. Il primo è un rettangolo più grande dello schermo con dentro un poligono regolare, riempito con fill-rule evenodd: il poligono diventa un buco. Il secondo sono i bordi delle lamelle: ogni lato del foro continua oltre il suo angolo fino a fuori dallo schermo, e così le righe girano a girandola come in un obiettivo vero. Il poligono ha un lato per lamella, a distanza a dal centro, e ruota di rot gradi.
Chiudere in scala
La misura del foro non si anima in pixel ma su una scala: a = PINHOLE per (R / PINHOLE) alla k, con R la mezza diagonale dello schermo. Con k da 1 a 0 il foro si dimezza sempre nello stesso tempo, come uno zoom costante, e l'ultimo tratto, dove il foro è piccolo, non passa in un lampo. La chiusura usa power2.in, quindi accelera fino allo scatto; la stessa timeline ruota rot da 0 a TURN e a ogni aggiornamento ridisegna i due tracciati.
Lo scatto e il forellino
Arrivate al forellino le lamelle vanno SNAP pixel oltre in 0,07 secondi e tornano con elastic.out(1, 0.4), girando di un grado e mezzo in più e poi indietro; il numero sotto il foro sente il colpo e rimbalza di 3 pixel. Dietro le lamelle c'è un cerchio vermiglio grande quanto il forellino fino agli angoli: cresce nell'ultimo terzo della chiusura, così nel foro la pagina lascia il posto al colore. Il numero conta i diaframmi da f/1.4 a f/22 seguendo k e compare solo quando il foro è piccolo.
Il titolo che si allarga dal foro
Il titolo è diviso in lettere inline-block centrate, con font-stretch e font-weight legati alle variabili --w e --g (Roboto Flex va da 25 a 151 di larghezza). Le lettere partono a --w 25 e --g 200 e si allargano con back.out(1.7), sfalsate dal centro: quelle di mezzo crescono per prime e spingono via le altre, e l'overshoot porta ogni lettera un soffio oltre la sua larghezza prima di posarsi. La misura del titolo si prende con le lettere a 110 di larghezza, così anche la punta del rimbalzo resta dentro lo schermo. Il centro delle maiuscole sta proprio sul centro del palco, dove si chiude il foro.
Regia, telefono e movimento ridotto
Ogni cambio è una timeline sola con le etichette close, shut, open e title, e timeScale per SPEED; le pagine si scambiano dietro le lamelle chiuse. Un clic che arriva mentre la pagina cambia aspetta in coda. Il diaframma è chiuso già dal primo fotogramma, prima che arrivino i caratteri. Con il movimento ridotto il diaframma non compare: la pagina vecchia svanisce, la nuova compare col titolo già al suo posto e poi il testo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BLADES | script.js | 6 | Quante lamelle ha il diaframma: 5 fa un foro a pentagono, 9 è quasi tondo. |
TURN | script.js | 60 | Di quanti gradi girano le lamelle mentre si chiudono (e all'indietro mentre si aprono): 0 = il foro si stringe senza girare. |
CLOSE | script.js | 0.9 | I secondi che il diaframma impiega a chiudersi sulla pagina vecchia. |
HOLD | script.js | 0.55 | I secondi in cui resta chiuso sul forellino di colore. |
OPEN | script.js | 1.25 | I secondi che il diaframma impiega a riaprirsi sulla pagina nuova. |
PINHOLE | script.js | 6 | Quanto è grande il forellino, in pixel dal centro a un lato. |
SNAP | script.js | 2 | Di quanti pixel le lamelle vanno oltre il forellino quando scattano: 0 = si fermano e basta. |
SPEED | script.js | 1 | La velocità di tutto: 2 è il doppio, 0.5 la metà. |
Quando usarla
Per passare da una pagina all'altra in un sito che parla di immagini: un fotografo o uno studio fotografico, un laboratorio di stampa, un festival di cinema, una galleria, un portfolio di un direttore della fotografia. Va bene anche come apertura del sito, col diaframma che si apre sulla prima pagina.
Sul telefono
La stessa transizione con le misure adattate: il diaframma si chiude sul centro dello schermo verticale, i titoli si stringono fino a stare nella larghezza anche nel punto più largo del rimbalzo e il testo va a capo sotto il titolo. Un tocco sul link la fa partire e la riporta indietro.
Con il movimento ridotto
Niente si muove né gira: il diaframma non compare, la pagina vecchia svanisce mentre compare la nuova col titolo già al suo posto, poi il testo e il link in dissolvenza.
Trappole
- Sei lamelle disegnate una per una non si possono impilare: in un diaframma vero ogni lamella sta sopra la seguente e sotto la precedente, in cerchio, e con lo z-index l'ultima coprirebbe sempre la prima. La soluzione è un solo riempimento con il buco (fill-rule evenodd) e i bordi disegnati a parte, ognuno prolungato oltre il suo angolo.
- Con la misura del foro animata in pixel, il tratto in cui il foro è piccolo (il più bello) passerebbe in un fotogramma o due: la misura si anima su una scala, come uno zoom, con a = PINHOLE per (R / PINHOLE) alla k.
- Le lettere sono inline-block e cambiando font-stretch spingono le vicine, e nel rimbalzo il titolo è più largo che a riposo: si misura con le lettere a 110 di larghezza, sopra la punta del rimbalzo, così sul telefono le lettere esterne non escono dallo schermo nemmeno per un attimo.
- Il cerchio di colore sta sopra la pagina: se si ritira troppo tardi copre le lettere di mezzo del titolo che si sta allargando. Si ritira con back.in appena il foro lo supera, prima che le lettere compaiano davvero.
- Prima che arrivino i caratteri la pagina si vedrebbe aperta per un attimo e poi si chiuderebbe: il diaframma si misura e si disegna chiuso subito, con le sole misure del palco, e il titolo si sistema dopo.
- I link col puntatore sopra si collegavano solo quando partiva l'entrata, dopo i caratteri: un puntatore già sopra il link non faceva niente. Gli ascoltatori ora si collegano subito.
- Un clic che arriva a metà del cambio (il pilota delle anteprime clicca appena finisce l'entrata) partirebbe sopra una timeline ancora in corsa: va in coda e parte appena la timeline finisce.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,3 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.
