Il caricamento che diventa marchio
Transizioni, SVG, Testo
NuovaGratis
Torna alla libreria
La tapparella del negozio
Una transizione a clic davanti alla vetrina di un negozio: la saracinesca dipinta si arrotola sul rullo stecca dopo stecca, con uno scatto a metà e un rimbalzo in cima, e dentro si accendono le luci. Al clic dopo si riabbassa e la strada scorre fino alla vetrina accanto.
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 roller shutter</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/caveat@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/standard.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 class="street" data-street>
<!-- the shops are built by the script, one at a time; the next one rolls in from the right -->
<div class="shops" data-shops></div>
<div class="pavement" data-pavement aria-hidden="true"><div class="pavement__tiles" data-tiles></div></div>
<!-- for the keyboard (and the catalogue's autopilot): rolls the shutter up, or down and on to the next shop -->
<div class="pull-spot">
<button class="pull" type="button" data-pull data-autoclic aria-pressed="false">
<span class="pull__bg" aria-hidden="true"></span>
<span class="pull__text" data-pull-text>Open up</span>
</button>
</div>
</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.
23 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 tapparella del negozio» da Animorio e adattala al mio sitoCosa fa
È sera e la vetrina di una panetteria inventata, Marlow Bakery, è chiusa: sopra c'è l'insegna, sotto una saracinesca di stecche di metallo con il nome del negozio dipinto a mano in grande, con l'ombra, le colature di vernice, una scritta a pennello e la vernice consumata qua e là. In cima si vede il rullo, con i giri di saracinesca già avvolti e i mozzi ai lati. All'arrivo l'insegna scende e oscilla, la saracinesca si assesta con un rimbalzo e il pulsante salta fuori. Al clic la chiave della serratura gira, la saracinesca dà uno strattone e comincia a salire sempre più veloce: le stecche, arrivate al rullo, ci girano sopra una dopo l'altra, si accorciano e si scuriscono, e la scritta si spezza fra le stecche. A metà la saracinesca si incastra, ricade un poco e riparte con uno scatto: le stecche sbattono, il cassonetto trema, le lampade dentro dondolano e la prima si accende tremolando. Poi corre su fino in cima, sbatte contro il fermo e rimbalza. Le altre lampade si accendono una dopo l'altra, il buio dentro sparisce, la luce calda esce sul marciapiede, nella vetrina scende il cartello «Open» che dondola e il pane sugli scaffali fa un saltello. Al clic dopo le luci si spengono, il cartello risale, la saracinesca dà uno strattone e scende, sbatte sul marciapiede con un rimbalzo e uno sbuffo di polvere e la serratura si richiude; poi la strada scorre a sinistra e arriva la vetrina accanto, un negozio di dischi (e dopo un fiorista), chiusa, con la sua saracinesca dipinta.
Come funziona
Una sola misura
Tutto si conta in stecche. Dall'insegna al marciapiede ci stanno il cassonetto (0,8 stecche), la metà alta del rullo (ROLLER stecche) e la saracinesca intera (SLATS stecche): l'altezza di una stecca viene da lì. Il rullo ha il centro all'altezza c e la saracinesca pende dal suo bordo davanti; la vetrina comincia un raggio più in basso, così da aperta la parte che resta appesa copre ancora il rullo.
La pittura sulle stecche
La scritta si dipinge una volta sola su una canvas grande quanto la saracinesca: il disegno, il nome con l'ombra spostata, le colature (dove la riga di pixel sotto le lettere ha vernice, getImageData), la scritta a pennello inclinata e la vernice consumata, tolta con destination-out. Diventa un'immagine e ogni stecca la usa come sfondo, spostata di una stecca alla volta: la sfumatura delle scanalature sta sopra, quindi le righe passano anche nelle lettere.
Le stecche sul rullo
Un numero solo, p, dice quanto è salita la saracinesca. Per ogni stecca si sa dove sono i suoi bordi lungo la saracinesca: sotto il rullo una stecca è piatta; sopra, il bordo è sul cilindro e in vista frontale si trova a R per il seno dell'angolo. La stecca si mette con translateY e scaleY fra i due bordi, e uno strato nero la scurisce col seno dell'angolo medio: girandosi verso l'alto si accorcia e si fa scura, una dopo l'altra. Oltre il quarto di giro sparisce; i mozzi girano di p diviso R.
Lo scatto e il rimbalzo
L'apertura è una timeline che anima p: lo strattone, la salita con power2.in fino a metà, poi lo scatto (p torna giù di un terzo di stecca e riparte con elastic.out), la corsa fino in cima e il rimbalzo contro il fermo con bounce.out. A ogni colpo le facce delle stecche (un elemento dentro quello che si sposta) tremano con uno stagger dal fondo, il cassonetto sobbalza e le lampade dondolano intorno al filo con svgOrigin.
Le luci e la vetrina accanto
Il negozio è un SVG con un velo scuro sopra la merce e le lampade sopra il velo. Ogni lampada si accende con quattro scatti d'opacità senza curva, e il velo e la luce sul marciapiede salgono di un pezzo per lampada. Alla chiusura tutto torna indietro, la saracinesca cade con power2.in e rimbalza sul marciapiede con la polvere; la vetrina accanto è già pronta fuori schermo e arriva con le mattonelle del marciapiede, nella stessa timeline.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SLATS | script.js | 11 | Quante stecche fanno la saracinesca: più stecche, più sottili. |
LIFT | script.js | 2.4 | I secondi che la saracinesca impiega a salire fino in cima (a scendere un po' meno). |
CATCH | script.js | 1 | Quanto è forte lo scatto a metà: 0 = sale liscia. |
BOUNCE | script.js | 1 | Quanto rimbalza in cima e sul marciapiede: 0 = si ferma e basta. |
ROLLER | script.js | 1.5 | Il raggio del rullo, in stecche: più grande, le stecche ci girano sopra più piano. |
LAMP_GAP | script.js | 0.32 | I secondi fra una lampada che si accende e la successiva. |
SPEED | script.js | 1 | La velocità di tutto: 2 è il doppio, 0.5 la metà. |
Quando usarla
Per passare da una sezione chiusa a una aperta con un gesto che tutti conoscono: la pagina di un negozio o di un locale che apre, l'orario di apertura, il lancio di un prodotto, una collezione nuova, il passaggio fra le vetrine di un mercato o di una via dello shopping online.
Sul telefono
La stessa animazione con le misure adattate: la vetrina è stretta e alta, il nome dipinto va su due righe se serve (Fern & Fig), i mozzi e la merce si rimpiccioliscono. Un tocco sul pulsante o sulla saracinesca la apre e la chiude.
Con il movimento ridotto
Niente si muove: la saracinesca svanisce in dissolvenza mentre le luci si accendono e il cartello compare; alla chiusura le luci si spengono, la saracinesca ricompare e la vetrina accanto arriva in dissolvenza.
Trappole
- Le stecche hanno uno z-index (quella sotto copre quella sopra), e senza un contesto di sovrapposizione sulla saracinesca passavano davanti ai mozzi e al cassonetto: la saracinesca ha z-index 0.
- Con il rullo nascosto nel cassonetto la rotazione delle stecche non si vedeva: il cassonetto copre solo sopra il cilindro, e il quarto di giro davanti resta in vista.
- Il tremolio delle stecche e la loro posizione sono due elementi diversi: lo script scrive il transform della stecca a ogni fotogramma, e GSAP sulla stessa stecca lo cancellerebbe; GSAP muove la faccia dentro.
- La faccia dorata della serratura è uno span: senza display block la larghezza al 100% non contava e della serratura restava solo il buco della chiave.
- Aggiungere la vetrina accanto dentro una timeline già in corsa, con un call alla fine, poteva far scattare onComplete prima: la vetrina nuova si costruisce subito, fuori schermo, e la timeline nasce intera.
- Sul telefono i mozzi, grandi quanto il rullo, si sovrapponevano alla saracinesca: la loro misura ha un limite legato ai pilastri.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0, Caveat (font variabile) 5.3.0, Fraunces (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 10 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.
