La transizione delle linee di flusso

Transizioni, HoverGSAP, Canvas, Solo CSSMediaPeso compresso: Demo 8,1 KBGSAP 28 KBGratisScarica lo zip

Una transizione fra due pagine fatta di linee di corrente: dal punto del clic centinaia di linee sottili seguono un campo di flusso piegato da vortici morbidi, attraversano lo schermo nel colore della pagina che arriva, si allargano fino a coprirla e poi escono dai bordi come code sottili mentre il titolo nuovo sale. Le teste delle linee davanti sono vermiglie. Stile minimal.

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>Leeward</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- two pages of an invented sail loft; the link starts a flow of thin lines from where you click:
       they cross the screen along a flow field, thicken until they cover the page, and thin out on the new one -->
  <main class="sito" data-sito>

    <section class="pagina pagina--notte" data-pagina="a" aria-label="Index">
      <header class="testa">
        <p class="marchio">Leeward</p>
        <p class="nota">Sail loft, est. on the coast</p>
      </header>
      <div class="eroe">
        <p class="occhiello" data-entra>Index</p>
        <h1 class="titolo">
          <span class="riga"><span class="riga__dentro" data-riga>Follow</span></span>
          <span class="riga"><span class="riga__dentro" data-riga>the current.</span></span>
        </h1>
        <a class="pillola" href="#loft" data-vai="b" data-autoclic data-entra>
          <span class="pillola__scritta">Into the loft</span>
          <svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.8 13.2 8 9 12.2" /></svg>
        </a>
      </div>
      <footer class="piede">
        <svg class="vento" viewBox="0 0 64 16" aria-hidden="true"><path d="M1 5c12-4 24 4 38 0s18-2 24 1" /><path d="M1 11c14-3 26 3 40 0s16-1 22 1" /></svg>
        <p class="nota">Click the link: the flow starts where you click</p>
      </footer>
    </section>

    <section class="pagina pagina--giorno" data-pagina="b" aria-label="The loft" hidden>
      <header class="testa">
        <p class="marchio">Leeward</p>
        <p class="nota">The loft</p>
      </header>
      <div class="eroe">
        <p class="occhiello" data-entra>The loft</p>
        <h1 class="titolo">
          <span class="riga"><span class="riga__dentro" data-riga>Cut where</span></span>
          <span class="riga"><span class="riga__dentro" data-riga>the air moves.</span></span>
        </h1>
        <a class="pillola" href="#index" data-vai="a" data-autoclic data-entra>
          <svg class="pillola__freccia pillola__freccia--indietro" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.5 8H3M7 3.8 2.8 8 7 12.2" /></svg>
          <span class="pillola__scritta">Back to index</span>
        </a>
      </div>
      <footer class="piede">
        <svg class="vento" viewBox="0 0 64 16" aria-hidden="true"><path d="M1 5c12-4 24 4 38 0s18-2 24 1" /><path d="M1 11c14-3 26 3 40 0s16-1 22 1" /></svg>
        <p class="nota">Twelve sails a season, cut by hand</p>
      </footer>
    </section>

    <canvas class="velo" aria-hidden="true" data-velo></canvas>
  </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.

28 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 transizione delle linee di flusso» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Due pagine di una veleria inventata, Leeward: l’indice su un nero quasi puro, con il titolo Follow the current, e la pagina della veleria su un bianco caldo, con Cut where the air moves. Cliccando il link Into the loft, dal punto esatto del clic parte un flusso: trecentoventi linee sottilissime nascono a raggiera e seguono le linee di corrente di un campo, la spinta che si allontana dal clic piegata da vortici morbidi di rumore, più forti lontano dal punto, così vicino al clic le linee partono dritte e poi si attorcigliano come aria che passa intorno a qualcosa. Corrono verso i bordi nel colore della pagina che arriva, ognuna col suo piccolo ritardo e una di tre trasparenze; le teste di una linea su sette sono vermiglie. Mentre corrono si allargano, finché si saldano e il colore nuovo copre tutto; intanto il titolo di prima sale un poco e si spegne. Sotto c’è la pagina nuova: le code del flusso, sottili e nel colore della pagina di prima, scappano dai bordi, e il titolo nuovo sale riga per riga da sotto la sua maschera, con un assestamento di un pixel. Il link Back to index fa il viaggio al contrario, dal suo punto. Passando col mouse sul link, dieci fili di vento corti si alzano dalla pillola e si piegano nello stesso campo, e la pillola si gonfia piena con la scritta che si allarga. In basso due linee sottili scorrono piano accanto alla nota, come una manica a vento.

