Il caricamento che diventa marchio
Transizioni, SVG, Testo
NuovaGratis
Torna alla libreria
Le fette che diventano barre
Un grafico a torta a contorno sottile, con la fetta più grande nel colore d’accento: una alla volta le fette si staccano con una molla, scivolano in fila e si raddrizzano in barre lunghe quanto il loro arco, mentre nome e percentuale prendono peso. Poi le barre si piegano e tornano torta. 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>Slices into bars</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>
<main class="stage" data-stage>
<!-- a thin pie chart of where a made-up coffee roaster's orders come from. One at a time the slices spring out,
slide into a row and straighten into bars as long as their own arcs; the name and the share of each bar take
weight as it lands. Then the bars bend back and close into the pie -->
<svg class="figure" data-figure role="img" aria-label="Orders by channel: a pie chart that turns into bars">
<circle class="guide" data-guide r="100" />
<g class="pie" data-pie></g>
<g class="labels" data-labels aria-hidden="true"></g>
</svg>
<p class="caption">
<span class="caption__name">Brindle</span>
<span class="caption__note">orders by channel, 2025</span>
</p>
</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.
22 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 fette che diventano barre» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo si disegna un cerchio sottilissimo, poi la torta lo riempie girando in senso orario, fetta dopo fetta, con un piccolo assestamento della rotazione: quattro canali di vendita di una torrefazione inventata, Brindle. La fetta più grande, Online, si riempie di vermiglio. Dopo un attimo la fetta arancione salta fuori dalla torta di un dito, con una molla, poi scivola verso destra e intanto si raddrizza: l’arco esterno si apre come una riga che si srotola e lo spicchio si assottiglia, finché diventa una barra dritta, lunga esattamente quanto il suo arco. Appena arriva si schiaccia di un capello e si assesta; sopra sale il nome, che prende peso, e accanto la percentuale conta da zero, stretta e leggera, poi larga e piena. Le altre fette la seguono una alla volta, in fila sotto. Al posto della torta resta solo il cerchio sottile. Dopo qualche secondo i nomi si spengono, le barre si ripiegano in fette e tornano a casa nello stesso ordine, ognuna scatta al suo posto con una molla, e la torta chiusa dà un piccolo colpo elastico. Poi tutto ricomincia. Sul telefono la fila sta sotto la torta. Un clic o un tocco la fa ripartire.
Come funziona
Una fetta è una fascia piegata
Ogni fetta è disegnata come una fascia piegata su un cerchio: il bordo esterno è un arco di lunghezza fissa e curvatura kap, il bordo interno sta più dentro di uno spessore thick. Con kap = 1/R e thick = R il bordo interno si stringe nel centro ed è uno spicchio di torta; con kap = 0 e thick = BAR è una barra dritta. La funzione shape campiona i due bordi in 44 punti e li unisce in un path chiuso.
La barra è lunga quanto l’arco
Raddrizzandosi la fetta non cambia la lunghezza del bordo esterno: cambia solo la curvatura, che va da 1/R a zero. Così ogni barra è lunga esattamente quanto il suo arco, cioè R per l’angolo, e le barre sono proporzionali alle percentuali senza fare conti. L’arco è scritto con sin(a)/kap e (1 − cos a)/kap, con la versione per curvatura quasi nulla, così la forma non si rompe quando la curva si apre del tutto.
Un quarto di giro, mai mezzo
Il punto d’aggancio di ogni fetta è il centro del bordo esterno: in torta sta sul cerchio, lungo la bisettrice (più POP quando salta fuori), in fila sta sul lato della barra. Fra i due lo script mescola posizione e rotazione. Una fetta della metà bassa della torta arriverebbe capovolta e farebbe mezzo giro: atterra invece con il bordo esterno sotto, che è la stessa barra, e gira al massimo di un quarto.
Lo stato e il disegno
Ogni fetta ha uno stato di numeri fra 0 e 1: grow (la torta che si disegna), out (il salto), m (lo scivolamento), k (il raddrizzamento), sq (lo schiacciamento all’arrivo), e per le scritte nameIn, nameW, count e shareW. Le timeline muovono solo questi numeri; a ogni fotogramma drawAll ridisegna fette, nomi e percentuali. Il peso delle scritte va su font-variation-settings, con gli assi wght e wdth di Archivo.
La regia che si ripete
La torta che si disegna è una timeline sola; il giro (le fette che escono, la pausa, il ritorno, il colpo della torta) è una seconda timeline con repeat: -1. Ogni tween è un fromTo con immediateRender: false: i valori di partenza sono scritti, nessuno si applica prima del suo momento, e il giro dopo riparte identico. Lo scivolamento usa EASE, il raddrizzamento un power2.inOut che parte un po’ dopo, l’arrivo SETTLE.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SHARES | script.js | [{ name: 'Online', value: 46 }, …] | I canali e i loro ordini, da due a otto: i valori diventano percentuali da soli, e il più grande prende l’accento. |
POP | script.js | 12 | Di quanto una fetta salta fuori dalla torta prima di partire, in centesimi del raggio. |
STAGGER | script.js | 0.6 | Quanti secondi passano fra una fetta che parte e la successiva. |
SLIDE | script.js | 1 | Quanti secondi impiega una fetta a scivolare in fila e raddrizzarsi (e a tornare). |
EASE | script.js | 'power3.inOut' | La curva dello scivolamento fra la torta e la fila. |
SETTLE | script.js | 'elastic.out(1, 0.38)' | Come si assesta una barra quando arriva e una fetta quando torna al suo posto: il secondo numero più piccolo fa rimbalzare di più. |
BAR | script.js | 12 | Lo spessore delle barre, in centesimi del raggio. |
HOLD | script.js | 2.4 | Quanti secondi restano le barre prima di richiudersi in torta. |
Quando usarla
Per raccontare una ripartizione in modo che si legga davvero: la pagina dei risultati di un negozio online, il bilancio di un’associazione, il riepilogo di una dashboard, la sezione dei numeri di una landing page, il resoconto di un sondaggio. La torta dice «sono parti di un tutto», le barre permettono di confrontarle: l’animazione le dà tutte e due.
Sul telefono
La stessa animazione con le misure adattate: la fila delle barre sta sotto la torta invece che accanto, le scritte sono un po’ più grandi in proporzione, e le fette tornano dalla barra più vicina alla torta, così nessuna passa sopra le altre. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: la torta compare in dissolvenza già intera, poi sfuma e al suo posto compaiono le barre con nomi e percentuali già pieni; dopo la pausa si torna alla torta con un’altra dissolvenza.
Trappole
- Con curvatura e spessore che vanno insieme a zero, lo spessore deve restare sempre minore del raggio di curvatura (thick ≤ 1/kap): se lo supera, il bordo interno passa dall’altra parte del centro e la fetta si rovescia in un fiocco. Lo spessore cala col quadrato di (1 − k) mentre il raggio cresce come 1/(1 − k), e il disegno lo limita comunque a 1/kap.
- Le fette della metà bassa della torta arrivavano in fila con mezzo giro, una capriola che si vedeva: ora atterrano con il bordo esterno sotto, che a barra ferma è lo stesso rettangolo, e la rotazione non supera mai un quarto di giro.
- Un fromTo dentro una timeline applica i suoi valori di partenza appena viene creato: costruendo il giro, i tween del ritorno mettevano subito le fette in fila e la torta iniziale si disegnava già fatta di barre. La timeline del giro ha defaults: { immediateRender: false }, e dopo averla costruita lo stato delle fette si rimette a torta.
- Sul telefono la fila sta sotto la torta: tornando a casa dalla più piccola, l’ultima barra passava sopra le altre e sopra i loro nomi. Le fette tornano nello stesso ordine in cui sono partite, dalla barra più vicina alla torta.
- Il peso della percentuale cresce con un back.out che va oltre il valore: senza un limite l’asse wght uscirebbe dai valori del carattere (100-900). Il valore si chiude fra i limiti prima di scriverlo.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,7 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
