Il menù dei foglietti
Transizioni, Hover
NuovaA vita
Torna alla libreria
La griglia liquida
Una griglia di celle a tutto schermo che si riproporziona sotto il puntatore con un ritardo lungo, e un marchio a pastiglie che si apre di scatto.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN.
Il codice di questa animazione è nell’accesso a vita.
L’anteprima resta libera: guardala, rallentala, provala sul telefono.
Accesso a vitaCosa fa
Lo schermo è diviso in celle dai bordi sottili, con raggi diversi: angoli stretti, angoli larghi, lati a pillola. Muovendo il mouse le colonne si allargano e si stringono, le righe salgono e scendono: la griglia insegue il puntatore con un ritardo lungo e sembra liquida. All’ingresso la griglia respira da un po’ più piccola alla sua misura e al centro si monta il marchio: tre pastiglie quadrate che si aprono di scatto alla larghezza della loro parola, e le parole che escono dalla sfocatura. Se nessuno muove niente, la griglia va a spasso da sola.
Come funziona
Misure in variabili CSS
La griglia è fatta di grid annidati; larghezze di colonna e altezze di riga stanno in variabili (--c1, --r1…) usate in grid-template-columns e grid-template-rows. Cambiare una variabile riproporziona tutto senza toccare le celle.
Il ritardo lungo
Lo stato vive in un oggetto di numeri; gsap.quickTo lo fa inseguire la posizione del puntatore in 1,2 secondi con power3, e a ogni fotogramma i numeri diventano variabili CSS. È il ritardo a renderlo liquido.
Pastiglie che si aprono di scatto
Le pastiglie partono quadrate (larghe quanto alte) e vanno alla larghezza misurata della loro parola con una curva personalizzata 0.754, 0.007, 0.094, 0.989: ferma a lungo, poi scatta e frena. Le parole arrivano da blur(6px).
Da sola
Se il puntatore non si muove da due secondi e mezzo, una curva lenta (due seni con velocità diverse) prende il suo posto. Col dito la griglia segue il tocco: sul palco c’è touch-action none.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
RITARDO | script.js | 1.2 | Secondi che la griglia impiega a raggiungere il puntatore: più alto, più liquida. |
MISURE | script.js | c1 34→58vw, r1 70→36%… | Per ogni misura il valore col puntatore a un estremo e all’altro, e su quale asse. |
SCATTO | script.js | 0.754, 0.007, 0.094, 0.989 | La curva delle pastiglie. |
border-radius delle celle | style.css | misti | Tienili diversi fra loro: con un raggio solo sembra una tabella. |
Quando usarla
Per l’apertura di un rapporto, di un evento o di un marchio che vuole sembrare un’interfaccia viva. Le celle vuote sono una scelta: se ci metti immagini, tieni lo stesso ritardo.
Sul telefono
Le celle seguono il dito; senza tocco vanno a spasso da sole. Il marchio si mette in colonna e le etichette laterali spariscono.
Con il movimento ridotto
Griglia ferma, marchio già aperto.
Trappole
- Metti min-width: 0 e min-height: 0 su celle e colonne: senza, una cella non scende sotto il suo contenuto e la griglia non si stringe.
- Non aggiornare le variabili a ogni pointermove direttamente: il bello è il ritardo. Usa quickTo su numeri e scrivi le variabili una volta per fotogramma.
- Misura la larghezza delle parole dopo document.fonts.ready e a fine ingresso togli la larghezza fissa (clearProps), altrimenti girando lo schermo la parola esce dalla pastiglia.
- Il ciclo automatico deve fermarsi quando qualcuno muove il puntatore, altrimenti i due si contendono la griglia.
Librerie
GSAP 3.15.0, CustomEase (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0.
Peso: 8,3 KB dei nostri file.
Collaudo
Provata il 27 settembre 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.
