Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Il treno che attraversa la pagina
Scorri dentro l’anteprima
Scorrendo, un trenino a vapore attraversa un paesaggio a più piani: campagna, ponte sul fiume, galleria buia dove si accendono i finestrini, mare al tramonto. A ogni stazione entra un biglietto con il testo e il nome oscilla su un cartello appeso.
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 train across the page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<!-- the ride: taller than the screen; the stage sticks while the landscape rolls past the train -->
<section class="ride" data-ride>
<div class="stage" data-stage>
<svg class="world" data-world aria-hidden="true"></svg>
<header class="bar">
<a class="brand" href="#">Larkspur <span>Rail Journeys</span></a>
<a class="bar__link" href="#">Timetable</a>
</header>
<!-- one card per stop; data-sign is the name painted on the swinging station sign -->
<div class="cards">
<article class="card card--intro" data-card="intro">
<p class="card__kicker">Slow trains, long windows</p>
<h1 class="card__title" data-split>Four stops and one long window seat.</h1>
<p class="card__hint">Scroll to ride
<svg class="card__arrow" viewBox="0 0 16 22" aria-hidden="true"><path d="M8 2v17M2 13l6 6 6-6"/></svg>
</p>
</article>
<article class="card" data-card="stop" data-sign="Meadowmere">
<p class="card__kicker">The countryside</p>
<h2 class="card__title" data-split>Bread at six, cows at seven.</h2>
<p class="card__text">A halt so small the train stops on request. Hay bales, a bakery by the level crossing and a guard who waves at every field.</p>
</article>
<article class="card" data-card="stop" data-sign="Rivercross">
<p class="card__kicker">The river</p>
<h2 class="card__title" data-split>Slow down, the herons are watching.</h2>
<p class="card__text">The line crosses the Wend on an iron bridge. Pick the left side of the carriage: the water is wide here and the light is soft all morning.</p>
</article>
<article class="card" data-card="stop" data-sign="Underhill">
<p class="card__kicker">The tunnel</p>
<h2 class="card__title" data-split>Two minutes of dark.</h2>
<p class="card__text">The carriage lamps come on, somebody always laughs, the tea goes cold. Underhill is the only station on the line built inside a hill.</p>
</article>
<article class="card" data-card="stop" data-sign="Saltwick Bay">
<p class="card__kicker">The coast</p>
<h2 class="card__title" data-split>Salt on the windows.</h2>
<p class="card__text">Last stop. Chips on the harbour wall, a lighthouse that winks at the evening train and a sea that is never the same colour twice.</p>
</article>
<article class="card card--outro" data-card="outro">
<p class="card__kicker">Larkspur Rail Journeys</p>
<h2 class="card__title" data-split>The next train leaves at dawn.</h2>
<a class="ticket" href="#">
<span class="ticket__fill" aria-hidden="true"></span>
<span class="ticket__label">Book a window seat</span>
<svg class="ticket__arrow" viewBox="0 0 22 14" aria-hidden="true"><path d="M1 7h18M13 1l6 6-6 6"/></svg>
</a>
</article>
</div>
</div>
</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.
52 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 treno che attraversa la pagina» da Animorio e adattala al mio sitoCosa fa
La pagina di un’agenzia di viaggi in treno inventata, Larkspur Rail Journeys. Il palco resta fermo sullo schermo e la pagina è un viaggio: in alto un biglietto color crema dice «Four stops and one long window seat.», e appena si scorre da sinistra entra un trenino a vapore verde e crema con tre carrozze, i passeggeri a silhouette dietro i finestrini (qualcuno col cappello, un bambino, un cane, uno che legge il giornale) e il macchinista nella cabina. Il paesaggio gli scorre dietro in sette piani che vanno a velocità diverse: le nuvole, le colline lontane con una città azzurrina, le colline con gli alberi e un mulino a vento che gira, gli alberi grandi, le recinzioni e le balle di fieno, il binario, i pali del telegrafo coi fili che passano davanti al treno e l’erba in primo piano, la più veloce. Il viaggio rallenta e si ferma a quattro stazioni. Meadowmere, in campagna, con il marciapiede e la panchina. Rivercross, a metà di un ponte di ferro a traliccio sopra un fiume con le canne: il traliccio passa davanti e dietro le carrozze. Underhill, dentro una galleria: il treno entra nella collina tagliata a vista, i finestrini si accendono di giallo una carrozza alla volta, le carrozze si scuriscono e il fanale della locomotiva apre un fascio di luce. Saltwick Bay, sul muro del porto, al tramonto: uscendo dalla galleria il cielo è viola e arancio, il sole basso si specchia nel mare, le barche a vela dondolano e il faro manda il suo fascio. A ogni stazione entra un biglietto con un titolo e un testo, con un piccolo rimbalzo e le parole che salgono una alla volta, e il nome della stazione è su un cartello verde appeso a due catenelle che oscilla: frenando il treno lo spinge avanti e lui dondola fino a fermarsi. Le ruote girano con la strada percorsa e la biella della locomotiva va su e giù, le carrozze si allungano e si stringono sui ganci quando il treno accelera o frena e ondeggiano una dopo l’altra, sobbalzano sulle giunte dei binari, e dal fumaiolo esce uno sbuffo di vapore ogni mezzo giro di ruota (da fermo, uno sbuffo pigro ogni tanto). Alla fine il treno riparte, esce a destra e resta l’ultimo biglietto con il pulsante «Book a window seat».
Come funziona
Il palco fermo e la regia
La sezione è alta molti schermi e il suo primo figlio è un palco sticky alto 100lvh con overflow: hidden. Una timeline GSAP in pausa porta due numeri: d, la strada fatta (in larghezze dello schermo), e tx, il treno che entra da sinistra (-1), sta al suo posto (0) ed esce a destra (1). Fra una stazione e l’altra d va avanti con power2.inOut, poi resta fermo un po’: è la sosta. Uno ScrollTrigger con scrub lega la timeline allo scorrimento, e Lenis lo rende morbido.
Il paesaggio a piani
Tutto è un SVG grande quanto il palco, ridisegnato da JavaScript quando cambia misura. Ogni piano è un gruppo spostato di -d × la sua velocità (le nuvole 0,04, le colline lontane 0,14, quelle vicine 0,38 e 0,68, il binario 1, i pali 1,32, l’erba 1,75); SPEED allarga o stringe queste differenze. Le cose del binario sono messe dove la strada le incontra: ponte, galleria, mare e stazioni stanno a una distanza fissa. I piani lontani hanno due versioni, campagna e costa, che si scambiano in dissolvenza mentre il treno è in galleria e la roccia copre tutto; lo stesso vale per il cielo, che passa dal giorno al tramonto.
Il treno
Locomotiva e carrozze sono gruppi SVG disegnati nel codice. A ogni fotogramma (gsap.ticker) si calcola la strada fatta dal treno rispetto al mondo: le ruote girano di strada diviso raggio, la biella segue un cerchio, la velocità e l’accelerazione si ricavano da lì. Ogni carrozza ha due molle: una per il gancio, che la fa allungare e stringere tirata da quella davanti, e una per l’ondeggiamento, con una fase diversa per carrozza; alle giunte del binario sobbalza di un pixel.
La galleria e il vapore
La collina è disegnata nel piano del binario, quindi dietro il treno; i due stipiti di pietra della galleria stanno in un piano davanti, così il treno ci passa sotto. Per ogni carrozza si guarda se il suo centro è dentro la galleria: i finestrini vanno verso il giallo, un velo scuro copre la vernice e i riflessi spariscono. Il vapore è una riserva di nuvolette: ne parte una ogni mezzo giro di ruota, resta ferma nel mondo (scorre con il binario), sale, si gonfia e svanisce.
I biglietti e i cartelli
Ogni sosta ha una finestra di tempo nella timeline; il ticker guarda dove è arrivata la timeline e mostra il biglietto giusto: entra con back.out e le parole del titolo salgono una per una, quello vecchio esce verso l’alto. Il cartello della stazione è un pendolo appeso al mondo: la sua accelerazione lo spinge, una molla con attrito lo riporta giù, e quando arriva il biglietto riceve una piccola spinta in più.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
CARS | script.js | 3 | Quante carrozze tira la locomotiva, da 1 a 6. |
SPEED | script.js | 1 | Quanto si separano i piani del paesaggio: 0 vanno tutti insieme, 1 è naturale, 1,5 molto profondo. |
SMOKE | script.js | 1 | Quanto vapore sbuffa la locomotiva: 0 niente, 2 tanto. |
SWAY | script.js | 1 | Quanto ondeggiano le carrozze e quanto si allungano sui ganci: 0 rigide. |
SMOOTH | script.js | 1 | In quanti secondi il viaggio raggiunge lo scorrimento. |
--train-body | style.css | #1f5c47 | Il colore della vernice del treno (e dei cartelli). |
--sky-dusk-bottom | style.css | #f4a06c | Il colore del cielo basso al tramonto, sul mare. |
Quando usarla
Per la pagina di un viaggio, di un itinerario, di una storia a tappe: un’agenzia, un festival in più città, la storia di un’azienda anno per anno, un percorso di onboarding. Ogni sosta è un capitolo e il paesaggio che cambia tiene viva la discesa.
Sul telefono
Stesso viaggio, stesse animazioni: il treno è più grande rispetto allo schermo e sta più a destra, così le carrozze in coda escono dal bordo; il biglietto occupa la parte alta e il cartello pende sotto di lui, sopra il treno. Il dito scorre come la rotella.
Con il movimento ridotto
Il treno non viaggia: è già al suo posto e, quando si arriva a una sosta, la scena sfuma nel colore della carta e riappare alla stazione nuova. Le ruote non girano, le carrozze non ondeggiano, niente vapore, i cartelli stanno fermi e i biglietti compaiono in dissolvenza. I finestrini in galleria si accendono lo stesso.
Trappole
- Con lo scrub la timeline arriva in ritardo sullo scorrimento: se il biglietto si sceglie in onUpdate dello ScrollTrigger, che scatta solo quando la pagina si muove, resta quello vecchio. Va scelto a ogni fotogramma guardando il tempo della timeline.
- Un piano lento, con le cose messe dove lo vedrà la telecamera, finisce per mostrare il mare in campagna se la sua velocità è molto bassa. Le due versioni dei piani lontani si scambiano quando la galleria copre tutto lo schermo, così il cambio non si vede mai.
- Il vapore non va attaccato al treno: deve restare fermo nel mondo e scorrere col binario, altrimenti a treno veloce sale dritto come da un camino di casa.
- Il cartello appeso deve stare nel piano del binario (si ferma con la stazione) ma davanti al treno: va in un gruppo che si sposta come il binario e si disegna dopo il treno.
- Disegnare il palco con le misure in pixel vuol dire rifarlo a ogni cambio di misura; per questo la timeline conta la strada in larghezze dello schermo, non in pixel.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 20 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.
