La transizione col bordo curvo

Transizioni, SVGGSAP, Solo CSSMediaPeso compresso: Demo 6,1 KBGSAP 28 KBGratisScarica lo zip

Un cambio di pagina a clic in stile minimal: un foglio nero sale dal basso col bordo che si gonfia come una stoffa spinta da sotto, si appiattisce arrivando, mostra il nome della pagina dopo che si allarga e se ne va in alto col bordo di sotto curvo al contrario, scoprendo la pagina nuova.

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 curved-edge transition</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" data-stage>
    <!-- the first page -->
    <section class="page page--a is-on" data-page="a" aria-label="Work">
      <header class="bar">
        <span class="brand">Orrin</span>
        <nav class="nav" aria-label="Pages">
          <a href="#work" aria-current="page">Work</a>
          <a href="#studio" data-go="b">Studio</a>
        </nav>
      </header>
      <div class="hero">
        <p class="kicker" data-rise>Architecture and interiors</p>
        <h1 class="headline">
          <span class="line"><span class="line__in" data-line>Rooms that</span></span>
          <span class="line"><span class="line__in" data-line>hold the light.</span></span>
        </h1>
        <a class="go go--next" href="#studio" data-go="b" data-autoclic data-rise>
          <span class="go__text">Meet the studio</span>
          <span class="go__arrow" aria-hidden="true"><span class="go__shaft"></span><svg class="go__head" viewBox="0 0 8 12"><path d="M1.5 1.5 6.5 6l-5 4.5"/></svg></span>
        </a>
      </div>
      <footer class="foot" data-rise>
        <span>Houses, shops and quiet rooms</span>
        <span>Since 2011</span>
      </footer>
    </section>

    <!-- the second page -->
    <section class="page page--b" data-page="b" aria-label="Studio" aria-hidden="true">
      <header class="bar">
        <span class="brand">Orrin</span>
        <nav class="nav" aria-label="Pages">
          <a href="#work" data-go="a">Work</a>
          <a href="#studio" aria-current="page">Studio</a>
        </nav>
      </header>
      <div class="hero">
        <p class="kicker" data-rise>The studio</p>
        <h2 class="headline">
          <span class="line"><span class="line__in" data-line>Four people,</span></span>
          <span class="line"><span class="line__in" data-line>one long table.</span></span>
        </h2>
        <a class="go go--back" href="#work" data-go="a" data-autoclic data-rise>
          <span class="go__arrow" aria-hidden="true"><svg class="go__head" viewBox="0 0 8 12"><path d="M6.5 1.5 1.5 6l5 4.5"/></svg><span class="go__shaft"></span></span>
          <span class="go__text">Back to the work</span>
        </a>
      </div>
      <footer class="foot" data-rise>
        <span>A model shop facing north</span>
        <span>Visits by appointment</span>
      </footer>
    </section>

    <!-- the panel: a black sheet drawn as one path, with a hairline on its leading edge, and the name of the next page -->
    <div class="curtain" data-curtain aria-hidden="true">
      <svg class="curtain__svg" data-svg preserveAspectRatio="none">
        <path class="curtain__sheet" data-sheet d="" />
        <path class="curtain__edge" data-edge d="" />
      </svg>
      <p class="curtain__word"><span class="curtain__in" data-word>Studio</span></p>
    </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.

34 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 col bordo curvo» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

All’apertura la pagina è coperta da un foglio nero con al centro il nome dello studio, Orrin, stretto e leggero, che si allarga e prende peso; poi la parola sale via e il foglio se ne va verso l’alto: il suo bordo di sotto non è dritto, è una curva col centro che resta indietro e i lati che corrono avanti, con un filo vermiglio lungo il bordo. Sotto c’è la prima pagina, su carta bianco caldo: le due righe del titolo, «Rooms that hold the light.», salgono dalla loro fessura una dopo l’altra stringendosi e prendendo peso, poi il link con la freccia. Al clic su «Meet the studio» il foglio nero risale dal fondo: ora è il bordo di sopra a gonfiarsi, il centro avanti e i lati indietro, come una stoffa spinta da sotto; arrivando in cima si appiattisce, passa di un filo oltre il piano e si assesta. Sul nero sale il nome della pagina dopo, «Studio», stretto e sottile, e mentre il foglio è fermo si allarga fino in fondo all’asse della larghezza e diventa pieno; poi esce in alto e il foglio riparte, col bordo di sotto che si incurva al contrario mentre scopre la pagina dello studio, un grigio carta appena più scuro, con le sue righe che salgono sfalsate. Un clic su «Back to the work» rifà lo stesso viaggio all’indietro, col nome «Work» sul nero. Col puntatore sopra il link l’asta della freccia si allunga su una molla; le voci del menu si allargano e prendono l’accento.

Come funziona

Un foglio fatto di quattro numeri

