L’interruttore della modalità aereo

Interruttori, SVG, Hover, TestoGSAP, Solo CSSMediaPeso compresso: Demo 5,7 KBGSAP 28 KBGratisScarica lo zip

L’interruttore della modalità aereo, nello stile minimal: il binario è una pista tratteggiata e la manopola un piccolo aereo visto dall’alto, che prende la rincorsa, si alza dalla pista lasciando giù l’ombra e vola diventando arancio, mentre le onde del Wi-Fi si spengono una per una.

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 airplane mode switch</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">
    <div class="setting" data-setting>
      <div class="setting__text">
        <label class="setting__name" id="air-name" for="air-switch">Airplane mode</label>
        <span class="setting__sub" aria-hidden="true">
          <svg class="wifi" viewBox="0 0 20 14" aria-hidden="true" focusable="false">
            <path class="wifi__arc" data-arc d="M7.6 11.2 A3.4 3.4 0 0 1 12.4 11.2"></path>
            <path class="wifi__arc" data-arc d="M5.2 8.6 A6.8 6.8 0 0 1 14.8 8.6"></path>
            <path class="wifi__arc" data-arc d="M2.7 6 A10.2 10.2 0 0 1 17.3 6"></path>
            <path class="wifi__cut" data-cut d="M3 12.6 L17 1.4"></path>
          </svg>
          <span class="setting__subwords">
            <span class="setting__s" data-sub-off>Wi-Fi and cellular on</span>
            <span class="setting__s" data-sub-on>All radios off</span>
          </span>
        </span>
      </div>
      <div class="setting__ctrl">
        <span class="setting__word" id="air-word" aria-hidden="true">
          <span class="setting__w" data-word-off>Off</span>
          <span class="setting__w" data-word-on>On</span>
        </span>
        <button class="switch" id="air-switch" type="button" role="switch" aria-checked="false" aria-labelledby="air-name air-word" data-switch data-autoclic>
          <svg class="switch__art" viewBox="0 0 104 56" aria-hidden="true" focusable="false">
            <rect class="switch__track" x="1" y="1" width="102" height="54" rx="27"></rect>
            <line class="switch__runway" data-runway x1="12" y1="28" x2="92" y2="28"></line>
            <ellipse class="switch__shadow" data-shadow cx="0" cy="0" rx="13" ry="2.8"></ellipse>
            <path class="switch__trail" data-trail d=""></path>
            <g data-knob>
              <circle class="switch__knob" cx="0" cy="0" r="17"></circle>
              <path class="switch__plane" data-plane d="M11 0 C11 1.2 9.6 1.6 8 1.6 L3.2 1.6 L-1.8 9 L-4.4 9 L-1.6 1.6 L-6.4 1.6 L-8.4 4.4 L-10.4 4.4 L-9.2 0 L-10.4 -4.4 L-8.4 -4.4 L-6.4 -1.6 L-1.6 -1.6 L-4.4 -9 L-1.8 -9 L3.2 -1.6 L8 -1.6 C9.6 -1.6 11 -1.2 11 0 Z"></path>
            </g>
          </svg>
        </button>
      </div>
    </div>
  </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.

16 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 «L’interruttore della modalità aereo» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianca, fra due righe sottili, l’impostazione «Airplane mode» con sotto il simbolo del Wi-Fi e la frase «Wi-Fi and cellular on»; a destra la parola «Off» e l’interruttore. Il binario è una pista: una pillola di filo con al centro una linea tratteggiata, e la manopola è un disco bianco con dentro un piccolo aereo nero visto dall’alto, con la sua ombra sotto. Al clic (o al tocco, con Spazio, Invio o la freccia a destra) l’aereo prende la rincorsa accelerando mentre i tratti della pista gli scorrono sotto, alza il muso, si stacca: il disco sale di qualche pixel e l’ombra resta sulla pista, si allontana e si fa piccola. Due scie arancio sottilissime gli escono dalle ali e svaniscono. Arriva all’altro capo su una molla che va oltre di un pixel, diventa arancio e resta in volo, salendo e scendendo appena. Intanto le onde del Wi-Fi si spengono una dopo l’altra dalla più esterna, una riga arancio le taglia, la frase diventa «All radios off», «Off» si assottiglia e sparisce e «On» arriva stretta e leggera e prende peso. Un altro clic (o la freccia a sinistra) lo fa atterrare: scende, tocca la pista schiacciandosi un poco e torna indietro frenando, e le onde si riaccendono. Col puntatore sopra l’aereo si sporge in avanti; premuto, si abbassa.

