La lavatrice

SVGGSAP, Solo CSSImpegnativaPeso compresso: Demo 12 KBGSAP 28 KBGratisScarica lo zip

Una lavatrice vista di fronte: i panni saltano dal filo dentro l'oblò, l'acqua sale con la schiuma e le bolle, poi risciacquo e centrifuga, con la lavatrice che trema e cammina sul pavimento. Alla fine l'oblò si apre e i panni volano sul filo ad asciugare. Il display conta i minuti; un clic cambia programma.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>La lavatrice</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="banco" data-banco>
    <header class="testo">
      <p class="marchio">Spinwell Launderette</p>
      <h1 class="titolo">In by nine,<br>dry by noon.</h1>
      <p class="frase">Drop your bag on Tannery Street: we wash it, rinse it, spin it and peg it out in the yard to dry in the sun.</p>
      <button class="programma" type="button" data-programma>
        <span class="programma__fondo" aria-hidden="true"></span>
        <svg class="programma__manopola" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8.2" fill="none" stroke="currentColor" stroke-width="1.8" /><path d="M12 12V5.6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" /></svg>
        <span class="programma__scritta">Next program</span>
      </button>
      <p class="ora" aria-live="polite"><span class="ora__etichetta">Now running</span> <span class="ora__nome" data-ora>Cotton 40°, 1200 rpm</span></p>
    </header>

    <div class="palco" data-palco>
      <svg class="scena" data-scena viewBox="30 110 960 575" preserveAspectRatio="xMidYMid meet" role="img" aria-label="A washing machine seen from the front: the clothes tumble behind the round door, the water rises with foam and bubbles, the drum spins and the machine shakes, then the door opens and the clothes fly out to dry on a line. Click to change the program.">
        <defs>
          <radialGradient id="g-cestello" cx="0.5" cy="0.45" r="0.6">
            <stop offset="0" style="stop-color: var(--cestello-chiaro)" />
            <stop offset="1" style="stop-color: var(--cestello)" />
          </radialGradient>
          <linearGradient id="g-corpo" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" style="stop-color: var(--bianco)" />
            <stop offset="0.82" style="stop-color: var(--bianco)" />
            <stop offset="1" style="stop-color: var(--bianco-ombra)" />
          </linearGradient>
          <linearGradient id="g-cromo" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" style="stop-color: var(--cromo-chiaro)" />
            <stop offset="0.5" style="stop-color: var(--cromo)" />
            <stop offset="1" style="stop-color: var(--cromo-chiaro)" />
          </linearGradient>
          <clipPath id="c-oblo"><circle cx="260" cy="445" r="96" /></clipPath>
          <filter id="f-scia" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="4" /></filter>
        </defs>

        <!-- il pavimento della lavanderia -->
        <rect class="pavimento" x="40" y="640" width="940" height="30" rx="6" />
        <path class="piastrelle" d="M160 640V670M300 640V670M440 640V670M580 640V670M720 640V670M860 640V670" />

        <!-- il filo per stendere, coi suoi due pali e le mollette -->
        <g data-stendino>
          <rect class="palo" x="512" y="150" width="10" height="492" rx="4" />
          <rect class="palo" x="968" y="150" width="10" height="492" rx="4" />
          <rect class="palo-testa" x="504" y="146" width="26" height="10" rx="4" />
          <rect class="palo-testa" x="960" y="146" width="26" height="10" rx="4" />
          <path class="filo" data-filo d="M520 170Q745 222 970 170" />
        </g>

        <ellipse class="ombra" data-ombra cx="260" cy="641" rx="176" ry="9" />

        <!-- la lavatrice: il gruppo mosso dal disegno (deriva e tremore), il figlio per GSAP (il sobbalzo) -->
        <g data-macchina>
          <g data-sbuffi></g>
          <g data-corpo>
            <rect class="piede" x="122" y="626" width="34" height="14" rx="3" />
            <rect class="piede" x="364" y="626" width="34" height="14" rx="3" />
            <rect fill="url(#g-corpo)" class="corpo" x="100" y="210" width="320" height="420" rx="18" />
            <path class="linea" d="M100 292H420" />
            <path class="linea" d="M112 598H408" />
            <text class="targa" x="260" y="619">SPINWELL</text>
            <!-- il cassetto del detersivo -->
            <rect class="cassetto" x="118" y="228" width="88" height="44" rx="6" />
            <rect class="cassetto-presa" x="140" y="258" width="44" height="6" rx="3" />
            <!-- il display -->
            <rect class="display" x="218" y="226" width="132" height="50" rx="7" />
            <g class="display__testo" data-display>
              <text class="display__programma" data-d-programma x="228" y="243">COTTON 40°</text>
              <text class="display__tempo" data-d-tempo x="228" y="268">1:28</text>
              <text class="display__fase" data-d-fase x="340" y="267">LOAD</text>
            </g>
            <!-- la manopola dei programmi -->
            <circle class="manopola-fondo" cx="384" cy="251" r="25" />
            <g data-manopola>
              <circle class="manopola" cx="384" cy="251" r="19" />
              <rect class="manopola-segno" x="382" y="234" width="4" height="12" rx="2" />
            </g>

            <!-- l'interno visto dall'oblò -->
            <circle class="incavo" cx="260" cy="445" r="124" />
            <circle class="guarnizione" cx="260" cy="445" r="104" />
            <g clip-path="url(#c-oblo)">
              <circle fill="url(#g-cestello)" cx="260" cy="445" r="98" />
              <g data-cestello></g>
              <g data-dentro></g>
              <g data-scia filter="url(#f-scia)" opacity="0"></g>
              <path class="getto" data-getto d="M196 352Q214 372 212 420" opacity="0" />
              <path class="acqua" data-acqua d="" />
              <g data-bolle></g>
              <g data-schiuma></g>
            </g>

            <!-- l'oblò: ruota sulla cerniera a sinistra -->
            <g data-porta>
              <circle class="anello" stroke="url(#g-cromo)" cx="260" cy="445" r="106" />
              <circle class="anello-dentro" cx="260" cy="445" r="96" />
              <circle class="vetro" data-vetro cx="260" cy="445" r="94" />
              <path class="riflesso" data-riflesso d="M196 396A80 80 0 0 1 232 366M188 420A80 80 0 0 1 192 408" />
              <rect class="maniglia" x="364" y="424" width="14" height="42" rx="6" />
            </g>
            <rect class="cerniera" x="134" y="410" width="12" height="22" rx="3" />
            <rect class="cerniera" x="134" y="458" width="12" height="22" rx="3" />
          </g>
        </g>

        <!-- i panni quando sono fuori dalla lavatrice (sul filo o in volo) -->
        <g data-fuori></g>
        <g data-mollette></g>
      </svg>
    </div>
  </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.

