Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
Le colonne dei servizi
Nello stile minimal: cinque colonne strette, una per servizio, col nome in piedi. La colonna sotto il puntatore si allarga su una molla e le altre si stringono, il suo nome cade di piatto sull’unica riga vermiglia, rimbalza appena e si posa, e sotto si scrive la sua riga di descrizione.
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 service columns</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__mask"><span class="top__item" data-top>Ostro</span></span>
<span class="top__mask"><span class="top__item top__item--grey" data-top><span class="hint-mouse">Point at a column</span><span class="hint-touch">Tap a column</span></span></span>
</header>
<!-- five columns, one service each: the name stands upright in its narrow column; the one under the pointer
widens on a spring, its name falls flat onto the vermilion line and its line of description writes itself -->
<section class="cols" aria-label="Services" data-cols>
<i class="floor" data-floor></i>
<article class="col" tabindex="0" data-col>
<i class="col__rule" data-rule></i>
<h2 class="col__name" data-name>Strategy</h2>
<p class="col__desc" data-desc>Positioning, naming and the story that comes before the logo.</p>
</article>
<article class="col" tabindex="0" data-col>
<i class="col__rule" data-rule></i>
<h2 class="col__name" data-name>Identity</h2>
<p class="col__desc" data-desc>Marks, colour and rules that hold up at every size.</p>
</article>
<article class="col" tabindex="0" data-col>
<i class="col__rule" data-rule></i>
<h2 class="col__name" data-name>Type</h2>
<p class="col__desc" data-desc>Custom lettering and variable fonts, drawn in house.</p>
</article>
<article class="col" tabindex="0" data-col>
<i class="col__rule" data-rule></i>
<h2 class="col__name" data-name>Motion</h2>
<p class="col__desc" data-desc>Logos that move, title sequences and interface timing.</p>
</article>
<article class="col" tabindex="0" data-col>
<i class="col__rule" data-rule></i>
<h2 class="col__name" data-name>Web</h2>
<p class="col__desc" data-desc>Sites built by hand: fast, light and easy to keep.</p>
</article>
<i class="mark" data-mark></i>
</section>
</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.
29 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 «Le colonne dei servizi» da Animorio e adattala al mio sitoCosa fa
La pagina dei servizi di uno studio inventato, Ostro, su carta bianco caldo: cinque colonne divise da righe sottili e un pavimento, una riga orizzontale da un pixel su cui stanno tutti i nomi. Strategy, Identity, Type, Motion e Web stanno in piedi, scritti in verticale dal basso in alto, stretti, leggeri e grigi, nel carattere variabile Archivo. All’apertura le righe fra le colonne scendono dall’alto una dopo l’altra, il pavimento si stende da sinistra e i nomi salgono sul pavimento allargandosi, con un pixel di troppo e il ritorno; poi la seconda colonna si apre da sola. Passando sopra una colonna, quella si allarga su una molla e le altre le fanno posto stringendosi. Il suo nome si allarga e prende peso e intanto cade di piatto, girando intorno al suo piede come un’asse che si rovescia, sempre più veloce; arrivato sul pavimento si posa sull’unica riga di colore, rimbalza su di qualche grado e torna giù, e la riga vermiglia sente il colpo e vibra di un paio di pixel. Poi sotto la riga si scrive la descrizione, lettera per lettera. Passando a un’altra colonna la riga vermiglia ci corre come un bruco, prima il bordo davanti e poi quello dietro, e il nome di prima viene rialzato in piedi mentre la sua descrizione sparisce in un soffio. Lasciando la pagina resta aperta l’ultima colonna. Con il tasto Tab e le frecce si apre una colonna alla volta.
Come funziona
Le colonne su una molla
Le cinque colonne hanno position: absolute e la loro larghezza la scrive lo script. Ognuna ha una quota della larghezza, 1 da chiusa e WIDE da aperta, che insegue il suo bersaglio con una molla smorzata calcolata a mano (passi da 1/120 di secondo sul ticker di GSAP, rigidità e freno in SPRING): la larghezza è la quota divisa per la somma, quindi le colonne riempiono sempre tutta la fila, anche mentre rimbalzano.
Il nome che cade
Il nome gira intorno al suo angolo in basso a sinistra (transform-origin: 0 100%). In piedi è ruotato di −90 gradi, rimpicciolito per stare nella colonna stretta e spostato a destra del suo spessore, così il suo bordo resta sul margine; lo spostamento è lo spessore per il seno dell’angolo e sparisce quando il nome è di piatto. La caduta è un tween con power2.in, che accelera come un peso, e il rimbalzo è una piccola timeline di quattro passi.
Gli assi del carattere
Archivo ha l’asse della larghezza da 62 a 125 e quello del peso da 100 a 900, tutti e due nel file «wdth» di Fontsource. In piedi i nomi sono a UPRIGHT, di piatto a FLAT: un solo numero da 0 a 1 porta insieme larghezza, peso, scala e colore (con color-mix fra il grigio e il nero). La grandezza del carattere si misura in modo che il nome più lungo, di piatto, riempia la colonna aperta.
La riga vermiglia
È un div largo un pixel stirato con scaleX fra due bordi, ognuno sulla sua molla: quello che va avanti è rigido, quello dietro è morbido, così passando da una colonna all’altra la riga si allunga e poi si raccoglie come un bruco. All’arrivo del nome riceve una spinta verso il basso e vibra su una terza molla, corta e frenata.
La descrizione che si scrive
Ogni descrizione è divisa in una span per lettera, con le parole tenute insieme da white-space: nowrap perché una riga non si spezzi a metà parola, e una copia nascosta per chi usa un lettore di schermo. Le lettere compaiono con uno stagger a funzione che conta anche gli spazi, a TYPE_SPEED lettere al secondo, appena il nome tocca la riga.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WIDE | script.js | 3.6 | Quante volte più larga delle altre diventa la colonna aperta (sul telefono un po’ di più). |
SPRING | script.js | [230, 25] | La molla delle colonne: quanto è rigida e quanto è frenata (meno freno, più oscilla). |
FALL | script.js | 0.46 | In quanti secondi il nome cade da in piedi a di piatto. |
BOUNCE | script.js | 4 | Di quanti gradi rimbalza il nome quando tocca la riga (0, niente rimbalzo). |
TYPE_SPEED | script.js | 42 | Quante lettere al secondo si scrivono nella descrizione. |
UPRIGHT | script.js | [72, 320] | Larghezza (da 62 a 125) e peso (da 100 a 900) dei nomi in piedi nelle colonne strette. |
FLAT | script.js | [112, 640] | Larghezza e peso del nome di piatto nella colonna aperta. |
OPEN_FIRST | script.js | 1 | La colonna che si apre da sola dopo l’apertura: 0 è la prima. |
--accent | style.css | #ff3d17 | Il colore della riga sotto il nome aperto, l’unico colore della pagina. |
Quando usarla
Per la pagina dei servizi di uno studio grafico, di un’agenzia o di un libero professionista, per le sezioni di un portfolio o i reparti di un negozio, o per le portate di un menù: da tre a sei voci con un nome corto e una riga di descrizione ciascuna.
Sul telefono
La stessa animazione: le cinque colonne restano in fila, la colonna aperta si fa più larga che sul computer e il pavimento sale verso il centro dello schermo alto. Si tocca o si trascina il dito su una colonna per aprirla; il nome cade, rimbalza e la descrizione si scrive su tre righe.
Con il movimento ridotto
Niente molle, cadute né rimbalzi: la pagina compare in dissolvenza, la colonna puntata è subito larga con il nome già di piatto sulla riga, e la descrizione compare intera in dissolvenza.
Trappole
- Girando il nome intorno al suo angolo in basso, in piedi finiva tutto a sinistra del margine, fuori dalla colonna: va spostato a destra del suo spessore per il seno dell’angolo, così il bordo resta fermo sul margine per tutta la caduta.
- La grandezza del carattere va misurata quando Archivo è arrivato: con il carattere di riserva il nome più lungo usciva dalla colonna aperta. L’apertura aspetta document.fonts.load (al massimo un secondo e mezzo).
- Con il nome posato a 4 pixel fissi sopra il pavimento, la gamba della y di Identity tagliava la riga vermiglia: la distanza è in em (0.06em), così cresce insieme al carattere.
- Se il nome che si richiude scendeva lento, per un attimo restava di piatto in una colonna già stretta e veniva tagliato: si rialza con power3.out, veloce all’inizio, mentre larghezza e peso tornano con calma.
- Il pilota delle anteprime manda pointerleave a ogni passo: per questo uscire non chiude niente, resta aperta l’ultima colonna.
Librerie
GSAP 3.15.0, Archivo (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,0 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 14 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.