Come funziona

Un solo stato

Tutto sta in un oggetto di numeri: la posizione sulla pista p, la quota, il muso, lo schiacciamento, il respiro del volo, la sporgenza, la pressione, il colore e la parola. Una sola funzione render li scrive a ogni fotogramma: il transform della manopola fatto a mano (translate e scale), la rotazione dell’aereo, l’ombra che resta sulla pista, i tratti che scorrono e gli assi della parola.

Il decollo

Una timeline di GSAP porta p a 0,55 con power2.in, la rincorsa che accelera; intanto il muso sale di PITCH gradi e la quota arriva a CLIMB pixel, poi p va a 1 con back.out(SPRING), che passa oltre di circa un pixel e torna. Il colore passa dal nero all’arancio con gsap.utils.interpolate e alla fine parte un respiro su e giù di HOVER pixel, in yoyo.

La pista che scorre

La linea al centro del binario ha stroke-dasharray 4 4: il suo stroke-dashoffset segue p moltiplicato per la corsa e per STREAM, così i tratti scorrono sotto l’aereo più veloci di lui, come la pista vista dal finestrino. L’ombra è un’ellisse che non sale: con la quota si sposta indietro, si stringe e si schiarisce.

L’atterraggio

Il muso scende di qualche grado, la quota torna a zero e al contatto la manopola si schiaccia (più larga e più bassa) e si riprende con elastic.out; poi p torna a 0 con back.out, una frenata con un pixel di troppo. Le onde del Wi-Fi si riaccendono dalla più interna.

Accessibile

È un button con role="switch" e aria-checked, etichettato dal nome dell’impostazione e dalla parola; Spazio e Invio lo girano come il clic, le frecce a destra e a sinistra lo accendono e lo spengono, il fuoco si vede con un anello arancio. Un clic a metà ferma il giro in corso e parte quello nuovo dal punto in cui è l’aereo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`TAKEOFF`	script.js	`0.95`	Quanto dura il decollo, in secondi (l’atterraggio è un po’ più corto).
`CLIMB`	script.js	`3`	Quanto vola alto l’aereo sopra la pista, in pixel.
`PITCH`	script.js	`10`	Quanto si alza il muso al decollo, in gradi.
`SPRING`	script.js	`1.6`	Quanto l’aereo va oltre l’altro capo (0 per niente; 1,6 è circa un pixel).
`HOVER`	script.js	`0.7`	Quanto sale e scende l’aereo mentre vola, in pixel (0 fermo).
`STREAM`	script.js	`2.2`	Quanto corrono i tratti della pista sotto l’aereo, rispetto alla sua velocità.
`PEEK`	script.js	`3`	Quanto l’aereo si sporge in avanti sotto il mouse, in pixel.

Provali nel Playground

Quando usarla

Per un’impostazione accesa o spenta nelle impostazioni di un’app o di una dashboard: la modalità aereo, la modalità offline, la sincronizzazione, le notifiche durante un viaggio. Va bene anche nel profilo di un sito di voli o di viaggi.

Sul telefono

Uguale col tocco: l’interruttore resta 104 per 56, la riga dell’impostazione si stringe alla larghezza dello schermo e la frase sotto il nome va a capo se serve.

Con il movimento ridotto

Niente rincorsa né volo: l’aereo è già all’altro capo, arancio, e l’ombra sotto di lui; le parole si scambiano in una dissolvenza breve, la frase e le onde del Wi-Fi cambiano subito.

Trappole

I transform di GSAP sul gruppo della manopola dentro l’SVG spostavano il centro della rotazione: ora il transform si scrive a mano da render, e l’aereo ruota attorno al suo centro con rotate(gradi 0 0).
Il respiro del volo continuava anche dopo l’atterraggio, sommandosi alla quota zero: ora si ferma e si azzera all’inizio di ogni giro.
Gli interruttori che ci sono già usano una lampada, una luna, una levetta: qui l’idea è un’altra, il binario come pista e la manopola che si stacca dalla sua ombra.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 5,7 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 23 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.