Come funziona

Il campo e il rumore

La direzione in ogni punto è l’angolo che si allontana dal clic più VORTICE per un rumore a gradienti morbido (una griglia di gradienti con l’interpolazione liscia), con la misura GRANA. Il peso del rumore cresce con la distanza dal clic: vicino al punto le linee partono dritte, lontano si attorcigliano.

Tracciare le linee di corrente

Al clic ogni linea parte da un cerchietto intorno al punto e avanza con un passo di punto medio (guarda la direzione a metà strada), più corto vicino al clic e più lungo lontano, finché esce dalla pagina. Si salvano i punti e la lunghezza percorsa a ogni passo: così si può disegnare qualunque tratto della linea fra due lunghezze.

L’arrivo che copre

Una timeline porta t da 0 a DURATA. Ogni linea si disegna da 0 alla sua testa, che corre con power2.inOut e un piccolo ritardo a caso. Lo spessore cresce dalla misura sottile allo spazio fra due linee sul bordo più lontano per COPERTURA; nell’ultimo quarto il colore nuovo riempie i buchi. Tre percorsi per le tre trasparenze, uno per le teste vermiglie.

Lo scambio e le code

Quando il colore nuovo copre tutto, la pagina di prima si nasconde e sotto compare quella nuova; per 0,6 volte DURATA si disegnano solo le code, dal punto che avanza con power3.out fino alla fine della linea, sottili e nel colore di prima, mentre il titolo nuovo sale riga per riga con expo.out.

Il filo di vento

Al passaggio del mouse sul link si tracciano dieci linee corte dalla pillola nello stesso campo, e un tratto di 50 px corre lungo ognuna a giro continuo, con la forza che cresce e cala piano. Tutto sta su un solo canvas sopra le pagine, che non prende i clic.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LINEE`	script.js	`320`	Quante linee di corrente partono dal punto del clic.
`DURATA`	script.js	`1.6`	Quanto dura l’arrivo del flusso, in secondi; l’uscita delle code dura 0,6 volte tanto.
`VORTICE`	script.js	`1.1`	Quanto il rumore piega le linee, in radianti.
`GRANA`	script.js	`0.0024`	La misura dei vortici: più piccola, vortici più larghi.
`COPERTURA`	script.js	`1.5`	Quanto si allargano le linee per coprire la pagina, rispetto allo spazio fra loro.
`TESTE`	script.js	`7`	Una linea ogni quante ha la testa vermiglia.

Provali nel Playground

Quando usarla

Come passaggio fra le pagine di un sito che parla di aria, acqua o movimento: una veleria, uno studio di design, un laboratorio di aerodinamica, un’app del meteo o del vento, un portfolio che vuole un cambio pagina vivo ma senza colori in più. Funziona fra una pagina scura e una chiara, perché il flusso porta il colore della pagina che arriva.

Sul telefono

Le stesse animazioni a misure adattate: il flusso parte dal dito, le linee si misurano sulla diagonale della casella e coprono anche lo schermo piccolo; il titolo è più piccolo e la nota in alto non c’è. Il filo di vento c’è solo col mouse.

Con il movimento ridotto

Niente flusso: la pagina di prima si spegne in dissolvenza e quella nuova compare con il titolo in dissolvenza, senza righe che salgono. Le due linee del vento in basso sono ferme.

Trappole

Con un tratto per ogni segmento le linee sarebbero decine di migliaia di stroke: ogni trasparenza è un solo percorso, e le teste un altro.
Un clic dato dalla tastiera o dall’anteprima non ha coordinate (clientX vale 0): il flusso parte allora dal centro del link.
Se le linee si allargano solo un poco, ai bordi restano dei buchi fra l’una e l’altra: lo spessore si misura sullo spazio fra due linee sul bordo più lontano, e alla fine il colore pieno chiude quelli rimasti.
Le linee vanno ricalcolate al resize: la finestra della demo può cambiare misura a metà passaggio.

Librerie

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 8,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.