Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
La mongolfiera allo scroll
Scorri dentro l’anteprima
L’intestazione di una compagnia di voli in mongolfiera inventata, nello stile ricco: all’alba una grande mongolfiera a spicchi colorati aspetta sul prato accanto al ventilatore e al furgone, il bruciatore soffia la fiamma e si stacca; scendendo sale e la valle si allontana a strati, il prato con lo steccato e la manica a vento, i campi di grano e di lavanda coi filari di cipressi e il fiume che luccica, il paese con il campanile e il castello, le colline nella nebbia. Passano stormi di uccelli e nuvole davanti e dietro, il cielo va dall’alba rosa al giorno azzurro, e in cima arrivano il titolo e il pulsante.
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 hot air balloon on scroll</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/outfit@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up hot air balloon company, Aerie. The stage sticks while you scroll: at dawn the balloon lifts off the
meadow and climbs, the fields, the old town, the river and the hills fall away in layers, flocks and clouds pass
by, the sky turns from pink to blue, and at the top the title arrives. Everything is SVG drawn by the script -->
<main>
<section class="volo" data-volo>
<div class="palco" data-palco>
<svg class="scena" data-scena aria-hidden="true"></svg>
<header class="testata">
<p class="marchio">
<svg viewBox="0 0 32 32" aria-hidden="true">
<path class="marchio__pallone" d="M16 2.5c-6.4 0-10.5 4.6-10.5 10 0 4.6 3.7 8 6.6 10.6h7.8c2.9-2.6 6.6-6 6.6-10.6 0-5.4-4.1-10-10.5-10Z"/>
<path class="marchio__spicchio" d="M16 2.5c-2.6 3-3.7 6.6-3.7 10 0 4.3 1.3 7.8 2.4 10.6h2.6c1.1-2.8 2.4-6.3 2.4-10.6 0-3.4-1.1-7-3.7-10Z"/>
<path class="marchio__cesta" d="M12.6 25.4h6.8l-.8 4.1h-5.2Z"/>
</svg>
<span data-brand>Aerie</span>
</p>
<p class="sotto">Hot air balloon flights</p>
</header>
<div class="quota" data-quota>
<p class="quota__fase" data-fase><span class="quota__nome" data-fase-nome>Burners on</span><span class="quota__nota" data-fase-nota>Cold air in, hot air up</span></p>
<p class="quota__altezza"><span class="quota__etichetta">Altitude</span> <span class="quota__numero" data-altezza>0</span> m</p>
</div>
<div class="finale" data-finale>
<p class="finale__sopra">Sunrise flights</p>
<h1 class="finale__titolo">Rise with <em>the sun.</em></h1>
<p class="finale__testo">An hour over the valley at first light, and breakfast wherever the wind sets us down.</p>
<a class="tasto" href="#" data-tasto><span>Book a flight</span></a>
</div>
<p class="cenno" data-cenno>
Scroll to lift off
<svg viewBox="0 0 24 32" aria-hidden="true"><path d="M12 3V27M4 19L12 28L20 19" /></svg>
</p>
</div>
</section>
<section class="dopo">
<p class="dopo__marchio">Aerie</p>
<h2 class="dopo__titolo">Three baskets, one valley.</h2>
<p class="dopo__testo">Flights leave at dawn from the meadow by the old mill, weather permitting. Wear a hat: the burner is warm.</p>
</section>
</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.
45 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 mongolfiera allo scroll» da Animorio e adattala al mio sitoCosa fa
All’alba, sotto un cielo rosa con il sole basso, una grande mongolfiera aspetta sul prato fiorito di Aerie: accanto il ventilatore gira, il furgone aspetta e la manica a vento si muove. Il pallone è fatto di sedici spicchi rossi, gialli, blu e crema, con le cuciture, i nastri orizzontali, le pieghe vicino alla bocca, la corona in cima, la luce da sinistra e l’ombra sotto la pancia; gira piano su sé stesso e i colori scorrono sotto la luce. Sotto, la gonna a righe, il bruciatore sul suo telaio, le funi e la cesta di vimini intrecciato col bordo di cuoio, due passeggeri e due sacchi di sabbia. Scendendo il bruciatore soffia una fiamma a ogni tratto di salita e il pallone si illumina da dentro; la mongolfiera si stacca dal prato, la sua ombra si allarga e sparisce, e la valle scende sotto di lei a strati, ognuno alla sua velocità: il prato con lo steccato, i campi di grano, lavanda e verdi coi solchi, le siepi e i filari di cipressi, le fattorie e il fiume con i riflessi, il paese con il campanile e il castello con la bandiera, le colline con gli alberi e quelle lontane nella nebbia. Gli stormi passano battendo le ali, le nuvole scendono dietro e davanti al pallone, il cielo diventa azzurro e il sole sale. La cesta oscilla appena sotto il pallone, su una molla, e i sacchi dondolano. In basso a sinistra l’altimetro conta i metri e il nome del tratto cambia con un salto; in cima arrivano Rise with the sun. e il pulsante Book a flight. Risalendo, la mongolfiera torna giù fino al prato.
Come funziona
Un numero solo, quanto si è saliti
Lo scroll muove con scrub un oggetto qualunque, da 0 a 1. Da lì vengono il decollo (i primi metri dal prato) e la quota. La mongolfiera resta in mezzo e tutto il resto scende: ogni strato della valle ha la sua velocità, più alta per il prato e più bassa per le colline lontane, così si allontanano a strati come visti dall’alto.
Il pallone fatto di spicchi
La sagoma è un solido di rotazione: un raggio per ogni altezza, una sfera in alto e una goccia rovesciata fino alla bocca. Ogni spicchio è la striscia fra due meridiani, proiettata: x è il raggio per il seno dell’angolo, y si piega un poco col coseno, così i nastri orizzontali si curvano. A ogni fotogramma l’angolo cresce, gli spicchi davanti si ridisegnano e i colori scorrono sotto una luce che resta ferma.
La fiamma e la cesta
Quando la quota sale di un tratto, o se tutto è fermo da tre secondi, una timeline porta la fiamma su e giù: un percorso a goccia con una sfumatura blu, bianca, gialla e arancio che trema, e un bagliore arancio dentro la bocca del pallone. La cesta è appesa a un perno sotto il bruciatore: segue l’ondeggiare del pallone con una molla smorzata, e le funi si ricalcolano dagli angoli della cesta girata.
Nuvole, stormi e cielo
Le nuvole sono tre strati delle stesse bolle, ombra sotto, luce sopra e un riflesso spostato; scendono con la quota e scivolano col vento, e quelle grandi passano davanti al pallone. Gli uccelli sono due curve che si alzano e si abbassano. Il cielo sono due rettangoli sfumati, alba e giorno, e quello del giorno arriva in dissolvenza mentre il sole sale.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BRAND | script.js | 'Aerie' | Il nome della compagnia nella testata e sul furgone. |
SCREENS | script.js | 6 | Quanto dura il volo, in schermate di scroll. |
CLIMB | script.js | 1 | Quanto si allontana la valle: 0,5 un saltino, 1,5 un volo alto. |
BURNER | script.js | 1 | Quanto è grande la fiamma del bruciatore a ogni soffio (0 = niente fiamma). |
SWAY | script.js | 1 | Quanto ondeggia il pallone e quanto oscilla la cesta sotto. |
SPIN | script.js | 1 | Quanto gira veloce il pallone su sé stesso (0 = fermo). |
CLOUDS | script.js | 1 | Quante nuvole passano, da 0 a 2. |
BIRDS | script.js | 1 | Quanti stormi di uccelli passano, da 0 a 2. |
Quando usarla
Per l’intestazione di una compagnia di voli in mongolfiera, di un’agenzia di viaggi o di esperienze all’aria aperta, di un agriturismo o di un albergo in collina che offre il volo all’alba, di un festival dei palloni; e per qualsiasi pagina che racconta un viaggio che sale, dal prima al dopo.
Sul telefono
La stessa animazione con le misure adattate: il disegno prende la forma della casella, sempre alto uguale e largo quanto serve; su uno schermo stretto la mongolfiera sta in mezzo, un po’ più piccola, e alla fine scende per lasciare il posto al titolo, che va in alto e al centro. Le scritte si misurano anche sull’altezza; il sottotitolo della testata e l’invito a scorrere spariscono.
Con il movimento ridotto
Niente volo continuo, niente fiamma, niente ondeggiare, niente nuvole e uccelli che si muovono e niente scorrimento morbido: il volo è diviso in momenti fermi (sul prato, appena staccata, sopra i campi, sopra il paese, fra le nuvole, in cima col titolo). Scorrendo, la scena sfuma e ricompare già al momento successivo.
Trappole
- Gli spicchi che stanno a cavallo del bordo del pallone vanno tagliati a meno e più 90 gradi: proiettati interi, la loro metà dietro tornerebbe sopra gli spicchi davanti.
- La quota, gli strati, le nuvole e il cielo vanno calcolati dallo scroll, non contati nel tempo: così risalendo la mongolfiera torna sul prato. Solo la fiamma, l’ondeggiare, il vento e le ali vanno col tempo.
- Il disegno si rifà al resize, perché è largo quanto la casella: paese, fattorie, steccato e furgone si mettono rispetto a dove sta la mongolfiera.
- Le nuvole davanti devono essere già passate quando arriva il titolo, se no lo coprono: partono più in alto delle altre.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Fraunces (font variabile) 5.3.0, Outfit (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 17 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 22 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.
