Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
La mappa del tesoro
Scorri dentro l’anteprima
Una vecchia pergamena arrotolata col sigillo di ceralacca: scendendo il sigillo si spezza, i due rulli di legno si allontanano e si srotola la mappa di un’isola inventata. Una barchetta entra nella baia lasciando dietro un sentiero rosso tratteggiato che si disegna, una pedina salta a terra e lo segue fra palme, grotta e vulcano, mentre una penna d’oca scrive a mano una nota a ogni tappa e la rosa dei venti gira. In fondo la X si disegna e uno scrigno salta fuori dalla terra, apre il coperchio e sputa monete.
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>La mappa del tesoro</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.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/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<!-- the trip: a tall section with a still stage; scrolling unrolls the map and walks the trail -->
<section class="viaggio" data-viaggio>
<div class="palco" data-palco>
<header class="testa">
<h1 class="testa__titolo">
<span class="riga"><span data-riga>The map of</span></span>
<span class="riga"><span data-riga><em>Marrow Isle</em></span></span>
</h1>
<p class="testa__cenno" data-cenno>
<span>Scroll to unroll</span>
<svg viewBox="0 0 24 32" aria-hidden="true"><path d="M12 3V27M4 19L12 28L20 19" /></svg>
</p>
</header>
<div class="tavolo" data-tavolo>
<div class="mappa" data-mappa>
<div class="foglio" data-foglio>
<svg class="carta" data-carta aria-label="A hand-drawn treasure map of an invented island" role="img"></svg>
</div>
<div class="rullo rullo--alto" data-rullo="alto"><div class="rullo__legno"></div></div>
<div class="rullo rullo--basso" data-rullo="basso"><div class="rullo__legno"></div></div>
<svg class="sigillo" data-sigillo viewBox="-40 -40 80 80" aria-hidden="true">
<g data-sigillo-sx>
<path class="sigillo__cera" d="M0 -30C14 -31 27 -20 29 -6C31 9 22 25 6 29L0 29L3 14L-3 2L4 -10L-2 -20Z" transform="translate(0 0)" />
</g>
<g data-sigillo-dx>
<path class="sigillo__cera" d="M0 -30C-14 -31 -27 -20 -29 -6C-31 9 -22 25 -6 29L0 29L3 14L-3 2L4 -10L-2 -20Z" />
</g>
<path class="sigillo__segno" d="M-11 -9L11 9M11 -9L-11 9" />
</svg>
</div>
</div>
</div>
</section>
<footer class="fine">
<p class="fine__frase">The chest is yours.<br><em>Fold the map for next time.</em></p>
</footer>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.
32 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 mappa del tesoro» da Animorio e adattala al mio sitoCosa fa
Su un tavolo scuro c’è una pergamena arrotolata, chiusa da un sigillo rosso di ceralacca, con sopra il titolo «The map of Marrow Isle». Alla prima discesa il sigillo si spezza in due metà che cadono girando, e i due rulli di legno si allontanano uno in alto e uno in basso, ruotando, finché la carta è tutta aperta con un piccolo rimbalzo. Sulla carta c’è un’isola inventata con la sua costa a onde, una baia, tre palme, una grotta, un vulcano, colline e ciuffi d’erba; dalla rosa dei venti partono le linee sottili delle rotte, che si disegnano, e la rosa stessa salta fuori girando. Una penna d’oca scrive «Here be sharks.» vicino a una pinna che gira nel mare. Poi una barchetta entra dall’angolo, segue un sentiero rosso tratteggiato che si disegna dietro di lei e si ferma nella baia: cala l’ancora e una pedina rossa salta a terra con un elastico. Da lì la pedina cammina a piccoli saltelli lungo il sentiero, che si disegna sotto i suoi piedi: alle palme le chiome dondolano e cade una noce di cocco, alla grotta escono tre pipistrelli, al vulcano la montagna trema e salgono tre sbuffi di fumo. A ogni tappa la penna scrive a mano la sua nota. Per tutto il viaggio la rosa dei venti gira. In fondo la X si disegna con due tratti rossi, la pedina si scansa con un salto, si apre una buca e lo scrigno salta fuori schiacciandosi come una molla, il coperchio si spalanca con un elastico, escono raggi d’oro e le monete volano fuori e rimbalzano a terra; l’ultima nota, in rosso, dice «X marks the spot!». Scorrendo indietro tutto si riavvolge. Il puntatore sopra un luogo lo fa reagire: le palme dondolano, dalla grotta si affaccia un pipistrello, il vulcano sbuffa, la barca beccheggia, lo scrigno trema e la rosa fa un giro intero.
Come funziona
Il palco e la pergamena
Una sezione alta nove schermi con dentro un palco sticky alto 100lvh: in alto il titolo, sotto il tavolo. Lo script misura il tavolo e sceglie l’impianto: largo (1000 × 640 unità) se lo spazio è più largo che alto, alto (600 × 1000) se no, e dà alla mappa la misura giusta. La carta è un div con il clip-path inset(50% 0% 50% 0%); i due rulli sono div posizionati con top al 50%, e il legno dentro è centrato dal CSS, così GSAP muove solo il top.
L’isola disegnata dallo script
Tutto quello che c’è sulla carta è SVG creato dallo script: la costa è una curva morbida (Catmull-Rom trasformata in Bézier) che passa per una ventina di punti dati in frazioni della mappa, e la stessa curva allargata del 5 e del 10% fa le righe del mare intorno. Palme, grotta, vulcano, scrigno, barca e pedina sono piccoli disegni a 0,0 dentro un gruppo spostato e uno scalato, più un gruppo interno per il puntatore. L’impianto alto mette la stessa isola in una scatola più stretta e più alta.
Il sentiero tratteggiato che si disegna
Il sentiero è tratteggiato, quindi non si può disegnare con il suo stroke-dashoffset. Si guarda attraverso una maschera: lo stesso tracciato, bianco e largo, con un trattino lungo L+2 e un vuoto di L+12; con lo stroke-dashoffset a L+2−t·L si vede solo la parte fino a t. Lo stesso numero t mette la barca o la pedina nel punto getPointAtLength(t·L), così il segno finisce sempre sotto di loro. I saltelli sono il valore assoluto di un seno di t.
Le note scritte a mano
Ogni nota va a capo da sola secondo quante lettere stanno su una riga, e ogni riga ha nel clipPath un rettangolo largo 0. Un tween porta un numero da 0 a 1 e allarga i rettangoli una riga dopo l’altra, per la lunghezza misurata con getComputedTextLength; la penna d’oca sta sulla punta, con una piccola onda su e giù, e si vede solo mentre scrive. Il tempo di ogni nota dipende dalla sua lunghezza e da WRITE_SPEED.
Una timeline per tutto il viaggio
Una sola timeline in pausa, legata allo scorrimento con ScrollTrigger e scrub, dall’inizio alla fine della sezione: sigillo, srotolamento con back.out, rotte e rosa, barca, ancora, pedina con elastic.out, le tappe con i loro effetti (palme con elastic, cocco con bounce, pipistrelli e fumo con i keyframes), la X, lo scrigno con back.out e uno schiacciamento elastico, il coperchio con elastic.out intorno alla cerniera, le monete in arco con bounce.out. La rosa gira dall’inizio alla fine con un tween lungo quanto la timeline.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
UNROLL | script.js | 1 | Quanto scorrimento serve alla pergamena per srotolarsi: 0,5 in fretta, 2 piano. |
COMPASS_TURNS | script.js | 2 | Quanti giri fa la rosa dei venti durante tutto il viaggio. |
WALK_HOPS | script.js | 26 | Quanti saltelli fa la pedina lungo tutto il sentiero. |
WRITE_SPEED | script.js | 1 | Quanto in fretta si scrivono le note scorrendo: 0,5 piano, 2 di corsa. |
COINS | script.js | 9 | Quante monete saltano fuori dallo scrigno. |
SCRUB | script.js | 0.8 | Quanti secondi impiega la mappa a raggiungere lo scorrimento: 0 la segue subito. |
NOTES | script.js | sea, bay, palms, cave, volcano, x | Le note scritte a mano a ogni tappa; vanno a capo da sole. |
--rosso | style.css | #b23a22 | Il rosso del sentiero, della X, della pedina e del sigillo. |
Quando usarla
Per raccontare un percorso come una caccia al tesoro: le tappe di un viaggio o di un’escursione, un parco avventura, un gioco da tavolo, una scuola di vela, l’onboarding di un’app, un calendario dell’avvento, i passi verso un premio o una sorpresa alla fine.
Sul telefono
La stessa animazione con la mappa in verticale: l’isola si allunga in una scatola più alta, le note vanno a capo più spesso e stanno nel mare sopra e sotto l’isola, i disegni sono un po’ più piccoli. Un tocco su un luogo lo fa reagire come il puntatore.
Con il movimento ridotto
Niente srotolamento, niente viaggio e niente scorrimento morbido: la sezione è alta uno schermo, la mappa è già aperta col sentiero disegnato, tutte le note scritte, la barca all’ancora e lo scrigno aperto con le monete, e compare in dissolvenza insieme al titolo.
Trappole
- Un tracciato tratteggiato non si disegna col suo stroke-dashoffset, che è già occupato dal tratteggio. Si disegna la sua maschera: un tracciato uguale, bianco, con un trattino solo lungo quanto tutto.
- Con trattino e vuoto lunghi uguali e lo stroke-dashoffset a L+1, a sentiero chiuso restava visibile un pezzetto di un’unità all’inizio, gonfiato dalla larghezza della maschera: un segno rosso prima della partenza. Il vuoto è più lungo del tracciato, l’offset parte da L+2 e la maschera ha le estremità piatte.
- I fromTo di una timeline disegnano subito il loro punto di partenza: il tween dell’ultimo tratto, che parte dal vulcano, mostrava già metà sentiero prima ancora di srotolare. I tween dei numeri che guidano sentiero e note hanno immediateRender: false.
- Il cenno «Scroll to unroll» aveva sia l’entrata (from opacity 0) sia l’uscita con lo scroll: lo scrub registrava 0 come partenza e il cenno restava acceso per tutto il viaggio. L’entrata muove il paragrafo, lo scroll i suoi figli.
- La pedina è messa a posto con l’attributo transform a ogni fotogramma; un tween di GSAP sullo stesso gruppo lo avrebbe riscritto coi suoi valori. Il salto finale accanto allo scrigno è su un gruppo interno.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Fraunces (font variabile) 5.3.0, Caveat (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 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.
