Il menu che si apre dal pulsante
Menu, Transizioni, Testo
Gratis
Tutti i componenti
Le recensioni che scorrono
Le parole di un ospite alla volta, in grande, sotto virgolette del suo colore: ogni pochi secondi le righe se ne vanno verso l’alto una dopo l’altra e le nuove salgono al loro posto un po’ inclinate, le virgolette saltano nel colore nuovo, e sotto ogni ospite una barra del tempo si riempie mentre parla.
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 reviews that roll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/playfair-display@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/karla@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the reviews: one guest's words at a time, changing line by line, with the guests' tiles under them and a bar
under each tile that fills while their review is showing -->
<section class="reviews" role="region" aria-roledescription="carousel" aria-label="Guest reviews" data-reviews>
<span class="reviews__mark" aria-hidden="true" data-mark>“</span>
<div class="reviews__slides" aria-live="off" data-slides></div>
<div class="reviews__foot">
<div class="reviews__people" data-people></div>
<div class="reviews__controls">
<button class="ctl" type="button" aria-label="Previous review" data-prev>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 6 8.5 12l6 6"/></svg>
</button>
<button class="ctl" type="button" aria-label="Next review" data-next>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 6l6 6-6 6"/></svg>
</button>
<button class="ctl" type="button" aria-label="Pause the reviews" data-pause>
<svg viewBox="0 0 24 24" aria-hidden="true"><path class="ctl__pause" d="M9 6.5v11M15 6.5v11"/><path class="ctl__play" d="M8.5 6.2v11.6L18 12z"/></svg>
</button>
</div>
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/SplitText.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.
24 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 recensioni che scorrono» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero grandi virgolette color pesca e sotto, in un carattere con le grazie, le parole di Marta Silva: We stayed four nights and it felt like a week of Sundays. Breakfast under the fig tree, a room that smelled of lavender, and nobody in a hurry. Poi il suo nome e Lisbon, stayed in May. Sotto ancora cinque tessere colorate con le iniziali (MS, JB, AT, LF, TW), quella di chi parla alzata e accesa, ognuna con una barra sottile sotto, e a destra tre pulsanti tondi: indietro, avanti, pausa. La barra sotto chi parla si riempie in sei secondi; piena, le righe se ne vanno verso l’alto una dopo l’altra dietro le loro maschere, le nuove salgono un po’ inclinate e si raddrizzano, il nome e il luogo scorrono, le virgolette saltano nel colore del nuovo ospite (azzurro, lavanda, giallo, verde) e la sua tessera fa un balzo; le barre di prima restano piene, quelle dopo vuote. Col puntatore sopra la barra si ferma, e così con pausa, che diventa play. Avanti e indietro, le tessere, le frecce della tastiera e il dito che scorre cambiano recensione; andando indietro le righe vanno verso il basso.
Come funziona
Le righe dietro le maschere
Ogni recensione è una figura con le parole, il nome e il luogo; SplitText le taglia in righe, ognuna nella sua maschera (mask lines). La recensione che esce manda le righe in su del 108 per cento una dopo l’altra (power2.in) e poi si toglie; quella che entra fa salire le righe dal 105 per cento sotto, ruotate di TILT gradi dal loro angolo in alto a sinistra, a STAGGER secondi l’una dall’altra, con expo.out.
Due recensioni nello stesso posto
Le figure stanno nella stessa cella della griglia (grid-area 1 / 1), così quella che esce e quella che entra si incrociano nello stesso posto; il riquadro tiene l’altezza della recensione più lunga (misurate tutte una volta, invisibili, all’inizio e quando cambia la larghezza), così niente sotto salta.
Il colore e le virgolette
Il colore è una variabile CSS (--tone) che GSAP porta dal colore di un ospite a quello del successivo; le virgolette saltano con elastic.out da 0,55 e −16 gradi, intorno a un punto in basso a sinistra del segno (sono larghe quanto se stesse, fit-content).
Le barre del tempo
La barra della recensione in corso è uno scaleX da 0 a 1 in SHOW secondi, senza ease; alla fine arriva la recensione dopo. Il puntatore sopra (il mouse), la tastiera dentro (focus-visible) o il pulsante pausa la fermano; da ferma il riquadro è aria-live polite, mentre scorre off.
Tastiera e dito
È una regione con aria-roledescription carousel; le tessere sono pulsanti con aria-current, le frecce della tastiera cambiano recensione e un dito che scorre di lato sulle parole (touch-action pan-y) passa alla successiva o alla precedente. Col movimento ridotto le recensioni aspettano il pulsante play.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SHOW | script.js | 6 | I secondi in cui una recensione resta prima della successiva. |
STAGGER | script.js | 0.07 | I secondi fra una riga e la successiva mentre salgono. |
TILT | script.js | 4 | Quanto è inclinata una riga quando comincia a salire, in gradi. |
REVIEWS | script.js | [{ name: 'Marta Silva', when: 'Lisbon, stayed in May', tone: '#f2a98a', words: '…' }, …] | Le recensioni: nome, provenienza e quando, colore, parole. |
Quando usarla
Per le recensioni degli ospiti di una struttura, le testimonianze dei clienti, le citazioni della stampa, i commenti su un prodotto: dove poche frasi dette bene valgono più di una lista.
Sul telefono
Le parole rimpiccioliscono fino a 22 pixel, le tessere e i pulsanti vanno sotto, su due righe; col dito si scorre di lato sulle parole per cambiare recensione.
Con il movimento ridotto
Le recensioni non scorrono da sole, aspettano il pulsante play; cambiando, le parole si sostituiscono senza righe che salgono, le virgolette cambiano colore senza saltare e le tessere si alzano senza balzo.
Trappole
- Le righe dipendono dal carattere: tagliate prima che il font sia caricato vengono sbagliate. Qui la prima recensione aspetta document.fonts.ready, e a ogni cambio di larghezza le righe si tagliano di nuovo.
- Recensioni di lunghezze diverse farebbero saltare tutto quello che c’è sotto: il riquadro prende l’altezza della più lunga, misurata una volta.
- Un elemento a blocco largo quanto la colonna ruota e scala intorno a un punto lontano dal suo disegno: le virgolette sono larghe quanto se stesse (fit-content), o il loro salto passerebbe sopra il testo.
- Un carosello che si muove da solo deve potersi fermare (WCAG 2.2.2): il pulsante pausa, il puntatore sopra e la tastiera dentro lo fermano, e da fermo le recensioni nuove si leggono ad alta voce.
Librerie
GSAP 3.15.0, SplitText (GSAP) 3.15.0, Playfair Display (font variabile) 5.3.0, Karla (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,0 KB; le librerie: GSAP + SplitText 31 KB.
Collaudo
Provata il 3 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