Il foglio nero è un solo path di un SVG grande quanto la pagina, col viewBox in pixel veri. Lo descrivono quattro numeri in quote dell’altezza: dove stanno ai lati il bordo di sopra e quello di sotto, e quanto si gonfia il centro di ognuno (quello di sopra verso l’alto, quello di sotto verso il basso). Ogni bordo è una curva quadratica Q che va da un lato all’altro con il punto di controllo al centro, spostato del doppio del gonfiore: così il centro della curva cade proprio di quanto deve.

Ridisegnato a ogni fotogramma

GSAP non anima il path: anima l’oggetto coi quattro numeri, e a ogni aggiornamento una funzione sola rifà l’attributo d dalle misure della pagina in quel momento. Al resize si rileggono larghezza e altezza e si ridisegna subito, quindi la curva resta giusta anche se la finestra cambia a metà del viaggio. Il gonfiore si misura sull’altezza, ma mai oltre nove decimi della larghezza: su un telefono alto la curva sarebbe troppo ripida.

Il bordo che si gonfia e si posa

Mentre il foglio sale con power3.inOut, il bordo davanti si gonfia con power2.out nella prima metà del viaggio, quando il foglio accelera, e si appiattisce nella seconda, quando frena; arriva un paio di pixel oltre il piano (il centro un filo indietro rispetto ai lati) e torna dritto con elastic.out. In discesa la stessa cosa vale per il bordo di sotto, che si gonfia verso il basso: il centro resta indietro come una stoffa che si stacca.

Il nome sul nero

Il nome della pagina dopo sta in una fessura al centro del foglio: sale con expo.out e intanto, per tutta la sosta, l’asse della larghezza di Archivo va da 62% a 125% e il peso da 300 a 620; poi esce in alto con power3.in. A foglio fermo la pagina vecchia si spegne e quella nuova si accende sotto, con le righe del titolo già abbassate nella loro fessura e larghe.

Le righe della pagina nuova

Quando il foglio ha fatto un terzo della strada in uscita, le righe salgono una dopo l’altra con expo.out, si stringono da 104% a 84% e prendono peso; l’occhiello, il link e il piede arrivano subito dopo su un back.out. Con il movimento ridotto non c’è foglio: le due pagine si scambiano in dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`RISE`	script.js	`0.9`	I secondi che il foglio impiega a coprire la pagina.
`BULGE`	script.js	`0.16`	Quanto corre avanti il centro del bordo, in quote dell’altezza della pagina: 0 è un bordo dritto, 0.3 una cupola.
`HOLD`	script.js	`0.35`	I secondi che il nome della pagina dopo resta sul nero.
`LEAVE`	script.js	`0.95`	I secondi che il foglio impiega ad andarsene scoprendo la pagina nuova.
`OVERSHOOT`	script.js	`2`	Di quanti pixel il bordo va oltre il piano prima di assestarsi: 0 si ferma e basta.
`STAGGER`	script.js	`0.08`	I secondi fra una riga della pagina nuova e la successiva.
`SPEED`	script.js	`1`	La velocità di tutto: 2 è il doppio.

Provali nel Playground

Quando usarla

Per passare da una pagina all’altra in un sito sobrio dove conta la tipografia: lo studio di un architetto o di un designer, un portfolio, un’agenzia, un marchio di arredamento; fra la home e una sezione, o fra un progetto e il successivo. Il nome sul nero dice dove si sta andando mentre la pagina si carica.

Sul telefono

La stessa transizione con le misure adattate: il gonfiore del bordo si misura anche sulla larghezza, così su uno schermo alto la curva resta morbida; il titolo va su due righe più piccole e il nome sul nero si rimpicciolisce con lo schermo. Un tocco sul link fa il viaggio e un altro lo rifà all’indietro.

Con il movimento ridotto

Niente si sposta e il foglio non c’è: la pagina vecchia svanisce mentre compare la nuova, con tutto già al suo posto.

Trappole

Animare l’attributo d del path con GSAP avrebbe fissato le misure della finestra all’inizio del viaggio: girando il telefono a metà, la curva sarebbe rimasta della misura vecchia. Si animano quattro numeri in quote dell’altezza e il path si rifà a ogni fotogramma dalle misure di quel momento.
Con il punto di controllo della curva quadratica spostato quanto il gonfiore voluto, il centro del bordo si alzava solo della metà: la curva passa a metà strada fra i capi e il controllo. Il controllo si sposta del doppio.
Misurato solo sull’altezza, su un telefono alto il bordo diventava una cupola stretta e ripida: il gonfiore si misura sul più piccolo fra l’altezza e nove decimi della larghezza.
Il nome sul nero ha un transform nel CSS per stare centrato in altezza, e GSAP l’avrebbe cancellato: GSAP muove lo span dentro, il CSS il paragrafo che lo contiene.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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