La parola sollevata a ripetizioni

Testo, FisicaGSAPMediaPeso compresso: Demo 5,5 KBGSAP 28 KBGratisScarica lo zip

Animazione di testo in stile minimal per una palestra inventata: una parola sta su una barra sottile appoggiata ai ganci, come un bilanciere. A ogni ripetizione la barra si alza, si flette con una molla vera, riatterra un pixel più in basso e la parola prende peso; a serie finita la barra diventa vermiglia. Un clic aggiunge una ripetizione.

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 word lifted for reps</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 role="button" tabindex="0" aria-label="Kettle gym. The word is lifted like a barbell, one rep at a time. Click for one more rep.">
    <p class="brand" aria-hidden="true">Kettle gym</p>
    <p class="plan" aria-hidden="true">Morning set</p>

    <!-- the rack, the bar, the plates and the word: one SVG, drawn by the script -->
    <svg class="scene" data-scene aria-hidden="true">
      <path class="floor" data-floor d="" />
      <path class="upright" data-upright-l d="" />
      <path class="upright" data-upright-r d="" />
      <g data-load>
        <path class="bar" data-bar d="" />
        <g data-plates></g>
        <text class="word" data-word text-anchor="middle"></text>
      </g>
    </svg>

    <div class="count" aria-hidden="true">
      <span class="count__label">Reps</span>
      <span class="count__num" data-num>0</span>
      <span class="count__ticks" data-ticks></span>
      <span class="count__done" data-done>Set done</span>
    </div>

    <p class="hint" aria-hidden="true">Tap for one more rep</p>
    <h1 class="sr-only" data-title>LIFT</h1>
  </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.

18 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 parola sollevata a ripetizioni» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una pagina bianco caldo con in alto, piccolo, «Kettle gym». In mezzo c’è una barra sottile appoggiata su due ganci, come un bilanciere sulla sua rastrelliera, con due dischi disegnati a filo per parte, e in piedi sulla barra la parola LIFT, sottile e larga. Sotto, un contatore: «Reps», il numero e otto tacche grigie. Poi parte la serie. La parola si schiaccia appena, come chi prende fiato, e la barra lascia i ganci e sale: i capi coi dischi restano indietro rispetto al centro e la barra si piega come quelle vere, poi si raddrizza e oscilla un poco mentre arriva in alto. Salendo la parola diventa più nera e un po’ più stretta, il numero aumenta e una tacca si riempie d’inchiostro allargandosi da sinistra. La barra torna giù, tocca i ganci, scende di un pixel di troppo e risale, la parola si schiaccia per l’arrivo e la barra vibra come una corda, sempre meno. A ogni ripetizione la parola pesa di più. All’ottava l’ultima tacca è vermiglia, la barra diventa vermiglia e al posto di «Reps» compare «Set done»; poi il peso si toglie, la parola torna leggera, le tacche si svuotano da destra e la serie ricomincia. Un clic (o un tocco, o Invio) fa una ripetizione in più subito; a serie finita ne fa partire una nuova.

Come funziona

Un disegno solo

Ganci, pavimento, barra, dischi e parola stanno in un SVG grande quanto la finestra, ridisegnato a ogni fotogramma da una funzione sola. GSAP anima soltanto numeri in un oggetto: quanto è alta la barra, quanto affonda all’arrivo, lo schiacciamento della parola, i suoi due assi e quanto è vermiglia. Le misure (lunghezza della barra, corpo del carattere, altezza della salita) si calcolano dalla larghezza e dall’altezza della finestra a ogni resize.

La barra che si piega

La barra è un path con un punto ogni sei pixel: il centro sta dove la porta GSAP, i capi si spostano di f per u al quadrato, dove u va da meno 1 a 1. Il numero f è una molla smorzata sul ticker di GSAP (rigidità 380, smorzamento 5,2, quattro passi per fotogramma) spinta dall’accelerazione della barra, che si ricava dalla sua posizione nei due fotogrammi prima. Quando la barra parte i capi restano indietro, quando si ferma vanno avanti, quando tocca i ganci suonano: niente è disegnato a mano, lo fa la fisica.

Una ripetizione

Ogni ripetizione è una timeline: un piccolo schiacciamento, la salita con power2.out, intanto i due assi di Archivo vanno al peso della ripetizione dopo, la discesa con power2.in, un pixel e due decimi di troppo e il ritorno con elastic.out, con la parola che si schiaccia e si rialza. Il peso va da LIGHT a HEAVY in parti uguali, la larghezza da 112 a 88 perché la parola più nera non si allarghi.

La serie e il clic

Fra una ripetizione e l’altra c’è un delayedCall di GSAP, non un setTimeout, così tutto segue l’orologio di GSAP. Il clic cancella l’attesa e fa subito una ripetizione; se ne arriva uno mentre la barra è in aria, la ripetizione si mette in coda. All’ultima la barra e l’ultima tacca diventano vermiglie, poi una timeline toglie il peso e svuota le tacche da destra. Con il movimento ridotto la barra non si muove e non si piega: a ogni ripetizione cambiano solo il peso della parola e il contatore.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'LIFT'`	La parola sulla barra (le parole corte si sollevano meglio, fino a 7 lettere).
`REPS`	script.js	`8`	Quante ripetizioni fanno una serie.
`LIGHT`	script.js	`220`	Il peso della parola prima della prima ripetizione (da 100 a 900).
`HEAVY`	script.js	`860`	Il peso che raggiunge all’ultima ripetizione (da 100 a 900).
`LIFT_TIME`	script.js	`0.55`	I secondi per alzare la barra fino in cima.
`REST`	script.js	`0.45`	I secondi di riposo fra due ripetizioni.
`FLEX`	script.js	`1`	Quanto si piega e vibra la barra: 0 è rigida, 2 molto elastica.

Provali nel Playground

Quando usarla

Per l’apertura del sito di una palestra, di un’app di allenamento o di un personal trainer, per un contatore di ripetizioni o di obiettivi, per un caricamento che deve sembrare fatica e soddisfazione insieme.

Sul telefono

La stessa animazione con le misure adattate: la barra e la parola si misurano sulla larghezza e sull’altezza dello schermo, così stanno nella casella; un tocco fa una ripetizione in più.

Con il movimento ridotto

La barra resta ferma sui ganci e non si piega: a ogni ripetizione la parola cambia peso con una dissolvenza e il contatore sale; a serie finita la barra diventa vermiglia.

Trappole

La flessione disegnata con un tween faceva sembrare la barra di gomma: con una molla spinta dall’accelerazione i capi restano indietro solo quando la barra cambia velocità, come succede davvero.
Un fotogramma lungo (la scheda nascosta e poi riaperta) dava un’accelerazione enorme e la barra schizzava: l’intervallo si tiene fra un 240esimo e un 20esimo di secondo e l’accelerazione si limita.
GSAP non anima i colori scritti come var(--accent): le tacche prendono i colori già calcolati dal :root, così la Palette del Playground li cambia lo stesso.
Più nera, la parola si allargava e toccava i dischi: insieme al peso scende l’asse wdth.

Librerie

GSAP 3.15.0, Archivo (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 22 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.