La transizione del rullo da imbianchino

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

Un cambio di pagina ricco e colorato per il sito di un’impresa di imbianchini: al clic il nastro di carta si stende sui bordi, il rullo si carica di vernice nella vaschetta e dipinge la pagina nuova a corsie, giù e su, con le creste ai bordi delle passate, gli schizzi e le colature; poi vola via, la vernice fresca brilla e si asciuga, il nastro si stacca e arriva il titolo nuovo.

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>The painter’s roller transition</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <!-- the first page: a painters and decorators studio, on warm cream walls -->
    <section class="page page--a is-on" data-page="a" aria-label="Rooms">
      <header class="bar">
        <span class="brand"><svg class="brand__mark" viewBox="0 0 20 20" aria-hidden="true"><rect x="2" y="3" width="16" height="7" rx="2"/><path d="M18 6.5h1.2v5H10v3"/><rect x="8.6" y="14" width="2.8" height="5" rx="1"/></svg>Fresh Coat</span>
        <nav class="nav" aria-label="Pages">
          <a class="nav__link is-here" href="#rooms" aria-current="page">Rooms</a>
          <a class="nav__link" href="#colours" data-go="b">Colours</a>
        </nav>
      </header>
      <div class="body">
        <p class="kicker" data-late>Painters &amp; decorators</p>
        <h1 class="title" data-title><span class="title__line"><span class="title__in">Rooms, painted</span></span><span class="title__line"><span class="title__in">by hand.</span></span></h1>
        <p class="lede" data-late>Two coats, crisp edges, no drips left behind. We tape, we roll, we tidy up.</p>
        <a class="go" href="#colours" data-go="b" data-autoclic data-late>
          <span class="go__chip" aria-hidden="true"></span>
          <span class="go__text">See this season’s colour</span>
          <svg class="go__arrow" viewBox="0 0 26 12" aria-hidden="true"><path d="M1 6h22"/><path d="M18.5 1.5 23.5 6l-5 4.5"/></svg>
        </a>
      </div>
      <aside class="chips" data-late aria-hidden="true">
        <span class="chip" style="--c: #efe3cc"><b>Oat milk</b></span>
        <span class="chip" style="--c: #d9b98f"><b>Biscuit</b></span>
        <span class="chip" style="--c: #c9734f"><b>Clay pot</b></span>
      </aside>
      <footer class="foot" data-late><span>London &amp; around</span><span>Free colour visits</span></footer>
    </section>

    <!-- the second page: the colour of the season, a deep lagoon green -->
    <section class="page page--b" data-page="b" aria-label="Colours" aria-hidden="true">
      <header class="bar">
        <span class="brand"><svg class="brand__mark" viewBox="0 0 20 20" aria-hidden="true"><rect x="2" y="3" width="16" height="7" rx="2"/><path d="M18 6.5h1.2v5H10v3"/><rect x="8.6" y="14" width="2.8" height="5" rx="1"/></svg>Fresh Coat</span>
        <nav class="nav" aria-label="Pages">
          <a class="nav__link" href="#rooms" data-go="a">Rooms</a>
          <a class="nav__link is-here" href="#colours" aria-current="page">Colours</a>
        </nav>
      </header>
      <div class="body">
        <p class="kicker" data-late>Colour of the season</p>
        <h1 class="title" data-title><span class="title__line"><span class="title__in">Lagoon,</span></span><span class="title__line"><span class="title__in">deep and calm.</span></span></h1>
        <p class="lede" data-late>A green with a drop of blue, matt on walls, satin on the woodwork.</p>
        <a class="go" href="#rooms" data-go="a" data-autoclic data-late>
          <span class="go__chip" aria-hidden="true"></span>
          <span class="go__text">Back to the rooms</span>
          <svg class="go__arrow" viewBox="0 0 26 12" aria-hidden="true"><path d="M1 6h22"/><path d="M18.5 1.5 23.5 6l-5 4.5"/></svg>
        </a>
      </div>
      <aside class="chips" data-late aria-hidden="true">
        <span class="chip" style="--c: #2c8a83"><b>Shallows</b></span>
        <span class="chip" style="--c: #1f6f6a"><b>Lagoon</b></span>
        <span class="chip" style="--c: #134a47"><b>Deep end</b></span>
      </aside>
      <footer class="foot" data-late><span>London &amp; around</span><span>Free colour visits</span></footer>
    </section>

    <!-- the painting: masking tape, the tray, the roller, ridges, drips and specks -->
    <svg class="paint" data-paint aria-hidden="true">
      <defs>
        <clipPath id="paintClip" clipPathUnits="userSpaceOnUse" data-clip></clipPath>
        <pattern id="nap" width="5" height="7" patternUnits="userSpaceOnUse" data-nap>
          <path d="M1 0v3.4M3.5 2.2v3.6M2.2 4.6v2.4" stroke="rgba(0,0,0,.28)" stroke-width=".9" stroke-linecap="round"/>
          <path d="M4.4 .4v1.8M.4 4v1.6" stroke="rgba(255,255,255,.22)" stroke-width=".8" stroke-linecap="round"/>
        </pattern>
        <pattern id="streak" width="11" height="160" patternUnits="userSpaceOnUse" data-streak>
          <path d="M2.5 0v70M6 88v60M8.5 22v34" stroke="rgba(0,0,0,.1)" stroke-width="1.4"/>
          <path d="M1 50v44M4 110v40M9.5 0v18" stroke="rgba(255,255,255,.12)" stroke-width="1.2"/>
        </pattern>
        <linearGradient id="sleeveShade" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stop-color="#fff" stop-opacity=".34"/>
          <stop offset=".28" stop-color="#fff" stop-opacity=".06"/>
          <stop offset=".7" stop-color="#000" stop-opacity=".08"/>
          <stop offset="1" stop-color="#000" stop-opacity=".34"/>
        </linearGradient>
        <linearGradient id="metal" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stop-color="#e8ecef"/><stop offset=".45" stop-color="#9aa3aa"/><stop offset="1" stop-color="#6c757c"/>
        </linearGradient>
        <linearGradient id="wood" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stop-color="#a86b37"/><stop offset=".45" stop-color="#d49a5e"/><stop offset="1" stop-color="#9a5f2e"/>
        </linearGradient>
        <linearGradient id="trayBody" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stop-color="#f4f1ec"/><stop offset="1" stop-color="#cfc8be"/>
        </linearGradient>
        <linearGradient id="sheen" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stop-color="#fff" stop-opacity="0"/>
          <stop offset=".5" stop-color="#fff" stop-opacity=".42"/>
          <stop offset="1" stop-color="#fff" stop-opacity="0"/>
        </linearGradient>
      </defs>

      <!-- on the fresh paint, clipped to what is painted -->
      <g clip-path="url(#paintClip)">
        <rect class="streaks" data-streaks fill="url(#streak)"/>
        <g data-ridges></g>
        <g data-drips></g>
        <rect class="sheen" data-sheen fill="url(#sheen)"/>
      </g>
      <g data-specks></g>

      <!-- the tray, with its ribbed ramp and a pool of paint -->
      <g class="tray" data-tray>
        <path class="tray__shadow" data-tray-shadow/>
        <path class="tray__body" data-tray-body fill="url(#trayBody)"/>
        <path class="tray__pool" data-tray-pool/>
        <path class="tray__poolshine" data-tray-shine/>
        <g class="tray__ribs" data-tray-ribs></g>
        <path class="tray__lip" data-tray-lip/>
      </g>

      <!-- the roller: wooden handle, wire frame, a fluffy sleeve full of paint -->
      <g class="roller" data-roller>
        <path class="roller__shadow" data-r-shadow/>
        <path class="roller__wire" data-r-wire/>
        <path class="roller__wireshine" data-r-wireshine/>
        <rect class="roller__ferrule" data-r-ferrule fill="url(#metal)"/>
        <path class="roller__handle" data-r-handle fill="url(#wood)"/>
        <g class="roller__grain" data-r-grain></g>
        <circle class="roller__hole" data-r-hole/>
        <g class="roller__sleeve" data-r-sleeve>
          <rect class="sleeve__base" data-s-base/>
          <rect class="sleeve__paint" data-s-paint/>
          <rect class="sleeve__nap" data-s-nap fill="url(#nap)"/>
          <rect class="sleeve__shade" data-s-shade fill="url(#sleeveShade)"/>
          <ellipse class="sleeve__cap" data-s-cap-l/>
          <ellipse class="sleeve__cap" data-s-cap-r/>
        </g>
      </g>
    </svg>

    <!-- masking tape along the top and the bottom edge -->
    <div class="tape tape--top" data-tape aria-hidden="true"><span class="tape__tear"></span></div>
    <div class="tape tape--bottom" data-tape aria-hidden="true"><span class="tape__tear"></span></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.

