Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
L'orario del traghetto
L'orario d'inverno di un piccolo traghetto in cifre tabulari sottili: sotto il puntatore due linee vermiglio si tendono come elastici fino ai bordi, una lungo la riga e una giù per la colonna, l'orario dove si incrociano prende peso e larghezza e le intestazioni del porto e della barca scattano. Stile minimal.
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 ferry timetable</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="stage" data-stage>
<header class="top">
<span class="top__name"><span>Larkspit</span></span>
<span class="top__note"><span>Winter timetable, every day</span></span>
</header>
<!-- the timetable: a port on every row, a boat on every column, a departure time in every cell. Under the pointer
two hairlines stretch like rubber bands to the edges, one along the row and one down the column; the time
where they cross takes weight and width, and the two headers snap -->
<div class="board" data-board>
<svg class="cross" data-cross aria-hidden="true">
<path class="cross__line" data-line-row d="" />
<path class="cross__line" data-line-col d="" />
</svg>
<div class="table" role="table" aria-label="Larkspit ferry, winter departures" tabindex="0" data-table></div>
<i class="rule rule--head" data-rule aria-hidden="true"></i>
<i class="rule rule--foot" data-rule aria-hidden="true"></i>
</div>
<footer class="foot">
<span class="hint" data-hint>Point at a sailing</span>
<span class="sr" aria-live="polite" data-say></span>
</footer>
</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.
20 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 «L'orario del traghetto» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo, in alto il nome della linea, Larkspit, e a destra Winter timetable, every day; in mezzo una tabella senza cornici: sei barche in colonna (Marta, Tern, Petrel, Osprey, Wren, Gannet), cinque porti in riga (da Larkspit a Rhee) e in ogni casella l'ora di partenza, in cifre tabulari di Archivo sottili e grigie. All'apertura le due righe della tabella si disegnano da sinistra, i nomi delle barche cadono al loro posto con un piccolo rimbalzo, i porti entrano da sinistra e gli orari si riempiono colonna dopo colonna, ognuno da sottilissimo al suo peso; poi la croce si apre su una casella e fa due passi. Sotto il puntatore due linee vermiglio, sottili, partono dal punto in cui sta e si tendono come elastici fino ai bordi della tabella, una lungo la riga e una giù per la colonna; passano sotto le cifre, così si vedono solo fra una casella e l'altra, come le linee guida di un orario stampato. Ogni linea è tenuta dal puntatore e legata ai due capi: passando a un'altra riga il punto tenuto scatta per primo e i capi arrivano un attimo dopo, così la linea si piega in una curva morbida e si raddrizza con un pixel di troppo; dentro una casella il puntatore la tira un poco verso di sé. L'orario all'incrocio prende peso e larghezza con una molla che va un filo oltre, le caselle vicine sentono la spinta e si scostano di due pixel, la riga e la colonna accese passano dal grigio al nero (le caselle che si spengono vanno via dopo, dalle più vicine alle più lontane), e i nomi del porto e della barca scattano verso la tabella prendendo peso. Uscendo dalla tabella le linee tornano nel puntatore come elastici lasciati andare. Quando nessuno punta, dopo un momento la croce cammina da sola da una casella all'altra. Con le frecce si va di una casella, con Home e Fine ai capi della riga.
Come funziona
Una tabella in cifre tabulari
La tabella è una griglia CSS con role=table: la prima colonna per i porti, poi una colonna 1fr per ogni barca, le righe con display: contents. Gli orari si calcolano dalla partenza della barca più i minuti del porto. Ogni testo è uno span con tre variabili CSS, --w (font-weight), --s (font-stretch) e --k (quanto nero c'è nel color-mix col grigio): GSAP anima solo quelle, e le cifre di Archivo con tabular-nums non fanno ballare le colonne.
Le linee sotto le cifre
Le due linee sono due path in un SVG che sta dietro la griglia. Ogni testo ha uno sfondo del colore della carta con un po' di margine: la linea passa sotto e sparisce dietro le cifre, e si vede solo fra una casella e l'altra. Niente maschere e niente calcoli: basta l'ordine dei livelli.
Un elastico tenuto in un punto
Ogni linea è un percorso di due curve cubiche: dal capo sinistro al punto tenuto (all'altezza del puntatore lungo la linea) e da lì al capo destro, con la tangente piatta nel punto tenuto. Il punto tenuto insegue il centro della riga su una molla rigida (GRAB_SPRING), i capi su una più morbida (ENDS_SPRING): cambiando riga la linea si piega e si raddrizza. PULL sposta il punto tenuto verso il puntatore dentro la casella. Le molle si integrano a mano sul ticker di GSAP col passo limitato a 1/30 di secondo.
Si tende fino ai bordi
Un terzo numero, reach, va da 0 a 1 su una molla quasi frenata del tutto (va oltre di un pixel o due): i capi stanno a quella frazione della strada fra il puntatore e i bordi. Quando la croce si spegne, reach torna a 0 su una molla più dura e le linee rientrano nel puntatore. Una croce nuova nasce già sulla sua riga, senza curva.
Incrocio, vicine e intestazioni
Cambiando casella, ogni testo che cambia stato riceve un solo tween (quello vecchio si ferma prima, così uno in ritardo non disfa il nuovo): l'incrocio va a WEIGHT[1] e WIDTH[1] con back.out, la riga e la colonna al nero, le altre al grigio con un ritardo che cresce con la distanza. Le quattro vicine fanno una spinta di NUDGE pixel e tornano con elastic.out; il porto e la barca scattano di 5 pixel verso la tabella e tornano su una molla, prendendo peso.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
GRAB_SPRING | script.js | [420, 30] | La molla del punto in cui il puntatore tiene ogni linea: quanto è rigida e quanto è frenata. |
ENDS_SPRING | script.js | [150, 17] | La molla dei due capi di ogni linea, che seguono il punto tenuto un attimo dopo (meno rigida, più curva). |
PULL | script.js | 0.22 | Quanto il puntatore tira la linea fuori dal centro della riga (0 = per niente). |
WEIGHT | script.js | [230, 680] | Il peso degli orari fermi e dell'orario all'incrocio (da 100 a 900). |
WIDTH | script.js | [88, 114] | La larghezza degli orari fermi e dell'orario all'incrocio (da 62 a 125). |
NUDGE | script.js | 2 | Di quanti pixel si scostano le caselle vicine all'incrocio. |
WANDER | script.js | true | La croce cammina da sola quando nessuno punta. |
Quando usarla
Per tutte le tabelle a due entrate in cui si cerca un incrocio: orari di traghetti, treni e corriere, il programma di un festival (palchi e ore), le taglie di un negozio, i prezzi di un hotel per stagione e camera. Funziona finché la tabella sta in uno schermo, fino a otto righe e otto colonne; più grande, conviene filtrarla prima.
Sul telefono
Le stesse animazioni a misure adattate: le cifre sono più piccole e le righe più alte, così la tabella riempie lo schermo e le caselle si toccano bene col dito. La croce va dove si tocca e segue il dito mentre striscia; quando il dito si alza resta lì, e dopo qualche secondo riprende a camminare da sola. La pagina scorre ancora in verticale.
Con il movimento ridotto
Niente molle, niente curve e niente scatti: le linee compaiono già tese sulla riga e sulla colonna, l'incrocio, la riga e le intestazioni cambiano peso e colore con una breve dissolvenza, le vicine non si muovono e la croce non cammina da sola. All'apertura tutto compare in dissolvenza già al suo posto.
Trappole
- Una linea che passa nel mezzo della riga sembra cancellare gli orari, come una corsa soppressa. Sta dietro le cifre e ogni testo ha uno sfondo del colore della carta: così si vede solo fra le caselle.
- Con un tween per casella e ritardi diversi, passando veloce su tre righe una casella poteva ricevere prima l'accensione e poi uno spegnimento partito dopo, e restava grigia nella riga accesa. Ogni testo tiene il suo ultimo tween e lo ferma prima di farne un altro.
- Col tratto arrotondato, la linea che finisce proprio dove comincia il nome del porto lasciava un puntino a sinistra della prima lettera: lo sfondo del nome sporge di un po' a sinistra con un margine negativo.
- Il pilota delle anteprime manda pointerleave che risalgono dalla pagina a ogni elemento che lascia: l'uscita vera si riconosce da un pointerout senza relatedTarget e fuori dalla finestra, e la croce si spegne quando il puntatore esce dalla tabella.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 15 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.
