L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Il prima e dopo
La stessa casa di campagna disegnata due volte, a matita e dipinta: il dipinto copre il disegno da un bordo ruvido come una pennellata, che si sposta dove lo si trascina su una molla e mentre corre si increspa come vernice fresca, col manico che si piega con la velocità.
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>Before and after</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/schibsted-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- before and after: the same farmhouse drawn twice, in pencil and painted. Dragging the handle (or pressing
anywhere on the picture) the painting spreads over the sketch with a brushed edge that ripples while it runs
and settles on a spring. The scene is drawn by the script, twice -->
<figure class="ba" data-ba data-autoclic>
<svg class="ba__art" viewBox="0 0 600 420" aria-hidden="true" data-art>
<defs>
<pattern id="ba-hatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(38)">
<line x1="0" y1="0" x2="0" y2="6" stroke="#5b564c" stroke-width="0.9" stroke-opacity="0.55"/>
</pattern>
<clipPath id="ba-cut"><path data-cut/></clipPath>
</defs>
<g data-sketch></g>
<g clip-path="url(#ba-cut)" data-paint></g>
<path class="ba__edge" data-edge/>
</svg>
<span class="ba__tag ba__tag--before" aria-hidden="true" data-before>Sketch</span>
<span class="ba__tag ba__tag--after" aria-hidden="true" data-after>Painting</span>
<div class="ba__handle" role="slider" tabindex="0" aria-label="How much of the painting shows" aria-valuemin="0" aria-valuemax="100" aria-valuetext="" data-handle>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 7 4.5 12l5 5M14.5 7l5 5-5 5"/></svg>
</div>
<figcaption class="ba__caption">The farmhouse, from the first sketch to the painting.</figcaption>
</figure>
</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.
13 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 «Il prima e dopo» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco un’immagine dagli angoli tondi: a sinistra il disegno a matita su carta color avorio di una casa di campagna fra colline, filari, cipressi e una strada, con le nuvole e i tetti e i cipressi tratteggiati; a destra la stessa scena dipinta, cielo azzurro che sfuma nel caldo, colline verdi, casa ocra col tetto rosso; fra le due un bordo ruvido come una pennellata, con sopra un manico bianco tondo, e negli angoli Sketch e Painting. Aprendo la pagina il dipinto entra da destra fino a metà. Trascinando il manico, o premendo in un punto qualsiasi dell’immagine, il bordo va lì su una molla: mentre corre si increspa come vernice fresca e il manico si piega con la velocità, poi si raddrizza; i nomi negli angoli sfumano quando il bordo si avvicina. Sotto, The farmhouse, from the first sketch to the painting.
Come funziona
Una scena, due volte
La scena è un elenco di forme (cielo, nuvole, colline, filari, casa, cipressi, strada) e ognuna dice come si dipinge e come si disegna a matita: con un colore pieno nel dipinto, e nel disegno col colore della carta e un contorno, solo un contorno, o un tratteggio fatto con un pattern SVG di righe inclinate. Lo script la disegna una volta per strato.
Il bordo ruvido
Il dipinto è ritagliato da un clipPath che va dal bordo fino al lato destro. Il bordo è una linea di punti ogni 6 pixel: la loro x è la posizione più una ruvidità fissa (tre onde di lunghezze diverse, alte ROUGH) più un’increspatura che cresce con la velocità (WOBBLE) e scorre nel tempo; una linea scura appena visibile ne segna il contorno.
La molla
Il bordo va verso il punto voluto con una molla (SPRING), calcolata sul ticker di GSAP a passi di 4 millisecondi: premendo sull’immagine ci scivola, e dopo un attimo diventa più rigida e segue la mano da vicino; lasciato, torna alla molla morbida.
Il manico e i nomi
Il manico sta sul bordo e si piega di −velocità · 0,025 gradi, fino a 20, poi si raddrizza con la molla; i due nomi negli angoli sfumano negli ultimi 90 pixel prima che il bordo li raggiunga.
Tastiera e anteprima
Il manico è uno slider (role slider): le frecce spostano il bordo del 5 per cento, con Maiuscolo del 20, Inizio e Fine vanno ai capi, e aria-valuetext dice quanta parte di dipinto si vede. Un clic da script sull’immagine (l’anteprima della libreria) manda il bordo in un altro punto.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START | script.js | 0.5 | Dove si ferma il bordo all’apertura della pagina: 0 è tutto dipinto, 1 tutto disegno. |
SPRING | script.js | [140, 0.62] | La molla del bordo: quanto è rigida e quanto è frenata. |
WOBBLE | script.js | 0.022 | Quanto si increspa il bordo con la velocità. |
ROUGH | script.js | 4 | Quanto è ruvido il bordo da fermo, in pixel. |
Quando usarla
Per mostrare un restauro o una ristrutturazione, un progetto prima e dopo, un ritocco fotografico, un rendering accanto al cantiere, uno schizzo accanto all’opera finita.
Sul telefono
L’immagine prende la larghezza dello schermo; col dito si trascina di lato, mentre lo scorrimento verticale della pagina resta libero (touch-action: pan-y), e un tocco porta il bordo in quel punto.
Con il movimento ridotto
Il bordo va subito dove lo si porta, senza molla né increspature, il manico non si piega e il dipinto non entra all’apertura: è già a metà.
Trappole
- Il bordo dritto di un clip-path rettangolare tradisce il trucco: qui il ritaglio è un path coi punti ogni 6 pixel, ruvidi a riposo e increspati in corsa.
- Negli attributi SVG le variabili CSS non valgono: il colore della carta e della matita del disegno si danno come stile, non come attributi fill e stroke.
- Seguire la mano con la stessa molla morbida di un clic darebbe un bordo che arranca dietro al dito: tenuto, la molla diventa quattro volte più rigida e quasi senza rimbalzo.
- Un tratteggio fatto di righe vere andrebbe ritagliato forma per forma: un pattern SVG di righe inclinate riempie qualsiasi forma da solo.
Librerie
GSAP 3.15.0, Schibsted Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,5 KB; le librerie: GSAP 28 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.