49 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 transizione del rullo da imbianchino» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Fresh Coat, un’impresa di imbianchini inventata, ha due pagine: le stanze, su pareti color crema, e il colore della stagione, un verde laguna profondo. Al clic su «See this season’s colour» due strisce di nastro di carta si stendono lungo il bordo in alto e in basso, e dal basso sale una vaschetta di plastica con la sua rampa a coste e una pozza di verde. Arriva il rullo, ancora bianco e asciutto, con il manico di legno, la ghiera e il filo d’acciaio: si appoggia nella pozza schiacciandosi un poco, sale e scende due volte sulla rampa, e intanto il pelo si riempie di colore e gira. Poi vola in alto a sinistra e vernicia: giù per la prima corsia, su per la seconda, giù per la terza, ognuna larga quanto il rullo. Ogni appoggio schizza qualche goccia sul muro intorno; dietro il rullo la vernice lascia le righe del pelo e due creste più scure ai bordi della passata, e dalle corsie finite scendono piano due colature con la goccia in fondo. Finita l’ultima corsia il rullo vola via girandosi, una luce passa sulla vernice fresca e le creste, le righe e le colature spariscono mentre si asciuga; il nastro si stacca dal suo capo e le parole della pagina nuova salgono da sotto la loro riga prendendo peso. Un altro clic riporta alle stanze, verniciate di crema.

