Il caricamento che diventa marchio
Transizioni, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo sul tabellone
L’intro di un logo su un tabellone a palette da stazione: le palette girano in 3D, ognuna alla sua velocità, passano per lettere a caso e si fermano una dopo l’altra sul logo, con un piccolo rimbalzo; intorno l’orario delle partenze si sistema da solo e alla fine un’ondata di palette fa l’applauso. Nel Playground ci metti il tuo nome o carichi il tuo logo, che viene tagliato in palette.
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 departure-board logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script measures it, builds the board, its rows of flaps, and turns them until they spell the logo -->
<div class="palco" data-stage role="img" aria-label="Wayline">
<div class="tabellone" data-board>
<div class="tabellone__vetro" aria-hidden="true"></div>
<div class="tabellone__testa" data-head aria-hidden="true"></div>
<div class="tabellone__celle" data-cells aria-hidden="true"></div>
<div class="tabellone__riflesso" data-glare aria-hidden="true"></div>
</div>
</div>
<p class="nota">Click or tap to see it again</p>
</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.
24 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 logo sul tabellone» da Animorio e adattala al mio sitoCosa fa
Su una parete scura di stazione si posa, con un piccolo assestamento elastico, un tabellone delle partenze: una cassa nera in una cornice di metallo, con un vetro davanti su cui scorre un riflesso. Dentro ci sono file di palette, tutte vuote. Ogni paletta è fatta come quelle vere: una metà alta e una metà bassa, divise da una fessura con i perni ai lati. Prima si sistema l’orario: righe di partenze inventate, con l’ora, la destinazione, il binario e le note (Boarding, On time, Delayed). Le palette girano riga dopo riga, ognuna alla sua velocità e con un numero di giri diverso: la metà alta cade in avanti sulla cerniera, si scurisce mentre si allontana dalla luce, getta un’ombra sulla metà sotto, la copre e rimbalza un poco sul fermo. Poi tocca alle palette grandi in mezzo: corrono fra lettere e cifre a caso, più svelte e più lente, e si fermano una dopo l’altra, da sinistra, sulle lettere del logo di un marchio inventato, Wayline, in giallo. L’ultima che arriva fa sobbalzare il tabellone. Un treno in ritardo passa a On time, rigirando solo le palette delle note, e infine un’onda corre sul logo: ogni paletta fa un giro sulla stessa lettera e salta un poco, come un applauso leggero, mentre la prima colonna dell’orario risponde e il riflesso ripassa sul vetro. Il logo resta in mostra; dopo qualche secondo tutte le palette girano ancora e si fermano vuote, e il tabellone ricomincia con un orario nuovo. Un clic lo fa ripartire da capo. Al posto della parola si può mettere un’immagine: viene tagliata in una griglia di palette chiare, che girano fra le lettere come le altre e si fermano ognuna sul suo pezzo.
Come funziona
Una paletta
Ogni paletta è un div con quattro metà: due ferme (sopra la lettera nuova, sotto quella vecchia) e una foglia che cade, con due facce. La faccia davanti mostra la metà alta della lettera vecchia, quella dietro, girata con rotateX(180deg) e backface-visibility nascosta, la metà bassa della lettera nuova. La lettera è sempre alta quanto tutta la paletta e ogni metà, con overflow nascosto, ne mostra la sua parte. La foglia gira con rotateX intorno al suo bordo basso (transform-origin 50% 100%) dentro un contenitore con perspective: a 180 gradi la faccia dietro finisce esattamente sulla metà bassa.
La caduta
Un giro è un numero che va da 0 a 1: per il 70 per cento la foglia cade come un peso (l’angolo cresce col quadrato del tempo), poi rimbalza sul fermo e si posa; nell’ultimo giro i rimbalzi sono due e più ampi. Mentre cade la faccia davanti si scurisce, quella dietro si schiarisce arrivando, la metà bassa ferma prende un’ombra a forma di seno e la metà alta nuova esce dall’ombra. Tutto si scrive a mano nell’onUpdate (transform e opacità), e il testo di una metà si cambia solo quando cambia la lettera.
Il percorso delle lettere
Per ogni paletta si prepara un elenco: la lettera di partenza, qualche lettera a caso (mai due uguali di fila; solo cifre per ore e binari) e quella d’arrivo. Un solo tween porta un numero da 0 alla lunghezza dell’elenco, con ease lineare e una durata per giro diversa per ogni paletta: la parte intera dice quali due lettere si stanno scambiando, la parte decimale quanto è caduta la foglia. Così la timeline si può fermare, riavvolgere e saltare a un’etichetta senza perdere il conto.
Il tabellone
Le misure si contano in larghezze di una paletta piccola: l’orario ha 28 colonne sul computer, 19 sul tablet e 16 sul telefono (ora, destinazione, binario e note, finché ci stanno), le palette del logo sono più grandi e si rimpiccioliscono se il nome è più largo dell’orario; un nome lungo con gli spazi va su due righe. Le righe di contorno sono ROWS, metà sopra e metà sotto il logo, separate da due binari dipinti. Il primo tabellone usa un generatore di numeri a caso con un seme fisso, così il poster è sempre lo stesso; i giri dopo sono davvero a caso.
La regia e il tuo logo
Tutta l’entrata è una timeline sola, con le etichette start, timetable, logo, spelled, applause, rest e leave e timeScale per la velocità; l’applauso è un giro sulla stessa lettera più un salto con elastic.out. Se IMAGE ha un indirizzo, il logo diventa una griglia di palette chiare che conserva la forma dell’immagine: ogni metà mostra il suo pezzo con background-size uguale per tutte e background-position spostato della sua distanza dall’angolo dell’immagine, quindi il disegno continua da una paletta all’altra. Nel Playground accanto al campo c’è il tasto per caricare un file, che entra nel codice come indirizzo data:.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Wayline' | Il logo scritto: una paletta grande per ogni lettera. Un nome lungo con gli spazi va su due righe. |
IMAGE | script.js | '' | Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, viene tagliato in palette e prende il posto della parola. |
FLIPS | script.js | 14 | Quante lettere passa una paletta del logo prima di fermarsi (quelle dell’orario un po’ meno). |
STAGGER | script.js | 0.09 | I secondi fra la partenza di una paletta del logo e quella dopo: più alto, più si vede l’onda da sinistra. |
ROWS | script.js | 4 | Quante righe di orario ci sono intorno al logo, metà sopra e metà sotto (0 = il logo da solo). |
COLOR | script.js | '#ffc83d' | Il colore delle lettere del logo. |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
REST | script.js | 4 | Quanti secondi il logo resta in mostra prima che il tabellone si svuoti. |
LOOP | script.js | true | Se il tabellone si svuota e ricompone il logo. Con false il logo resta, e ogni tanto una sua paletta fa un giro. |
Quando usarla
Per presentare un logo con il fascino meccanico delle stazioni e degli aeroporti: l’apertura del sito di un’agenzia di viaggi, di un hotel, di un evento, di un marchio di valigie o di una rivista, l’annuncio di un lancio, un caricamento, un post per i social. Funziona con un marchio scritto e con un’immagine.
Sul telefono
La stessa animazione con le misure adattate: l’orario ha meno colonne (ora e destinazione), le palette del logo sono larghe quanto lo schermo permette. Un tocco la fa ripartire.
Con il movimento ridotto
Niente gira: il tabellone compare in dissolvenza con l’orario già al suo posto, poi compare in dissolvenza il logo. Se l’animazione ricomincia, le palette svaniscono e tornano.
Trappole
- La foglia che cade va girata con rotateX intorno al suo bordo basso e la faccia dietro va già girata di 180 gradi intorno al suo centro: a fine caduta le due rotazioni si annullano e la metà bassa della lettera nuova si legge diritta, senza specchiarsi.
- Con un tween per ogni lettera di ogni paletta la timeline arrivava a migliaia di pezzi; con un solo numero per paletta (parte intera la lettera, parte decimale la caduta) bastano poche centinaia di tween e si può saltare a ogni etichetta.
- Cambiare il testo di quattro metà a ogni fotogramma per centocinquanta palette faceva lavorare il browser per niente: ogni metà ricorda cosa mostra e si tocca solo quando la lettera cambia.
- La larghezza del tabellone si calcolava prima di rimpicciolire le palette del logo, e sul telefono il tabellone restava stretto: prima si adatta il logo all’orario, poi si sceglie la scala.
- Un logo corto senza orario intorno diventava due palette grandi come porte: la paletta grande ha un limite di larghezza legato allo schermo.
- Il colore arancione del treno in ritardo deve cambiare quando la paletta arriva sulla lettera nuova, non quando parte: il colore segue la parte decimale dell’ultimo giro.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 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.
