Continua a scorrere
Transizioni, Scroll
NuovaGratis
Torna alla libreria
I campioni di vernice
Scorri dentro l’anteprima
La cartella colori di un produttore di vernici: una fila di campioni stretti e alti scorre di lato e quello che arriva al centro si allunga fino in cima, poi si allarga fino a riempire lo schermo, e il suo nome si scrive grande da stretto a largo. Poi si richiude nella fila e la pagina tiene una velatura del suo colore. Stile minimal.
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>Paint chips</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>
<!-- the colour card of a made-up paint maker: a row of tall, narrow chips slides sideways as you scroll. The chip
that reaches the middle stretches to the full height, then widens until it fills the screen, and its name writes
itself in big letters, from narrow to wide. Then the name leaves, the chip folds back into the row and the page
keeps a pale tint of it while the next chip slides in -->
<main>
<section class="apertura">
<p class="piccolo">Fennick Paints</p>
<h1 class="titolo">Six colours<br>for quiet rooms.</h1>
<p class="piccolo piccolo--tenue">The autumn card. Scroll.</p>
</section>
<section class="racconto" data-racconto>
<div class="palco" data-palco>
<header class="testa" data-testa>
<p class="marchio">Fennick</p>
<p class="piccolo">Autumn colour card</p>
</header>
<div class="campioni" data-campioni>
<div class="campione" data-campione style="--tinta: var(--clay)" data-nota="A warm earth, sun on brick">
<span class="campione__nome">Clay</span>
</div>
<div class="campione" data-campione style="--tinta: var(--fog)" data-nota="A soft grey with a blue breath">
<span class="campione__nome">Fog</span>
</div>
<div class="campione" data-campione style="--tinta: var(--saffron)" data-nota="A deep yellow, late afternoon">
<span class="campione__nome">Saffron</span>
</div>
<div class="campione" data-campione style="--tinta: var(--moss)" data-nota="A green that sits back">
<span class="campione__nome">Moss</span>
</div>
<div class="campione" data-campione style="--tinta: var(--lagoon)" data-nota="Still water, just before rain">
<span class="campione__nome">Lagoon</span>
</div>
<div class="campione" data-campione style="--tinta: var(--plum)" data-nota="A dark red for the evening">
<span class="campione__nome">Plum</span>
</div>
</div>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">Order a sample pot.</h2>
<p class="piccolo piccolo--tenue">Every colour, in a small tin.</p>
</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/ScrollTrigger.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.
32 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 campioni di vernice» da Animorio e adattala al mio sitoCosa fa
La cartella d’autunno di un produttore di vernici inventato, Fennick, su un bianco caldo con l’inchiostro nero e sei tinte. Mentre lo schermo arriva, sei campioni stretti e alti salgono uno dopo l’altro dal loro piede, ognuno col suo nome scritto in piccolo dal basso verso l’alto. Poi lo schermo si ferma e scorrendo la fila scivola di lato: il campione che arriva al centro si alza di qualche pixel con un piccolo scatto, si allunga fino in cima e in fondo allo schermo e poi si allarga fino a riempirlo, spingendo via i vicini. Il suo nome si scrive grande: le lettere salgono una dopo l’altra nella loro finestra e la parola passa da stretta a larga con un assestamento elastico; sotto si disegna una riga sottile, con una frase sul colore a sinistra e il suo codice a destra. Anche l’intestazione cambia colore, ma solo dove la vernice la copre. Poi il nome esce verso l’alto, la riga scappa a destra, il campione si stringe nella fila prima in larghezza e poi in altezza, con un piccolo rimbalzo, e la pagina resta velata del suo colore mentre arriva il campione dopo. L’ultimo colore resta aperto. Tutto segue lo scorrimento, avanti e indietro.
Come funziona
Ogni campione è grande come lo schermo
Ogni campione è un livello in position absolute grande quanto il palco, col fondo della sua vernice, ritagliato da un clip-path inset() con gli angoli arrotondati. Il campione stretto e quello che riempie lo schermo sono lo stesso elemento: cambia solo il ritaglio. Così il nome grande, la riga e la copia dell’intestazione stanno già al loro posto dentro il campione e si vedono solo dove la vernice c’è.
Numeri al posto delle proprietà
La timeline, legata allo scorrimento con scrub SCRUB, non muove elementi: muove la posizione della fila e, per ogni campione, quattro numeri da 0 a 1 (sale nella fila, si alza, si allunga in altezza, si allarga). A ogni aggiornamento della timeline una funzione rifà tutti i ritagli da quei numeri: il campione più largo decide dove vanno gli altri, che gli restano accanto con lo spazio che cresce.
Prima l’altezza, poi la larghezza
Aprendo, l’altezza va da 0 a 1 con power3.inOut e la larghezza parte poco dopo con expo.inOut: il campione diventa una colonna e poi una parete. Chiudendo si fa il contrario, e l’altezza torna con SETTLE, un back.out: il numero passa un poco sotto lo zero e il campione diventa un attimo più corto della fila prima di posarsi.
Il nome da stretto a largo
Archivo è un carattere variabile con l’asse della larghezza (da 62 a 125). Ogni lettera sta in una finestra con overflow hidden e sale da sotto con yPercent; intanto una variabile CSS --wd, che è il font-stretch della parola, va da NARROW a WIDE con elastic.out. Il corpo si misura prima alla larghezza finale, così la parola entra sempre nello schermo.
La pagina tiene la tinta
Mentre la vernice copre tutto, il fondo del palco passa a un misto fra il bianco della pagina e la vernice (TINT): non si vede cambiare, ma quando il campione si richiude la pagina è velata del suo colore. L’intestazione è copiata dentro ogni campione col colore che si legge su quella vernice (nero o bianco, scelto dalla luminanza): si vede solo dove la vernice la copre.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
STRIP | script.js | 56 | Quanto è largo un campione nella fila, in pixel (al telefono due terzi). |
GAP | script.js | 12 | Lo spazio fra due campioni, in pixel. |
NARROW | script.js | 62 | La larghezza delle lettere grandi quando arrivano, da 62 (strette) a 125 (larghe). |
WIDE | script.js | 112 | La larghezza su cui si posano. |
WEIGHT | script.js | 640 | Il peso del nome grande. |
TINT | script.js | 0.16 | Quanta vernice tiene la pagina quando il campione si richiude: 0 niente, 0,5 tanta. |
SETTLE | script.js | 'back.out(1.8)' | La curva del campione che torna alla sua altezza: il numero fra parentesi è quanto rimbalza. |
SCRUB | script.js | 0.7 | Quanti secondi ci mette il disegno a raggiungere lo scorrimento. |
Quando usarla
Per presentare una palette: la cartella colori di chi vende vernici, tessuti o ceramiche, la collezione di una stagione, le tinte di un marchio nuovo in una pagina di presentazione. Funziona con nomi corti (una parola) e da cinque a otto colori; con più colori la sezione va allungata.
Sul telefono
Uguale, con i campioni più stretti e vicini, la fila che esce dallo schermo a destra e il nome grande in proporzione alla larghezza.
Con il movimento ridotto
Niente spostamenti: la fila è già al suo posto al centro e ogni campione si apre e si chiude con una dissolvenza, col nome già scritto; anche la velatura della pagina arriva in dissolvenza.
Trappole
- Tanti fromTo sullo stesso oggetto (la posizione della fila, il fondo del palco) partono tutti subito con immediateRender: l’ultimo creato vince, e la fila apriva la pagina già spostata sul quinto campione, col fondo del colore sbagliato. Dal secondo in poi serve immediateRender: false.
- Con il nome già scritto (nella versione senza movimento) le lettere grandi si vedevano a pezzi dentro i campioni stretti, perché il ritaglio mostra tutto quello che c’è sotto: nome e riga sono nascosti finché il campione non comincia ad allargarsi.
- Con il letter-spacing negativo la gamba della y e l’occhiello della g escono dalla loro finestra: con overflow hidden restavano tagliati dritti. Le finestre hanno un padding che va oltre la lettera e un margine negativo uguale, così la parola non cambia misura.
- Il colore della pagina scritto in esadecimale va letto come tale: preso come una lista di numeri dava un grigio a caso e la velatura non si vedeva.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,3 KB; le librerie: GSAP + ScrollTrigger 45 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.
