Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
Le camere in quota
Le camere di un piccolo albergo, nello stile minimal: cinque nomi stretti e leggeri. Sotto il puntatore il nome si allarga con l’asse wdth e prende peso quanto è grande la sua camera, gli altri si fanno grigi, e una sola quota vermiglia sottile scivola su una molla fino alla riga e si allunga ai metri quadri della camera, alla stessa scala per tutte, mentre il numero conta.
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>Rooms to measure</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">Halden</span>
<span class="top__note">Rooms</span>
</header>
<!-- the rooms of a small hotel, one name per row, all narrow at rest. Under the pointer the name widens and takes
weight as much as its room is big, and one thin dimension line glides to it and stretches to the room's floor
area, while the square metres count -->
<ul class="rooms" aria-label="Rooms" data-rooms>
<li class="quota" aria-hidden="true" data-quota>
<i class="quota__line" data-quota-line></i>
<i class="quota__tick quota__tick--start"></i>
<i class="quota__tick quota__tick--end" data-quota-end></i>
<span class="quota__read" data-quota-read>0 m²</span>
</li>
</ul>
<p class="hint" data-hint>Point at a room</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.
27 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 camere in quota» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo, in alto il nome di un piccolo albergo inventato, Halden, e a destra Rooms; in mezzo cinque nomi di camere grandi, uno sotto l’altro, in Archivo stretto e leggero: Single, Double, Garden room, Junior suite e Loft. All’apertura i nomi salgono uno dopo l’altro da una fessura. Sotto il puntatore il nome della camera si allarga sull’asse della larghezza e prende peso, di più quanto più la camera è grande: la Single appena, il Loft fino in fondo; gli altri nomi si stringono di un poco e diventano grigi. Sotto il nome una quota vermiglia sottile, una riga con una tacca verticale a ogni estremo, si apre dal margine sinistro e si allunga fino ai metri quadri della camera, alla stessa scala per tutte: 16 m² è una riga corta, 68 m² attraversa quasi tutta la pagina. In fondo alla quota il numero conta mentre si allunga. Passando a un’altra camera la stessa quota scivola su una molla alla riga nuova e cambia lunghezza, andando un filo oltre e tornando; quando arriva la tacca finale ha un piccolo sussulto. Uscendo dall’elenco la quota si richiude verso sinistra e i nomi tornano tutti uguali.
Come funziona
Una quota sola per tutte le righe
La quota è un elemento solo, assoluto dentro l’elenco: una riga di un pixel scalata con scaleX, una tacca fissa all’inizio e una alla fine spostata con translateX, il numero subito dopo. La sua lunghezza è l’area della camera divisa per quella più grande, per la larghezza dell’elenco meno il posto del numero: così le camere si confrontano a colpo d’occhio.
Le molle nel ticker
Ogni fotogramma, nel ticker di GSAP, la quota segue la riga scelta con una molla (LINE_SPRING) in verticale e un’altra in lunghezza, a piccoli passi di 1/240 di secondo così la molla è uguale a ogni frequenza dello schermo. Quando arriva entro un pixel, la tacca finale riceve un colpo su una terza molla molto rigida e fa un piccolo sussulto in altezza.
Il nome largo quanto la camera
Archivo è variabile in larghezza (62–125) e peso (100–900). Il nome sotto il puntatore va da WIDTH[0] a WIDTH[0] + (WIDTH[1] − WIDTH[0]) × area / area massima, e lo stesso per il peso: la camera più piccola si allarga appena, la più grande fino in fondo. Ogni nome ha le sue molle (NAME_SPRING) sui due assi, scritti in font-variation-settings solo quando cambiano.
Il numero che conta
Il numero in fondo alla quota è la lunghezza attuale riportata in metri quadri, quindi conta mentre la riga si allunga; non supera mai l’area della camera (né quella di partenza), anche quando la molla va oltre.
Puntatore, dito e tastiera
La riga scelta si calcola dalla y del puntatore dentro l’elenco, così basta passare a destra del nome. Col dito un tocco sceglie la camera e la lascia scelta, trascinando si cambia, un tocco fuori la lascia andare; un tocco o un mouse arrivati durante l’apertura si tengono per quando finisce. Le righe hanno tabindex e il fuoco della tastiera fa lo stesso.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
ROOMS | script.js | [['Single', 16], ['Double', 24], …] | Le camere: nome e superficie in metri quadri. |
WIDTH | script.js | [80, 125] | L’asse della larghezza di un nome a riposo e della camera più grande sotto il puntatore (da 62 a 125). |
WEIGHT | script.js | [300, 680] | Il peso di un nome a riposo e della camera più grande sotto il puntatore (da 100 a 900). |
LINE_SPRING | script.js | [260, 26] | La molla della quota: quanto è rigida e quanto è frenata (meno freno, più oscilla). |
NAME_SPRING | script.js | [210, 20] | La molla dei nomi sui loro assi. |
UNIT | script.js | 'm²' | L’unità scritta dopo la superficie (per esempio sq ft). |
Quando usarla
Per l’elenco delle camere di un albergo, di un B&B o di una casa vacanze, per i tagli degli appartamenti di un’agenzia, per gli spazi in affitto di un coworking o le sale di un locale per eventi: dove conta confrontare le misure. Funziona con qualunque grandezza da paragonare (posti a sedere, metri, chili) cambiando ROOMS e UNIT.
Sul telefono
Le stesse animazioni a misure adattate: nomi più piccoli e quota più corta. Toccando una camera la si sceglie e resta scelta, trascinando il dito si passa alle altre e la quota segue, un tocco fuori la richiude. Il suggerimento in fondo dice Touch a room.
Con il movimento ridotto
Niente molle: la quota compare già sulla riga e già lunga quanto la camera, con una breve dissolvenza, e scompare allo stesso modo; i nomi cambiano larghezza, peso e colore senza oscillare. All’apertura nomi e intestazione compaiono in dissolvenza.
Trappole
- Il puntatore già sopra l’elenco durante l’apertura non faceva niente: gli eventi arrivano prima che l’elenco sia pronto. L’ultima posizione del mouse (e del dito) si tiene e si usa appena l’apertura finisce.
- Il numero in fondo alla quota, calcolato dalla lunghezza, mostrava 70 m² per un Loft di 68 mentre la molla andava oltre: ora non supera mai l’area della camera.
- L’anteprima muove un puntatore finto che manda pointerleave da ogni elemento che lascia: si ascolta solo pointerout senza destinazione e fuori dalla finestra per sapere che il mouse se n’è andato.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,8 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
