Il caricamento che diventa marchio
Transizioni, SVG, Testo
NuovaGratis
Torna alla libreria
Lo scarabocchio che svela
La pagina arriva sotto una copertina arancio: uno scarabocchio enorme dello stesso colore la cancella srotolandosi dall’inizio alla fine e dimagrendo, e fra un tratto e l’altro compare la pagina. Il titolo entra lettera per lettera, con un rimbalzo.
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" class="coperta">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lo scarabocchio che svela</title>
<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>
<!-- la copertina: un fondo pieno, uno scarabocchio enorme dello stesso colore e il marchio.
Lo script la cancella srotolando lo scarabocchio. -->
<div class="copertina" data-copertina aria-hidden="true">
<div class="copertina__fondo" data-fondo></div>
<svg class="copertina__segno" data-segno><path class="copertina__tratto" data-tratto d="M0 0"/></svg>
<div class="copertina__marchio" data-marchio>
<svg class="tappo" viewBox="-60 -60 120 120"><path class="tappo__bordo" data-tappo d="M0 0"/><circle class="tappo__anello" r="37"/></svg>
<span class="tappo__nome">sorso</span>
</div>
</div>
<header class="testata" data-testata>
<a class="testata__marchio" href="#">sorso</a>
<nav class="testata__voci" aria-label="Menù">
<a href="#">Le bibite</a>
<a href="#">Dove trovarci</a>
<a href="#">Scrivici</a>
</nav>
</header>
<main class="prima">
<!-- il poster sotto la copertina: cielo, sole e mare, tutto disegnato qui -->
<div class="scena" aria-hidden="true">
<div class="scena__sole"></div>
<svg class="scena__mare" viewBox="0 0 1440 320" preserveAspectRatio="none">
<path class="onda onda--prima" d="M0 70 C 120 30 240 30 360 70 S 600 110 720 70 S 960 30 1080 70 S 1320 110 1440 70 S 1680 30 1800 70 S 2040 110 2160 70 V 320 H 0 Z"/>
<path class="onda onda--seconda" d="M0 150 C 150 115 300 115 450 150 S 750 185 900 150 S 1200 115 1350 150 S 1650 185 1800 150 S 2100 115 2250 150 V 320 H 0 Z"/>
<path class="onda onda--terza" d="M0 235 C 100 205 200 205 300 235 S 500 265 600 235 S 800 205 900 235 S 1100 265 1200 235 S 1400 205 1500 235 S 1700 265 1800 235 S 2000 205 2100 235 V 320 H 0 Z"/>
</svg>
</div>
<div class="prima__testi">
<p class="nota" data-nota>La pagina arriva coperta: uno scarabocchio arancio la cancella dall’inizio alla fine. Il bottone in basso lo fa ripartire.</p>
<h1 class="titolo" data-titolo>Frizzante, ma con calma.</h1>
<p class="sotto" data-sotto><span class="riga"><span class="riga__dentro">Bibite agli agrumi amari,</span></span> <span class="riga"><span class="riga__dentro">fatte a mano e senza fretta.</span></span></p>
</div>
<button class="rivedi" type="button" data-rivedi>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 12a8 8 0 1 1-2.34-5.66" /><path d="M20 4v5h-5" /></svg>
<span>Rivedi l’ingresso</span>
</button>
</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.
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 «Lo scarabocchio che svela» da Animorio e adattala al mio sitoCosa fa
Un poster d’estate, con cielo, sole e mare disegnati, arriva coperto da un fondo arancio col marchio al centro, un tappo a corona. Sopra al fondo c’è uno scarabocchio dello stesso arancio: un tratto solo che va su e giù da sinistra a destra, così largo che da solo copre tutto. Il fondo sparisce in un attimo e lo scarabocchio comincia a srotolarsi dal suo inizio: la punta si mangia il tratto un’andata dopo l’altra, e intanto tutto il resto dimagrisce, così la pagina compare prima fra un tratto e l’altro e poi del tutto. A metà strada entrano la testata e il titolo, lettera per lettera con un piccolo rimbalzo, mentre l’ultimo tratto esce a destra. Il bottone in basso rifà l’ingresso: lo scarabocchio si ridisegna all’indietro, dalla fine all’inizio, e si srotola di nuovo.
Come funziona
Un tratto solo
Lo scarabocchio è un unico path SVG costruito sulla misura dello schermo: parte da fuori in alto a sinistra, va su e giù verso destra con un passo di 0,45 volte la sua larghezza e a metà di ogni andata sbanda un poco di lato. I punti, scelti a caso con un seme fisso, diventano curve morbide, una Catmull-Rom scritta come curve di Bézier. La larghezza iniziale è il 40% della diagonale media dello schermo: abbastanza perché il tratto da solo copra tutto.
Mangiato dall’inizio
Il tratto ha uno stroke-dasharray lungo quanto lui e uno stroke-dashoffset che va da 0 a −L: la parte visibile va da L × e fino a L, quindi il tratto si consuma dal suo inizio e la sua fine esce per ultima. L’avanzamento e segue power1.inOut, in 2,4 secondi, dopo 1,2 secondi di copertina ferma col marchio.
Il fondo se ne va subito
Nel primo 12% dello srotolarsi il fondo pieno sparisce: da lì in poi la pagina la scopre solo lo scarabocchio. Subito dopo il tratto dimagrisce, con power2.out, fino al 4,5% della diagonale, così fra un’andata e l’altra si aprono strisce di pagina prima che la punta arrivi a mangiarle.
Le entrate e il ritorno
Al 36% dello srotolarsi la timeline di GSAP fa entrare la testata e il titolo: ogni lettera parte da scala 0,35, trasparente e un po’ più in basso, e arriva con back.out, una ogni 30 millesimi. Per rivedere l’ingresso lo stesso avanzamento torna da 1 a 0 in 1,1 secondi: il tratto si ridisegna dalla fine all’inizio e intanto ingrassa.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LARGO, SOTTILE | script.js | 0.4, 0.045 | Quanto è largo il tratto all’inizio e alla fine, in parte della diagonale media dello schermo. |
FITTO | script.js | 0.45 | La distanza fra un’andata e l’altra, in parte della larghezza iniziale: sopra 0,5 ai bordi restano scoperti dei triangoli. |
DURATA, ATTESA | script.js | 2.4, 1.2 | Quanto dura lo srotolarsi e quanto resta ferma la copertina prima di partire, in secondi. |
RIDISEGNA | script.js | 1.1 | Quanto ci mette lo scarabocchio a ridisegnarsi quando si rivede l’ingresso. |
SEME | script.js | 11 | Cambia il seme e cambia la forma dello scarabocchio. |
Quando usarla
Per l’ingresso di un sito allegro che vuole un gesto fatto a mano: una bibita, una gelateria, un festival d’estate, uno studio creativo. Dice il colore del marchio prima ancora della pagina.
Sul telefono
Lo scarabocchio si costruisce sulla misura del telefono, quindi in verticale le andate sono meno e più ripide. Finché c’è la copertina anche il fondo della pagina è arancio, così Safari colora le sue barre dello stesso colore.
Con il movimento ridotto
Niente scarabocchio: la copertina sparisce in dissolvenza e la pagina è già tutta al suo posto; il bottone per rivedere l’ingresso non c’è.
Trappole
- Se fra un’andata e l’altra c’è più di mezza larghezza del tratto, quando il fondo sparisce ai bordi restano scoperti dei triangoli di pagina: il passo sta sotto la metà della larghezza iniziale.
- Con i capi tondi, un tratto lungo zero disegna comunque un cerchio: lo scarabocchio comincia e finisce fuori dallo schermo, più in là di mezza larghezza.
- Se il tratto dimagrisce solo verso la fine, non si vede mai come uno scarabocchio: deve dimagrire appena il fondo è andato, così la pagina compare fra le andate prima che la punta le mangi.
- Il titolo in lettere va nascosto appena lo script parte, sotto la copertina, e non quando comincia l’animazione: altrimenti per un fotogramma si vede già scritto.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,6 KB; le librerie: GSAP 28 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.