Come funziona

Le due pagine e il ritaglio

Le due pagine stanno una sopra l’altra. Al clic la pagina nuova diventa visibile sopra la vecchia ma ritagliata da un clipPath SVG (clip-path: url(#paintClip) sull’elemento HTML), che ha un rettangolo per corsia, alto zero: quello che il rullo dipinge è la pagina nuova che si scopre, col suo colore di fondo. Le parole della pagina nuova restano nascoste finché la vernice non è asciutta.

Il rullo

Il rullo è un gruppo SVG col centro del manicotto in 0,0: GSAP lo sposta con x e y e lo gira attorno a quel punto (svgOrigin 0 0). Il manicotto è fatto di quattro strati: la base bianca, la vernice che va da trasparente a piena mentre si carica, il pelo (un pattern di trattini) e un gradiente di luce e ombra. Mentre il rullo si muove, il patternTransform del pelo scorre di quanto si è spostato: il manicotto sembra girare.

Le corsie

Le corsie sono tante quante entrano (quattro sul computer, tre sul telefono), larghe quanto il rullo. Per ognuna un oggetto va da 0 a 1 in LANE_TIME secondi con power1.inOut: a ogni fotogramma il rullo scende (o sale, nelle corsie dispari) e il rettangolo di ritaglio della corsia si allunga fino a poco oltre il rullo. Ogni appoggio comincia con uno schiacciamento di 0,08 secondi avanti e indietro e qualche schizzo che vola via dal punto di contatto.

Creste, righe e colature

Sopra la pagina nuova, nello stesso ritaglio, ci sono le righe del pelo (un pattern di trattini verticali), due creste per corsia (un tratto più scuro e uno più chiaro che tremano un poco) e le colature: un rettangolo arrotondato che si allunga con scaleY dal suo capo in alto e una goccia che scende con lui. Così compaiono solo dove la vernice è già passata.

L’asciugatura e il nastro

Quando il rullo è uscito, una banda di luce a gradiente attraversa la pagina e creste, righe, colature e schizzi svaniscono in 0,9 secondi. Le due strisce di nastro (div con un gradiente a righe e il bordo strappato fatto con clip-path) si staccano dal loro capo destro, poi le righe del titolo salgono da sotto la loro maschera passando da peso 300 a 560.

Movimento ridotto

Con prefers-reduced-motion niente nastro, vaschetta né rullo: la pagina nuova compare in dissolvenza in 0,6 secondi, già composta.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LANES`	script.js	`4`	Le corsie della passata sul computer: il rullo è largo quanto una corsia.
`LANES_PHONE`	script.js	`3`	Le corsie sul telefono.
`LANE_TIME`	script.js	`0.62`	In quanti secondi il rullo fa una corsia.
`DIPS`	script.js	`2`	Quante volte il rullo sale e scende sulla rampa della vaschetta.
`DRIPS`	script.js	`2`	Le colature per ogni corsia.
`SPECKS`	script.js	`7`	Gli schizzi a ogni appoggio del rullo.
`SHEEN`	script.js	`0.42`	Quanto brilla la vernice fresca quando passa la luce (0 niente).
`TAPE`	script.js	`true`	Il nastro di carta sui bordi.
`WORD_TIME`	script.js	`0.8`	In quanti secondi arriva una riga del titolo.
`--cream`	style.css	`#f3ead8`	Il crema delle pareti della prima pagina (e della vernice del ritorno).
`--lagoon`	style.css	`#1f6f6a`	Il verde laguna della seconda pagina e della vernice.
`--accent`	style.css	`#e2582b`	Il terracotta del pulsante.
`--tape`	style.css	`#e9d8a6`	Il colore del nastro di carta.

Provali nel Playground

Quando usarla

Per il cambio di pagina del sito di un’impresa di imbianchini, di un negozio di vernici, di uno studio di interni o di ristrutturazioni, o per passare fra due colori di una collezione.

Sul telefono

Le stesse animazioni con tre corsie invece di quattro, il rullo e la vaschetta più piccoli, il titolo e la mazzetta dei colori ridotti. Un tocco cambia pagina.

Con il movimento ridotto

Niente nastro, vaschetta né rullo: la pagina nuova compare in dissolvenza, già composta.

Trappole

Chrome non applica a un elemento HTML una maschera SVG presa con mask: url(#id), ma un clipPath sì: per scoprire la pagina corsia per corsia serve clip-path: url(#paintClip), con clipPathUnits userSpaceOnUse e il viewBox dell’SVG uguale alle misure del palco in pixel.
Il pattern del pelo è in userSpaceOnUse dentro il gruppo del rullo, quindi viaggia col rullo: per farlo girare non basta muovere il rullo, bisogna far scorrere il suo patternTransform di quanto si è spostato.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.

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

Collaudo

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