48 valori da cambiare

Apri il Playground

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 «La lavatrice» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

All'apertura la lavatrice cade dall'alto e atterra con un rimbalzo e due sbuffi di polvere, e i quattro panni (una maglietta rossa, un calzino giallo, dei pantaloncini blu e un asciugamano verde a righe) piombano sul filo, che si abbassa e oscilla. Poi uno alla volta saltano dalle mollette, che si aprono, e volano con una capriola dentro l'oblò aperto; la porta si chiude sbattendo e la lavatrice sobbalza. Sul display la scritta passa da LOAD a WASH e i minuti cominciano a scendere. Entra un getto d'acqua, il livello sale ondeggiando, le bolle salgono dal fondo e la schiuma cresce sulla superficie; il cestello coi suoi fori e le sue pale gira e i panni ruzzolano: salgono lungo la parete e ricadono. Nel risciacquo un po' d'acqua se ne va, ne arriva di più chiara, la schiuma quasi sparisce e il cestello gira al contrario. Poi lo scarico e la centrifuga: i panni si schiacciano contro il vetro, il cestello accelera fino a diventare una scia di colori, il display mostra i giri al minuto, la lavatrice trema e a ogni scossa cammina un po' sul pavimento, con uno sbuffo sotto i piedi. Frena, i panni ricadono sul fondo, compare DONE e 0:00, l'oblò si apre e i panni volano uno alla volta sul filo, che rimbalza a ogni arrivo; la lavatrice torna al suo posto con un saltello e si ricomincia. Un clic sulla scena o sul pulsante «Next program» gira la manopola e passa al programma dopo (Cotton, Delicate, Quick, Wool, Extra hot): cambiano temperatura, minuti, colore dell'acqua, schiuma, giri, quanto trema e quanto cammina. Testi della lavanderia inventata Spinwell.

Come funziona

Tutto da pochi numeri

Lo stato della lavatrice è un oggetto di numeri: porta (0 chiusa, 1 aperta), acqua, schiuma, mucchio (0 panni fermi sul fondo, 1 ruzzolano), spin (0 liberi, 1 schiacciati contro il vetro), lav e cen (i giri del lavaggio e della centrifuga), trema, mx (quanto ha camminato), progresso e fase. Ogni panno ha p (0 sul filo, 1 nel cestello) e colpo, il rimbalzo dopo un atterraggio. Una funzione disegna, chiamata dal ticker di GSAP a ogni fotogramma, ricava da questi numeri tutte le forme.

I panni che ruzzolano

