Il menu che si apre dal pulsante
Menu, Transizioni, Testo
Gratis
Tutti i componenti
I prezzi con l’interruttore
Tre piani e un interruttore fra pagare al mese e all’anno: passando all’anno ogni prezzo vecchio viene barrato e cade, il nuovo più basso scende al suo posto con un rimbalzo e la riga sotto rotola al totale dell’anno; il pomello si allunga mentre corre, l’etichetta coi mesi regalati si accende e salta fuori, e un anello di colore gira attorno al piano consigliato.
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>The pricing switch</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/familjen-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the pricing switch: from monthly to yearly the old price is struck through and falls, the new one comes down
into its place, the yearly total opens under it, and the switch stretches as it runs -->
<section class="plans" aria-labelledby="plans-title" data-plans data-autoclic>
<header class="plans__head">
<h2 class="plans__title" id="plans-title">Plans for every host</h2>
<div class="bill" role="radiogroup" aria-label="Billing" data-bill>
<button class="bill__opt" type="button" role="radio" aria-checked="true" data-period="month">Monthly</button>
<span class="bill__track" aria-hidden="true"><span class="bill__knob" data-knob></span></span>
<button class="bill__opt" type="button" role="radio" aria-checked="false" tabindex="-1" data-period="year">Yearly</button>
<span class="bill__save" aria-hidden="true" data-save></span>
</div>
</header>
<div class="cards" data-cards></div>
<p class="sr" aria-live="polite" data-live></p>
</section>
</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.
35 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 «I prezzi con l’interruttore» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, Plans for every host e un interruttore Monthly / Yearly con l’etichetta 2 months free, spenta; sotto, tre piani scuri (Solo €12, Host €29, Group €79 al mese), ognuno con Billed every month, le cose comprese con le spunte e il suo bottone; Host è Our pick, col bottone verde e un anello verde e azzurro che gli gira attorno piano. Passando a Yearly il pomello corre dall’altra parte allungandosi e schiacciandosi, e l’etichetta diventa verde e salta fuori inclinandosi come un adesivo; in ogni piano una linea barra il prezzo, il prezzo cade girando un poco e il nuovo (€10, €24, €66) scende dall’alto con un rimbalzo, un piano dopo l’altro, mentre Billed every month scende via e arriva, in verde, il totale dell’anno (€288 billed once a year). Tornando a Monthly i prezzi salgono via e i vecchi tornano dal basso. Un piano sotto il puntatore si alza un poco; entrando, le spunte si disegnano una dopo l’altra.
Come funziona
L’interruttore
L’interruttore è un gruppo di due scelte (role radio) con in mezzo un binario che le alterna; il pomello va a x 22 in 0,42 secondi e intanto dei keyframes lo allungano a 1,4 e lo schiacciano a 0,86, come una goccia che corre. Le frecce cambiano scelta e portano il fuoco.
Il prezzo che cade
Per ogni piano una timeline: scendendo, prima una linea barra il prezzo (scaleX da 0 a 1), poi il prezzo cade e svanisce girando di 6 gradi, il testo cambia e il nuovo scende da sopra con back.out; salendo, il vecchio sale via e il nuovo arriva dal basso. I piani partono a 0,06 secondi l’uno dall’altro e SWAP regola tutta la durata.
La riga che rotola
La riga sotto il prezzo è una fessura alta 18 pixel con overflow hidden: le parole vecchie escono nel verso del prezzo, cambiano e le nuove entrano dall’altra parte. Così i piani non cambiano mai altezza e niente salta.
L’etichetta e l’anello
L’etichetta cambia colore con una transizione CSS e GSAP la fa saltare da 0,7 a 1 inclinandola di 3 gradi. Il piano consigliato (PICK) ha un bordo fatto con un conic-gradient il cui angolo di partenza è una variabile CSS, --turn, che GSAP porta da 0 a 360 gradi in RING secondi, all’infinito.
Cambi veloci e anteprima
Ogni piano tiene la sua timeline e la chiude tutta prima di cominciarne una nuova: chiudere solo i tween lascerebbe vivi i richiami che scrivono il testo, che scriverebbero il prezzo vecchio in ritardo. Un clic da script (l’anteprima della libreria) alterna mese e anno e ogni terza volta alza un piano, come farebbe un puntatore.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PLANS | script.js | [['Solo', 'One place to let', 12, […]], …] | I piani: nome, per chi è, prezzo al mese, cosa comprende. |
FREE_MONTHS | script.js | 2 | I mesi all’anno regalati a chi paga all’anno. |
SWAP | script.js | 0.5 | I secondi che un prezzo impiega a cambiare. |
PICK | script.js | 1 | Il piano consigliato: 0, 1 o 2. |
RING | script.js | 6 | I secondi che l’anello di colore impiega a fare il giro del piano consigliato. |
Quando usarla
Per la pagina dei prezzi di un servizio in abbonamento, di un’app o di un programma, i pacchetti di un’agenzia, le tariffe di una palestra o di un coworking.
Sul telefono
I piani stanno uno accanto all’altro e scorrono sotto il dito uno alla volta (scroll-snap), col piano consigliato già al centro e i vicini che si affacciano ai lati; al tocco i piani non si alzano.
Con il movimento ridotto
I prezzi e la riga sotto cambiano subito, senza barrare e senza cadere; il pomello e l’etichetta vanno al loro posto senza correre e senza saltare, l’anello resta fermo e le spunte sono già disegnate.
Trappole
- killTweensOf ferma i tween di un elemento ma non la timeline che li contiene: i suoi richiami restano vivi e, dopo un cambio veloce avanti e indietro, scriverebbero il prezzo vecchio. Si tiene la timeline e la si chiude tutta.
- Una riga che si apre e si chiude sotto il prezzo cambia l’altezza dei piani e, in una pagina centrata, fa saltare tutto: meglio una fessura fissa dove le parole rotolano.
- In una griglia con place-items center, una fila di piani che scorre di lato sul telefono allarga la colonna alla sua larghezza: la colonna va fissata con minmax(0, 1fr).
- Ingrandire le parole dentro un’etichetta le fa uscire dal suo fondo: si ingrandisce l’etichetta intera.
- Una variabile CSS dentro un gradiente non si anima con una transizione CSS senza @property: GSAP la riscrive a ogni fotogramma e l’anello gira lo stesso.
Librerie
GSAP 3.15.0, Familjen Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,9 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.
