Il pulsante elastico
Pulsanti, Hover, Testo
NuovaGratis
Tutti i componenti
Il selettore della lingua che riscrive il saluto
Un selettore della lingua nello stile minimal: cinque codici in una fila, una pillola chiara dietro quello scelto e sopra il saluto grande in quella lingua, Hello, Ciao, Bonjour, Hallo, Hola. Cambiando lingua le lettere del saluto vecchio si ribaltano all’indietro una dopo l’altra, la parola cambia larghezza e le lettere nuove si alzano dalla riga con un piccolo rimbalzo; la pillola si allunga sui due codici e poi lascia il vecchio.
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 language switcher that rewrites the greeting</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the language switcher of a language app, in the minimal style: five real radio buttons, and above them the
greeting in the language chosen. Choosing another language, the letters of the old greeting tip over
backwards one after the other, the word changes width, and the new letters stand up from the line -->
<form class="lang" data-lang onsubmit="return false">
<p class="lang__brand" aria-hidden="true">Parlo <span>Language</span></p>
<div class="lang__word" aria-hidden="true" data-word>
<span class="lang__letters" data-letters></span>
<span class="lang__shadow" data-shadow></span>
</div>
<p class="lang__name" aria-hidden="true" data-name></p>
<fieldset class="lang__set" data-set data-autoclic>
<legend class="lang__legend">Language</legend>
<div class="lang__row" data-row>
<span class="lang__pill" aria-hidden="true" data-pill></span>
</div>
</fieldset>
<p class="lang__status" aria-live="polite" data-status></p>
</form>
</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.
30 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 selettore della lingua che riscrive il saluto» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, in alto una riga piccola, «Parlo Language»; sotto, grande, il saluto nella lingua scelta, Hello, in un grottesco variabile un poco largo, con un’ombra morbida sulla riga; sotto ancora il nome della lingua scritto nella lingua stessa, English, e la fila dei codici EN, IT, FR, DE, ES dentro una cornice sottile, con una pillola chiara dietro quello scelto, scritto in vermiglio. Scegliendo un’altra lingua le lettere del saluto vecchio si ribaltano all’indietro attorno alla loro base, una dopo l’altra, partendo dal lato da cui arriva la scelta; la parola si allarga o si stringe alla misura della nuova e l’ombra si stringe un attimo; poi le lettere nuove si alzano dalla riga, ognuna andando un poco oltre e tornando, e quando sono tutte su la parola scende di un pixel e si posa. Intanto la pillola si allunga fino a coprire il codice vecchio e il nuovo e poi lascia il vecchio con un rimbalzo, e il nome della lingua cambia in dissolvenza. Passando su un codice si allarga e sale di un pixel, premendolo si schiaccia.
Come funziona
Radio veri, costruiti dallo script
Ogni lingua della lista LANGUAGES diventa un’etichetta con dentro un radio vero, trasparente, e il suo codice: con le frecce si passa da una lingua all’altra come in ogni gruppo di radio, lo screen reader legge il nome della lingua (aria-label) e una regione aria-live dice «Italiano selected». Il cambio parte dall’evento change del radio, quindi tastiera, mouse e dito fanno la stessa cosa.
Una parola per riga, le lettere una per una
A ogni scelta lo script crea una riga nuova col saluto, una casella inline-block per lettera, centrata con xPercent −50 dentro un contenitore largo quanto la parola. La riga vecchia resta finché le sue lettere non sono cadute, poi si toglie: così le due parole si incrociano senza saltare.
Ribaltarsi attorno alla base
Le lettere hanno transform-origin in basso al centro e il contenitore una prospettiva di 600 pixel. Le vecchie vanno da rotationX 0 a 92 gradi con power2.in, sparendo, le nuove da −92 a 0 con back.out(BOUNCE), che le fa andare un poco oltre; lo stagger parte dal lato da cui arriva la scelta (from start o from end) e le nuove partono quando le vecchie sono a metà. Alla fine la riga scende di un pixel e torna, l’assestamento.
La larghezza e l’ombra
Il contenitore va dalla larghezza della parola vecchia a quella della nuova, misurata con offsetWidth appena la riga nuova esiste, in 0,6 secondi con power3.inOut. L’ombra è un’ellisse sfocata ai suoi lati: durante il cambio si stringe al 90 per cento e si schiarisce, e torna quando le lettere nuove sono su.
La pillola che si allunga
La pillola dietro il codice scelto è una sola: prima si allunga fino a coprire il codice vecchio e il nuovo, in 0,2 secondi, poi lascia il vecchio con elastic.out e si posa sul nuovo. Le sue misure sono offsetLeft e offsetWidth dell’etichetta, prese di nuovo al resize. Un clic da script sulla fila (l’anteprima della libreria) sceglie la lingua dopo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LANGUAGES | script.js | [['EN', 'Hello', 'English'], ['IT', 'Ciao', 'Italiano'], …] | Le lingue: il codice, il saluto e il nome della lingua scritto nella lingua stessa. |
START | script.js | 0 | La lingua scelta all’apertura della pagina. |
TIP | script.js | 0.42 | Quanto ci mette una lettera a ribaltarsi o ad alzarsi, in secondi. |
STAGGER | script.js | 0.05 | Lo stacco fra una lettera e l’altra, in secondi. |
WIDTH | script.js | 104 | La larghezza del carattere del saluto (asse wdth, da 75 a 125). |
WEIGHT | script.js | 640 | Il peso del saluto (da 200 a 900). |
BOUNCE | script.js | 1.7 | Quanto vanno oltre le lettere quando si alzano (0 niente rimbalzo). |
Quando usarla
Nella testata o nel piè di pagina di un sito in più lingue, nell’app di una scuola di lingue o di un dizionario, nella prima schermata di un’app che chiede la lingua, nel sito di un albergo o di un museo che parla a visitatori da tanti paesi: ovunque cambiare lingua deve essere un gesto che si vede.
Sul telefono
La stessa animazione con le misure adattate: il saluto è misurato sia sulla larghezza sia sull’altezza dello schermo (min di vw e vh), quindi anche Bonjour sta nella casella; i codici hanno un margine più stretto. Il tocco sceglie la lingua e schiaccia il codice premuto.
Con il movimento ridotto
Niente si ribalta né viaggia: il saluto nuovo compare in dissolvenza al posto del vecchio, la pillola ricompare sul codice nuovo e il nome della lingua cambia in dissolvenza.
Trappole
- Le parole hanno larghezze molto diverse (Ciao e Bonjour): la riga nuova va misurata appena esiste, prima che le lettere si alzino, e il contenitore cambia larghezza da solo; se la si misura a lettere girate, offsetWidth è giusto lo stesso, perché le rotazioni non cambiano lo spazio delle caselle.
- Due scelte di fila non devono lasciare due righe: prima di una scelta nuova la timeline del cambio in corso si porta alla fine con progress(1), che toglie la riga vecchia.
- Lo spazio in un saluto di due parole va scritto come spazio non divisibile (String.fromCharCode(160)), sennò la casella inline-block vuota non ha larghezza.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,1 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 24 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.
