Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
La parola che salta la corda
Animazione di testo e fisica nello stile minimal: su una linea di terra sottile la parola «Skip» salta una corda vera, una catena di punti fatta girare da due maniglie. La corda passa dietro la parola sopra le lettere, scende davanti e corre sotto i piedi mentre le lettere sono in aria; ogni lettera si accovaccia, salta e atterra con uno schiacciamento, e ogni tanto c’è un doppio salto.
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>Ropewell</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>
<!-- a word skipping a jump rope: the rope is a chain of points swung by two handles, drawn on two canvases (the
part behind the letters and the part in front of them); the whole stage is the button that changes the pace -->
<main class="stage" data-stage tabindex="0" role="button" aria-label="A word skipping a jump rope. Press to change the pace.">
<canvas class="layer layer--back" data-back aria-hidden="true"></canvas>
<div class="word" data-word aria-hidden="true"></div>
<canvas class="layer layer--front" data-front aria-hidden="true"></canvas>
<p class="brand">Ropewell</p>
<p class="count" data-count-box><span class="count__label">Jumps</span> <b class="count__value" data-count>0</b></p>
<p class="hint"><span data-hint>Click to change the pace</span> <span class="hint__pace" data-pace>Steady</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.
21 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 «La parola che salta la corda» da Animorio e adattala al mio sitoCosa fa
Una stanza bianco caldo, vuota, e una linea di terra sottile che si disegna dal centro. Le lettere di «Skip» cadono una dopo l’altra sulla linea, si schiacciano un attimo e si rimettono dritte; la linea cede sotto ognuna. Ai lati compaiono due piccole maniglie e una corda sottile che giace a terra sotto la parola. La corda si alza dietro le lettere, più sottile e più chiara perché è lontana, passa sopra le teste, scende davanti, più scura e più spessa, e corre sotto i piedi. Le lettere la sentono arrivare: si accovacciano allargandosi e prendendo peso, saltano su una parabola vera stringendosi e alleggerendosi, e atterrano con uno schiacciamento e un piccolo rimbalzo, mentre la linea di terra cede sotto ognuna. Saltano prima quelle ai lati, poi quelle in mezzo, perché il centro della corda resta un po’ indietro rispetto alle maniglie. Ogni cinque salti c’è un doppio salto: la parola salta più in alto e la corda le gira sotto due volte. In alto a destra un contatore dice quanti giri ha fatto la corda; al decimo e al ventesimo il numero si accende per un attimo nel vermiglio, e dopo il ventesimo si ricomincia da zero. Un clic (o un tocco, o Invio) passa dal ritmo regolare a quello veloce e ritorno, senza fermare la corda.
Come funziona
Una corda vera
La corda è una catena di ventotto punti in tre dimensioni, integrata con il metodo di Verlet a passo fisso di 1/240 di secondo: ogni punto tiene la sua velocità, cade per la gravità e ha un vincolo di lunghezza con il vicino. I due capi sono le maniglie, che girano su due piccoli cerchi ai lati. Ogni punto è anche tirato da una molla verso la forma che il giro vorrebbe (un arco largo che arriva al pieno raggio a poca distanza dalle maniglie e il cui centro resta indietro di LAG radianti): così la corda tiene la sua forma ma si incurva, resta indietro e trema come una corda vera.
Davanti e dietro
La terza coordinata dice se un pezzo di corda è davanti o dietro la parola. I pezzi dietro si disegnano su un canvas sotto le lettere, quelli davanti su un canvas sopra; lo spessore e il colore passano dal grigio sottile al nero pieno secondo la distanza, così la profondità si legge senza ombre. Il pavimento ferma la corda: nessun punto scende sotto la linea.
La regia dei salti
Una timeline di GSAP sola, che si ripete, guida l’angolo del giro: un giro intero in TEMPO secondi, a velocità costante, e un doppio giro più veloce ogni DOUBLE_EVERY salti. I salti di ogni lettera sono nella stessa timeline, centrati sull’istante in cui la corda passa sotto: accovacciata (scale e peso), parabola in salita con power2.out e in discesa con power2.in, schiacciamento all’atterraggio e ritorno con back.out. Ogni lettera parte in ritardo di LAG per il seno della sua posizione diviso la velocità del giro: è il ritardo vero del centro della corda.
Gli assi del carattere
Le lettere sono Archivo variabile, ognuna posata con la sua linea di base sulla linea di terra (un segno di misura zero dentro la lettera dice dov’è la linea di base). Accovacciandosi si allargano fino al 106% e prendono peso fino a 720, in aria si stringono al 96% e si alleggeriscono a 560, atterrando tornano a 640. La linea di terra è un tracciato ridisegnato a ogni fotogramma: ogni atterraggio aggiunge una piccola conca che torna dritta con elastic.out.
Il ritmo e il contatore
Il clic cambia la velocità della timeline (timeScale) con un tween di sei decimi di secondo: la corda accelera o rallenta senza saltare un giro. Il contatore conta i passaggi della corda sotto la parola, si accende al decimo e al ventesimo e ricomincia a ogni ripetizione della timeline. Con il movimento ridotto la parola e la corda stanno ferme e il contatore conta piano, in dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Skip' | La parola che salta (fino a 8 lettere). |
TEMPO | script.js | 0.66 | Quanti secondi dura un giro di corda al ritmo regolare. |
QUICK | script.js | 1.45 | Quanto è più veloce il ritmo veloce. |
JUMP_HEIGHT | script.js | 0.42 | Quanto saltano in alto le lettere, rispetto alla loro grandezza. |
DOUBLE_EVERY | script.js | 5 | Ogni quanti salti c’è un doppio salto (0 = mai). |
SET | script.js | 20 | Dopo quanti giri il contatore ricomincia. |
ROPE_POINTS | script.js | 28 | Quanti punti ha la catena della corda. |
GRAVITY | script.js | 1400 | Quanto cade la corda, in pixel al secondo quadrato. |
STIFFNESS | script.js | 520 | Quanto la corda resta attaccata al giro: più basso si incurva e resta indietro di più. |
LAG | script.js | 0.5 | Quanto il centro della corda resta indietro rispetto alle maniglie, in radianti. |
Quando usarla
Per la pagina di una palestra, di un corso di allenamento o di un’app di fitness: il nome o una parola d’ordine che si muove a tempo in cima alla pagina, una pagina vuota o di attesa, un banner di un evento sportivo.
Sul telefono
La stessa animazione con le misure adattate: la parola è più grande in proporzione e la corda con le maniglie sta sempre dentro lo schermo. Un tocco cambia il ritmo.
Con il movimento ridotto
Niente si muove: la parola sta sulla linea e la corda giace sotto di lei; il contatore conta piano, con una dissolvenza.
Trappole
- Larghezza e peso cambiavano troppo (dal 92 al 112% e da 480 a 760): in aria la parola sembrava un altro carattere, stretta e spaziata, perché ogni lettera resta col centro al suo posto. Ora l’escursione è 96-106% e 560-720.
- La corda disegnata a segmenti dritti si vedeva spezzata: ora ogni pezzo va dal punto medio di un anello al punto medio del successivo, con il punto come controllo di una curva, e i punti sono ventotto.
- Il ritardo del centro della corda valeva anche a corda ferma: col movimento ridotto e nell’entrata la corda distesa a terra aveva una gobba che attraversava le lettere. Il ritardo ora cresce con la rotazione (spin da 0 a 1 mentre parte il primo giro) e a corda ferma è zero.
- Con un profilo della corda a seno, vicino alle maniglie la corda restava a mezza altezza anche in fondo al giro e avrebbe attraversato le lettere ai lati: il raggio pieno si raggiunge a poca distanza dalle maniglie e le lettere stanno tutte nel tratto pieno.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,7 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 21 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.
