Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
I dischi che scivolano
Le novità di un negozio di dischi, ogni vinile nella sua busta: quando la fila parte i dischi restano indietro, scivolano fuori dal lato aperto e rotolano facendo girare l’etichetta; quando si ferma rientrano e battono sul fondo, e la busta fa un piccolo scatto. Il disco davanti sta mezzo fuori, col suo nome sotto.
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 sliding records</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/syne@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/host-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the records: a row of sleeves, each with its record inside. The row moves on a spring and the records feel
it: they slide out of the open side of their sleeves and roll when it sets off, knock the back of the sleeve
when it stops, and the record in front of you stands half out. The sleeves and the records are drawn by the
script -->
<section class="crate" role="region" aria-roledescription="carousel" aria-labelledby="crate-title" data-crate>
<header class="crate__head">
<h2 class="crate__title" id="crate-title">New in this week</h2>
<div class="crate__arrows">
<button class="arrow" type="button" aria-label="Previous record" data-prev>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path class="arrow__step" d="M14 6.5 8.5 12l5.5 5.5"/>
<path class="arrow__wrap" d="M8 9.5h6.5a4 4 0 0 1 0 8H10M10.5 6.5 7.5 9.5l3 3" transform="matrix(-1 0 0 1 24 0)"/>
</svg>
</button>
<button class="arrow" type="button" aria-label="Next record" data-next data-autoclic>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path class="arrow__step" d="M10 6.5 15.5 12 10 17.5"/>
<path class="arrow__wrap" d="M8 9.5h6.5a4 4 0 0 1 0 8H10M10.5 6.5 7.5 9.5l3 3"/>
</svg>
</button>
</div>
</header>
<div class="crate__view" tabindex="0" aria-describedby="crate-help" data-view>
<div class="crate__row" data-row></div>
</div>
<p class="sr" id="crate-help">Arrow keys to move along the records, Home and End for the first and the last.</p>
<div class="crate__foot">
<div class="caption" data-caption>
<p class="caption__title" data-cap-title></p>
<p class="caption__artist" data-cap-artist></p>
</div>
<div class="caption caption--end" data-caption-end>
<p class="caption__price" data-cap-price></p>
<p class="caption__meta" data-cap-meta></p>
</div>
</div>
<div class="rail" aria-hidden="true"><span class="rail__thumb" data-thumb></span></div>
<p class="sr" aria-live="polite" data-live></p>
</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.
53 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 «I dischi che scivolano» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, da solo al centro, il carosello delle novità di un negozio di dischi: in alto New in this week e due pulsanti tondi con le frecce; sotto, una fila di buste quadrate di 300 pixel con le copertine disegnate (un pianeta col suo anello arancio su blu cobalto, PAPER WEATHER a lettere enormi su ocra con tre onde, cerchi corallo e due corsie su verde petrolio, un fico viola con un fulmine, HUM in crema su rosso, archi blu notte con un sole arancio, una scala crema su nero). La prima, Slow Orbit di Ines Varga, ha il suo disco nero mezzo fuori a destra, coi solchi, il riflesso della lampada e l’etichetta arancio col titolo scritto in tondo; le altre buste mostrano un filo di disco sul lato aperto. Sotto la fila il titolo, l’artista, il prezzo (€28) e LP, 2026, e una guida sottile con una barretta scura che dice dov’è il disco nella fila. Premendo la freccia avanti la fila parte verso sinistra: i dischi restano indietro e scivolano fuori dalle buste rotolando, con l’etichetta che gira; poi la fila frena, i dischi rientrano e battono sul fondo, la busta fa un piccolo scatto, e il disco nuovo esce rotolando fino a metà, va un po’ oltre e torna. Un disco che esce troppo sbatte contro la busta dopo, che si inclina un attimo. Il nome sotto scorre nel verso della corsa e la barretta corre e si allunga mentre la fila va. Sull’ultimo disco la freccia avanti diventa un ricciolo e riporta all’inizio attraversando tutta la fila; sul primo la freccia indietro porta all’ultimo. La fila si trascina col mouse o col dito, si lancia e si aggancia sulla busta più vicina, e oltre i capi tira come un elastico. Col mouse sopra una busta il suo disco esce un poco; un clic su una busta di lato ci va. Con la fila selezionata funzionano le frecce della tastiera, Home e End.
Come funziona
Un numero per la fila
La fila è un numero solo, p: il disco davanti come frazione. Una molla lo porta al disco scelto, a = ω²·(meta − p) − 2ζω·v, con ω e ζ da GLIDE; la rigidità si divide per la radice della distanza, così un salto di sei dischi parte con la stessa spinta di un passo solo e dura solo un po’ di più. Ogni busta sta a (i − p) volte il passo, in pixel.
La spinta che sentono i dischi
Quella stessa a, moltiplicata per il passo, è l’accelerazione della fila in pixel, già liscia perché la calcola la molla e non la differenza fra due fotogrammi. Ogni disco è una massa su una molla (SPRING) verso il suo posto, OUT per quello davanti e REST per gli altri, e la fila che accelera lo spinge dall’altra parte: per PUSH e per due terzi, quanto sente un disco che rotola sul bordo (il suo momento d’inerzia è mezzo m r²).
Il fondo e la busta dopo
Sotto lo zero c’è il fondo della busta: il disco rimbalza con KNOCK della sua velocità e la busta prende il 22 per cento del colpo, scattando su una sua molla, un po’ di lato e un po’ girata. Dall’altra parte il disco arriva al massimo alla busta dopo, che colpisce allo stesso modo; l’ultimo della fila fino a due terzi della busta.
Rotola, e la luce resta
Un disco che rotola gira di quanto è andato diviso il raggio: l’etichetta, un SVG col titolo e il lato scritti in tondo con textPath, ruota di u / R. I solchi sono un repeating-radial-gradient con le pause fra i brani; il riflesso è un conic-gradient in uno strato che non gira, come la lampada che sta ferma.
Mani, tasti e capi
Col mouse o col dito la fila insegue il puntatore su una molla rigida, così anche lì la spinta è liscia, e oltre i capi su un elastico. Lasciata, prende la velocità degli ultimi 90 millisecondi, guarda dove arriverebbe in THROW secondi e si aggancia sul disco più vicino; touch-action pan-y lascia al dito lo scorrimento della pagina in verticale. Frecce, Home, End e la rotella orizzontale; i pulsanti in fondo diventano un ricciolo che porta all’altro capo.
Il passo e il telefono
Il passo fra le buste lo calcola lo script: la busta dopo comincia --gap pixel dopo il disco che sporge, così a riposo il disco non copre niente. Il gruppo busta più disco sta in mezzo; quando non ci sta, la busta si allinea al titolo e il disco arriva al bordo dello schermo, dove la fila esce dai margini. Quando tutto è fermo il ciclo si spegne.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
OUT | script.js | 0.46 | Quanto il disco davanti esce dalla busta, in parti del lato della busta. |
REST | script.js | 0.05 | Quanto spuntano dalle buste gli altri dischi quando niente si muove. |
PUSH | script.js | 1.3 | Quanto i dischi sentono la fila che si muove: 0 per niente. |
SPRING | script.js | [110, 0.3] | La molla che riporta un disco al suo posto: quanto è rigida e quanto è frenata. |
KNOCK | script.js | 0.35 | Quanta velocità tiene un disco quando batte sul fondo della busta. |
GLIDE | script.js | [6.5, 0.8] | La molla della fila: quanto in fretta arriva a un disco e quanto è frenata. |
THROW | script.js | 0.22 | I secondi che una fila lanciata corre ancora prima di essere presa (quanto va lontano un lancio). |
RECORDS | script.js | [['Slow Orbit', 'Ines Varga', 'LP, 2026', '€28', 'orbit'], …] | I dischi: titolo, artista, formato e anno, prezzo, copertina (orbit, weather, swim, fig, hum, radio, stairs). |
--size | style.css | 300px | Il lato di una busta (260 sul telefono). |
--gap | style.css | 24px | Lo spazio fra il disco che esce e la busta dopo. |
Quando usarla
Per le novità di un negozio di dischi o di una libreria, i prodotti in evidenza di un negozio online, gli album di un’etichetta, i podcast o le playlist di un’app: dove ogni cosa ha una copertina quadrata e vale la pena tirarla un po’ fuori dalla fila.
Sul telefono
Le buste scendono a 260 pixel e la fila arriva ai bordi dello schermo: la busta davanti si allinea al titolo, a 16 pixel dal bordo, e il suo disco esce di 120 pixel fino al bordo destro, appena sfumato. Il dito trascina e lancia la fila (su e giù scorre la pagina), i pulsanti sono di 42 pixel e un tocco su una busta di lato ci va.
Con il movimento ridotto
La fila non corre: si dissolve e ricompare già sul disco nuovo, coi dischi già al loro posto (cambiano a metà della dissolvenza); niente scivolamenti, rimbalzi o scatti delle buste, e il mouse sopra una busta non tira fuori niente. Il nome cambia in dissolvenza e il componente entra solo in dissolvenza. Trascinando, la fila segue la mano, e lasciata si dissolve sul disco più vicino.
Trappole
- Con la molla della fila troppo rapida la spinta durava un attimo e i dischi, chiusi nelle buste, non facevano in tempo a muoversi: l’effetto non si vedeva. La fila è diventata più morbida, i dischi stanno su una molla più tenera e a riposo ognuno spunta di un filo (REST), così si vede partire.
- Il disco davanti copriva il titolo della copertina dopo. Il passo fra le buste ora lo calcola lo script dalla sporgenza del disco, e un disco che scivola troppo si ferma contro la busta dopo, che prende il colpo, invece di passarle sopra.
- L’accelerazione presa dalla differenza fra due fotogrammi è rumorosa (i fotogrammi non arrivano a intervalli uguali) e farebbe tremare i dischi: si usa quella che la molla calcola a ogni passo, e anche col dito la fila insegue il puntatore su una molla rigida invece di saltare dove è il dito.
- Un disco deve stare sotto la sua busta ma sopra quella dopo: il disco è dentro l’elemento della sua busta e gli elementi hanno uno z-index che cala da sinistra a destra.
- Sul telefono il gruppo busta più disco, centrato, lasciava il disco quasi tutto dentro, con uno spicchio d’etichetta: quando il gruppo non ci sta la busta si allinea al titolo e il disco arriva al bordo dello schermo.
- Col movimento ridotto i dischi cambiavano posto un attimo prima che la fila sparisse: ora cambiano a metà della dissolvenza.
Librerie
GSAP 3.15.0, Syne (font variabile) 5.3.0, Host Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 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.
