Il caricamento che diventa marchio
Transizioni, SVG, Testo
NuovaGratis
Torna alla libreria
La cucitura
Lo schermo diviso in due: a sinistra un foglio da disegno tecnico, a destra la carta. Gli stessi oggetti scorrono dall’uno all’altra e, attraversando la cucitura, da progetto diventano cose fatte. La cucitura si trascina.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN.
Il codice di questa animazione è nell’accesso a vita.
L’anteprima resta libera: guardala, rallentala, provala sul telefono.
Accesso a vitaCosa fa
A sinistra un foglio blu da disegno tecnico, con la sua griglia, e la frase «Prima è un disegno,»; a destra la carta, con «poi è una cosa.». Una fila di otto oggetti (una sedia, una lampada, una teiera, una moka, una pianta, una radio, una tazza, una fotocamera) scorre piano da sinistra a destra. Di qua sono linee di gesso con gli assi tratteggiati e le misure, di là sono colorati e ripassati d’inchiostro: attraversando la cucitura ogni oggetto cambia sotto gli occhi, metà disegno e metà cosa. All’inizio la cucitura fa mezzo passo e torna, per dire che si può spostare: trascinandola si decide quanto foglio e quanta carta vedere. Al telefono la cucitura è orizzontale e gli oggetti scendono dal disegno alla cosa.
Come funziona
Due strati uguali
La pagina ha due strati sovrapposti con la stessa fila, gli stessi oggetti negli stessi punti. Il primo è tagliato con clip-path: inset(0 calc(100% − var(--cucitura)) 0 0), il secondo con inset(0 0 0 var(--cucitura)): insieme fanno lo schermo intero, e spostare la cucitura vuol dire cambiare una sola variabile CSS.
Lo stesso disegno, due vestiti
Ogni oggetto è un SVG con forme a classi: a, b e c sono i pieni, t i tratti spessi, d quelli sottili, e i riflessi, g le linee di costruzione. Nel foglio tutto è solo tratto di gesso con vector-effect: non-scaling-stroke, così resta di 1,3 pixel a ogni misura, e le g sono tratteggiate; sulla carta i pieni prendono i colori dell’oggetto (variabili CSS sulla figura) con un filo d’inchiostro, e le g spariscono.
Una fila senza fine
La fila contiene tante copie della serie quante servono a coprire lo schermo più una. Un solo numero cresce di 38 pixel al secondo nel ticker di GSAP e sposta tutte e due le file nello stesso fotogramma; la posizione disegnata è quel numero avvolto dentro un giro, fra meno un giro e zero.
La cucitura
La maniglia è uno slider accessibile: si trascina con i pointer event ascoltati sulla finestra, e col fuoco le frecce la spostano del 4% con power3.out, Home e Fine la portano ai bordi. All’avvio va al 44% e torna al 50% con elastic.out(1, 0.45). Al telefono la pagina prende la classe banco--alto: la fila diventa una colonna che scende e i tagli passano in verticale.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
OGGETTI | script.js | 8 oggetti | Nome, colori della cosa e disegno di ogni oggetto, in 120 × 120: basta dare le classi giuste alle forme, il foglio e la carta si arrangiano da soli. |
PASSO | script.js | 38 | Pixel al secondo della fila. |
--blu, --carta | style.css | #1F4E9C, #F4EFE4 | Il foglio da disegno e la carta. |
--pezzo | style.css | clamp(108px, 25vh, 240px) | La misura di un oggetto: passo della fila e maniglia ne discendono. |
Quando usarla
Per chi progetta e poi fa: studi di design, architetti, artigiani, prodotti. Racconta il passaggio dall’idea alla cosa senza una parola in più.
Sul telefono
La cucitura diventa orizzontale, il foglio sta sopra e la carta sotto, e gli oggetti, più piccoli, scendono in una colonna spostata a destra; i titoli vanno a sinistra e la maniglia sta sul bordo sinistro, da trascinare in verticale.
Con il movimento ridotto
La fila sta ferma e la cucitura non fa il suo mezzo passo d’invito: si sposta solo trascinandola o con le frecce, subito, senza curva.
Trappole
- Le due file vanno mosse dallo stesso numero nello stesso fotogramma: con due tween separati prima o poi si perdono di un pixel, e alla cucitura si vede.
- I selettori CSS non entrano negli use: per vestire lo stesso disegno in due modi con le classi, il disegno va scritto due volte (qui lo scrive lo script).
- Senza vector-effect: non-scaling-stroke le linee del foglio ingrossano sugli schermi grandi e si assottigliano al telefono.
- La variabile della cucitura deve avere l’unità (50%, non 50), o calc(100% − var(--cucitura)) non vale niente e il taglio sparisce.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Peso: 19 KB dei nostri file.
Collaudo
Provata il 27 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.
