Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Il razzo allo scroll
Scorri dentro l’anteprima
Il lancio di una startup spaziale raccontato dallo scroll: conto alla rovescia a lettere grandi, accensione col fumo che si gonfia, la torre che si stacca, il decollo con la scena che trema, il cielo che passa dall’azzurro al nero, gli stadi che cadono girando e il satellite che esce dalla carenatura e apre i pannelli.
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 rocket on scroll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/big-shoulders-display@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/martian-mono@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up space startup, Vesper Orbital. The stage sticks while you scroll: the countdown, the ignition with
the smoke swelling on the pad, the tower letting go, the liftoff with the whole scene shaking, the sky going
from blue to black, the stages falling away and spinning, the nose cone opening and the satellite unfolding
its panels. Rocket, tower, smoke, clouds and satellite are SVG drawn by the script -->
<main>
<section class="lancio" data-lancio>
<div class="palco" data-palco>
<div class="cielo" aria-hidden="true">
<div class="cielo__alto" data-cielo-alto></div>
<div class="cielo__spazio" data-cielo-spazio></div>
</div>
<div class="scena" data-scena>
<div class="scuoti" data-scuoti>
<svg class="disegno" data-disegno aria-hidden="true"></svg>
</div>
</div>
<div class="testi" data-testi>
<header class="testata" data-entra>
<p class="marchio">
<svg viewBox="0 0 32 32" aria-hidden="true"><ellipse cx="16" cy="16" rx="13" ry="6" transform="rotate(-24 16 16)"/><path d="M16 6 21 22H11z"/></svg>
Vesper Orbital
</p>
<p class="missione">Pathfinder-1 rideshare</p>
</header>
<div class="voci" data-voci data-entra>
<div class="voce" data-voce="pad">
<p class="voce__grande">On the pad</p>
<p class="voce__nota">Twelve small satellites, one ride up</p>
</div>
<div class="voce" data-voce="ignition">
<p class="voce__grande">Ignition</p>
<p class="voce__nota">Nine engines at full thrust</p>
</div>
<div class="voce" data-voce="liftoff">
<p class="voce__grande">Liftoff</p>
<p class="voce__nota">Tower clear, climbing fast</p>
</div>
<div class="voce" data-voce="maxq">
<p class="voce__grande">Max Q</p>
<p class="voce__nota">Peak pressure, holding steady</p>
</div>
<div class="voce" data-voce="space">
<p class="voce__grande">Black sky</p>
<p class="voce__nota">Past the air, the stars come out</p>
</div>
<div class="voce" data-voce="sep">
<p class="voce__grande">Stage sep</p>
<p class="voce__nota">First stage away, second stage lit</p>
</div>
<div class="voce" data-voce="fairing">
<p class="voce__grande">Fairing open</p>
<p class="voce__nota">Nose cone off, payload in sight</p>
</div>
<div class="voce" data-voce="orbit">
<p class="voce__grande">Hello, orbit</p>
<p class="voce__nota">Pathfinder-1 deployed at 525 km</p>
</div>
</div>
<dl class="strumenti" data-strumenti data-entra>
<div><dt>Mission clock</dt><dd data-orologio>T-00:05</dd></div>
<div><dt>Altitude</dt><dd data-quota>0.0 km</dd></div>
<div><dt>Speed</dt><dd data-velocita>0 km/h</dd></div>
</dl>
<p class="cenno" data-cenno>
Scroll to launch
<svg viewBox="0 0 24 32" aria-hidden="true"><path d="M12 3V27M4 19L12 28L20 19" /></svg>
</p>
</div>
</div>
</section>
<section class="arrivo">
<p class="arrivo__marchio">Vesper Orbital</p>
<h2 class="arrivo__titolo">Your satellite, in orbit by spring.</h2>
<p class="arrivo__testo">Rideshare seats on the next Pathfinder flight. Bring the payload, we bring the rocket.</p>
<a class="tasto" href="#"><span>Book a seat</span></a>
</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.
49 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 «Il razzo allo scroll» da Animorio e adattala al mio sitoCosa fa
Il palco resta fermo per tutta la discesa: a destra (al centro sul telefono) il razzo di Vesper Orbital, una startup spaziale inventata, sulla rampa accanto alla torre di servizio, a sinistra le parole grandi della missione, in basso tre strumenti (orologio di missione, quota, velocità). All’apertura le scritte salgono con un rimbalzo e i bracci della torre si allungano verso il razzo con un elastico. Scorrendo parte il conto alla rovescia: i numeri entrano lettera per lettera saltando e se ne vanno verso l’alto, intanto il razzo sfiata vapore dai fianchi e la scena comincia a vibrare. All’accensione la fiamma cresce sotto l’ugello e guizza, e dalla rampa il fumo si gonfia a sbuffi che rotolano ai lati. I bracci della torre si sollevano uno dopo l’altro, la torre si piega all’indietro con un elastico, i morsetti della rampa si aprono e il razzo parte: la scena trema forte, la scia si allunga, la telecamera lo segue, la terra, le colline, il fumo e la torre scendono e spariscono, le nuvole passano veloci davanti e dietro. Il cielo passa dall’azzurro al blu profondo e poi al nero, le scritte diventano chiare, si accendono le stelle e dal basso sale la curva della Terra. Poi il primo stadio si stacca con uno sbuffo, si spegne e cade girando su se stesso, mentre si accende il secondo; la carenatura si apre in due metà che si allontanano ruotando; il secondo stadio si spegne e cade anche lui; il satellite si avvicina alla telecamera, alza l’antenna e apre i pannelli solari uno per volta, con un piccolo scatto alla fine. Gli strumenti contano i secondi, i chilometri e la velocità. Tornando su, tutto si riavvolge, fumo compreso.
Come funziona
Un palco fermo e un disegno solo
La sezione è alta molte schermate (SCREENS) e dentro c’è un palco sticky alto 100lvh. Il cielo è fatto di tre strati CSS uno sopra l’altro (giorno, quota, spazio), che si accendono con l’opacità. Tutto il resto è un solo SVG disegnato dallo script: stelle, Terra, colline, nuvole, il mondo (terra, rampa, torre, fumo) e il razzo, con dentro i suoi pezzi in gruppi separati (scia, fiamme, secondo stadio, primo stadio, satellite, le due metà della carenatura). Il viewBox segue la forma dello schermo: alto 1000 sul computer col razzo al 62% della larghezza, alto 1400 sul telefono col razzo al centro e lo spazio per le parole sopra.
Una timeline sola, legata allo scroll
Tutta la storia è una timeline GSAP con i tempi in unità libere: conto alla rovescia, accensione, distacco della torre, decollo, cielo, separazione, carenatura, rilascio. ScrollTrigger la lega allo scorrimento della sezione con scrub: 0.6 e Lenis rende lo scroll morbido. I momenti si costruiscono a partire da quattro tempi (accensione, separazione, carenatura, rilascio), quindi COUNTDOWN allunga solo l’inizio e tutto il resto si sposta da solo.
Decollo: la telecamera al posto del razzo
Il razzo sale di poco (150 unità con power2.inOut) e poi resta quasi fermo: è il mondo che scende di 3000 unità con power2.in, cioè sempre più veloce, e le colline scendono a metà velocità, così si sente la profondità. Le nuvole sono due strati che attraversano lo schermo dall’alto in basso, uno davanti e uno dietro al razzo, a velocità diverse. Le parole e gli strumenti cambiano colore insieme al cielo.
Il tremore e le fiamme vanno a tempo
Quanto trema la scena è un numero nella timeline (sale all’accensione, è al massimo al decollo, si spegne in quota), ma il tremore vero lo fa un ticker di GSAP: somme di seni a frequenze diverse, moltiplicate per quel numero e per SHAKE, spostano e ruotano di poco il contenitore del disegno. Lo stesso ticker fa guizzare le fiamme con scaleY e scaleX su un gruppo interno, mentre la timeline accende e spegne il gruppo esterno: così il guizzo continua anche quando lo scroll è fermo.
Stadi, carenatura e pannelli
Ogni stadio è un gruppo che cade con y in power1.in e ruota con rotation lineare (SPIN), col perno al centro del suo riquadro; le fiamme e la scia stanno fuori dal gruppo, così il perno non si sposta. Le metà della carenatura si aprono ruotando sull’angolo in basso all’esterno con back.out e poi volano via. I pannelli del satellite sono rettangoli già al loro posto finale: partono schiacciati (scaleX 0.1) contro il corpo e si distendono uno dopo l’altro con x e scaleX in back.out, che dà lo scatto finale.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
COUNTDOWN | script.js | 5 | Quanti numeri mostra il conto alla rovescia prima dell’accensione, da 3 a 10. Più numeri vogliono più scroll all’inizio. |
SHAKE | script.js | 1 | Quanto trema la scena all’accensione e al decollo (0 = resta ferma). |
SMOKE | script.js | 1 | Quanto fumo si gonfia dalla rampa: 0.3 è un filo, 2 una nuvola enorme che arriva ai bordi. |
SPIN | script.js | 1 | Quanto girano gli stadi e le metà della carenatura mentre cadono (1 = circa due terzi di giro, 0 = cadono dritti). |
PANELS | script.js | 3 | Quanti pannelli solari per ala apre il satellite, da 1 a 4. |
SCREENS | script.js | 9 | Quanto dura il lancio, in schermate di scroll: con meno schermate tutto va più veloce. |
STARS | script.js | 160 | Quante stelle compaiono nello spazio. |
COUNT_NOTE | script.js | All systems go | La riga piccola sotto i numeri del conto alla rovescia. |
Quando usarla
Per raccontare un lancio, una partenza o un prodotto che «decolla»: il sito di una startup spaziale o di un’azienda di satelliti, la presentazione di un’app nuova, una raccolta fondi che raggiunge l’obiettivo, il conto alla rovescia di un evento, una pagina «come funziona» divisa in fasi, una storia di crescita che passa da terra allo spazio.
Sul telefono
La stessa animazione con le misure adattate: il razzo sta al centro e più in basso, le parole grandi e gli strumenti stanno sopra, il disegno è più alto (viewBox alto 1400) così razzo, fumo e satellite con i pannelli aperti ci stanno tutti.
Con il movimento ridotto
Niente viaggio, niente tremore, niente guizzi e niente scorrimento morbido: la storia è divisa in momenti fermi (sulla rampa, ogni numero, accensione, decollo, Max Q, cielo nero, separazione, carenatura, orbita). Scorrendo, la scena e le parole sfumano, ricompaiono già al momento successivo e il cielo cambia colore in dissolvenza.
Trappole
- Il perno dello stadio che cade, calcolato sul riquadro del gruppo, stava molto più in basso del razzo perché il gruppo conteneva anche la scia lunga: lo stadio girava attorno a un punto nel vuoto. Fiamme e scia stanno fuori dal gruppo che cade.
- Il tremore messo come tween nella timeline si fermava quando lo scroll si fermava: la timeline dice solo quanto tremare, il tremore vero è un ticker a tempo.
- Il colore della fiamma scritto come var(--accento) nell’attributo stop-color del gradiente non funziona (gli attributi SVG non leggono le variabili CSS): va scritto in style.
- L’ugello del secondo stadio spuntava fra il primo e il secondo stadio: l’interstadio è più alto e lo copre finché il primo stadio non se ne va.
- Con le parole scritte scure su un cielo che diventa blu profondo, «Max Q» si leggeva male: il colore delle parole cambia prima che il cielo si scurisca, nel momento in cui nessuna parola è in scena.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Big Shoulders Display (font variabile) 5.3.0, Martian Mono (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 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.