Ogni panno fa una capriola ogni 150° di cestello: per il 72% del giro sale lungo la parete fino a 110° dal fondo, poi cade giù con y che cresce come v² (la gravità) e x che torna al centro, e arriva esattamente dove la salita ricomincia. Quattro panni sfasati di un quarto non cadono mai insieme. La posizione ferma sul fondo, quella che ruzzola e quella schiacciata contro il vetro si mescolano con mucchio e spin; le rotazioni si mescolano sempre per la via più corta, senza giri a vuoto.

Dentro e fuori dall'oblò

Un panno in volo sta in un livello sopra tutto il disegno; quando è nel cestello e la porta comincia a chiudersi passa nel livello ritagliato dal cerchio dell'oblò, sotto l'acqua e il vetro. Il volo è una retta fra il filo e il fondo del cestello con un arco di sin(π·p) × 150 e un giro intero di rotazione; anche la scala va da 1 a 0,58 e il punto d'appoggio passa dalla molletta al centro del panno. Il filo è una curva che si abbassa col peso dei panni appesi e rimbalza quando ne arriva uno.

Acqua, schiuma e bolle

La superficie dell'acqua è una linea di punti con un'onda e una pendenza che segue il verso del cestello; la schiuma sono diciassette cerchi bianchi che galleggiano sulla superficie e respirano, le bolle salgono a velocità diverse e spariscono quando la passano. La centrifuga è un tween da 0 a 1 con una curva fatta a mano, l'integrale di una velocità a trapezio: sale, tiene e frena. Quando gira forte i panni si sbiadiscono e al loro posto si vede un anello sfocato coi loro colori.

La regia e il clic

Una timeline ripetuta all'infinito fa tutta la storia, dal carico al ritorno al suo posto, e finisce esattamente com'era cominciata; anche la brezza sul filo fa un numero intero di oscillazioni a ogni giro, così il ricominciare non si vede. Il display legge fase e progresso e conta i minuti del programma. Il clic non ferma niente: cambia il programma, e un tween porta piano verso i nuovi valori il fattore dei giri (che fa tremare e camminare di più o di meno), la schiuma e il colore dell'acqua, mentre la manopola scatta con un elastico.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`DURATA_LAVAGGIO`	script.js	`6`	Secondi di lavaggio; il risciacquo dura 0,8 volte tanto.
`GIRI_CENTRIFUGA`	script.js	`14`	Giri del cestello nella centrifuga, col programma da 1200 giri.
`TREMORE`	script.js	`3`	Quanto trema la lavatrice in centrifuga.
`SPOSTAMENTO`	script.js	`18`	Quanto cammina sul pavimento durante la centrifuga.
`SCHIUMA`	script.js	`1`	Quanta schiuma fa il detersivo.
`BOLLE`	script.js	`16`	Bolle che salgono nell'acqua.
`--acqua, --accento, --display-testo`	style.css	`#4C9BE0, #E8505B, #8DF0C4`	L'acqua del primo programma, il pulsante e la scritta del display.

Provali nel Playground

Quando usarla

Per lavanderie, tintorie, detersivi, servizi di ritiro e consegna del bucato, case vacanza e app per la casa: una scena allegra che racconta tutto il servizio in mezzo minuto e invita a toccarla.

Sul telefono

Il testo della lavanderia va sopra e la scena sotto, più piccola ma uguale: stessi panni, stessa acqua, stessa centrifuga e stesso filo. Si cambia programma toccando la scena o il pulsante.

Con il movimento ridotto

La lavatrice è ferma a metà lavaggio, con la porta chiusa, i panni sul fondo, l'acqua e la schiuma, e compare in dissolvenza; il clic cambia programma: il display e la scritta svaniscono e ricompaiono, l'acqua cambia colore, niente si sposta.

Trappole

Un panno che entra nell'oblò deve passare dal livello di sopra a quello ritagliato dal cerchio solo quando è già tutto dentro il cestello e la porta comincia a chiudersi: prima verrebbe tagliato in volo, dopo passerebbe sopra il vetro.
Mescolare due rotazioni con un semplice mix fa girare il panno di centinaia di gradi in un attimo, perché la rotazione del ruzzolare cresce sempre: va mescolata la differenza ridotta fra −180° e 180°.
Il verso del cestello si cambia solo quando i panni sono fermi sul fondo (mucchio a 0): a metà capriola il panno salterebbe dall'altra parte del cestello.
Una classe CSS con opacity batte l'attributo opacity: per spegnere le bolle va usato style.opacity, se no restano visibili anche senz'acqua.
Il sobbalzo con GSAP va sul figlio della lavatrice: il gruppo esterno ha già il transform scritto a ogni fotogramma per il tremore e la camminata, e GSAP lo cancellerebbe.

Librerie

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 11 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.