La transizione del pendolo

Transizioni, FisicaGSAP, Solo CSSMediaPeso compresso: Demo 7,3 KBGSAP 28 KBGratisScarica lo zip

Un cambio di pagina nello stile minimal: una riga sottile arancione appesa sopra lo schermo viene lasciata andare e cade come un pendolo; tutto quello che spazza è già la pagina nuova, e le lettere del titolo si piegano quando passa. Oscilla oltre la verticale, torna, si calma e si ferma proprio dove la pagina nuova ha la sua riga di colonna.

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 pendulum transition</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <!-- the first page: its column rule stands on the right -->
    <section class="page page--a is-on" data-page="a" aria-label="Shop">
      <span class="rule" aria-hidden="true"></span>
      <header class="bar">
        <span class="brand">Hollis</span>
        <nav class="nav" aria-label="Pages">
          <a href="#shop" aria-current="page">Shop</a>
          <a href="#repairs" data-go="b">Repairs</a>
        </nav>
      </header>
      <div class="main">
        <h1 class="big" data-big>Slow time.</h1>
        <p class="lede" data-late>Clocks and watches mended by hand, one at a time, at a bench by the window.</p>
        <a class="go" href="#repairs" data-go="b" data-autoclic data-late>
          <span class="go__t">Book a repair</span>
          <svg class="go__arrow" viewBox="0 0 26 12" aria-hidden="true"><path d="M1 6h22M18.5 1.5 23.5 6l-5 4.5"/></svg>
        </a>
      </div>
      <aside class="side" data-late>
        <p>Wall clocks<br>Mantel clocks<br>Pocket watches</p>
        <p class="side__soft">Open Tuesday to Saturday</p>
      </aside>
      <footer class="foot" data-late>
        <span>Clockmakers</span>
        <span>Since 1952</span>
      </footer>
    </section>

    <!-- the second page: dark, its column rule on the left, where the pendulum comes to rest -->
    <section class="page page--b" data-page="b" aria-label="Repairs" aria-hidden="true">
      <span class="rule" aria-hidden="true"></span>
      <header class="bar">
        <span class="brand">Hollis</span>
        <nav class="nav" aria-label="Pages">
          <a href="#shop" data-go="a">Shop</a>
          <a href="#repairs" aria-current="page">Repairs</a>
        </nav>
      </header>
      <aside class="side" data-late>
        <p>A repair takes as long as the clock needs.</p>
        <p class="side__soft">Quotes are free</p>
      </aside>
      <div class="main">
        <h2 class="big" data-big>Repairs</h2>
        <ul class="list" aria-label="Waiting times">
          <li class="row" data-late><span class="row__rule" data-rule></span><span>Wall clocks</span><span class="row__soft">3 weeks</span></li>
          <li class="row" data-late><span class="row__rule" data-rule></span><span>Pocket watches</span><span class="row__soft">2 weeks</span></li>
          <li class="row" data-late><span class="row__rule" data-rule></span><span>Pendulum clocks</span><span class="row__soft">4 weeks</span></li>
        </ul>
        <a class="go go--back" href="#shop" data-go="a" data-autoclic data-late>
          <svg class="go__arrow" viewBox="0 0 26 12" aria-hidden="true"><path d="M25 6H3M7.5 1.5 2.5 6l5 4.5"/></svg>
          <span class="go__t">Back to the shop</span>
        </a>
      </div>
      <footer class="foot" data-late>
        <span>Clockmakers</span>
        <span>Since 1952</span>
      </footer>
    </section>

    <!-- the pendulum: a thin rule hung above the screen -->
    <span class="arm" data-arm aria-hidden="true"></span>
  </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.

38 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 del pendolo» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Il sito di una bottega di orologiai inventata, Hollis, in due pagine con una riga di colonna arancione: la prima color carta, Slow time., con la riga a destra e la colonna stretta degli orologi che ripara; la seconda quasi nera, Repairs, con la riga a sinistra e i tempi d’attesa. All’apertura la riga cade da sinistra come un pendolo e la pagina compare dietro di lei, mentre oscilla e si ferma. Al clic su Book a repair una riga sottile appesa molto sopra lo schermo viene lasciata andare dall’orizzontale: entra dall’angolo in alto a destra e cade, sempre più veloce, e lo spicchio che ha spazzato è già la pagina scura, ritagliato con precisione lungo la riga. Ogni lettera di Repairs, appena la riga la supera, si piega nel verso della corsa e prende un filo di peso, poi torna dritta con un elastico. La riga passa la verticale, va oltre fino a scoprire anche l’angolo in alto a sinistra, torna indietro un po’ meno, poi ancora meno, e si posa sulla riga di colonna della pagina nuova; intanto l’elenco dei tempi si disegna e sale. Al clic su Back to the shop la riga cade dall’altra parte, da sinistra, e si ferma sulla riga di destra della prima pagina.

Come funziona

La fisica calcolata prima

L’oscillazione è un pendolo vero su un perno con una molla e un po’ d’attrito: θ'' = −sin θ − 6θ − c·θ', integrata a passi di mezzo millesimo partendo da 90 gradi, ferma. Si calcola una volta sola, si ricampiona a 240 campioni al secondo e si riscala perché la caduta duri FALL secondi. Quando la riga si gira con meno di nove gradi, l’ultimo pezzo è un quarto di coseno fino alla verticale. Poi un solo tween di GSAP fa avanzare il tempo con ease none: il banco può rallentarla e il video dell’anteprima la vede tutta.

Lo spicchio spazzato

La pagina nuova sta sopra la vecchia con un clip-path polygon: il perno e poi dei punti lontanissimi lungo i raggi, dall’orizzontale fino all’angolo più basso a cui la riga è arrivata finora (il minimo dei campioni fino a quel momento). Così quello che la riga ha spazzato resta scoperto anche quando lei torna indietro. Appena l’oscillazione ha raggiunto il suo angolo più lontano, il clip-path si toglie e la pagina vecchia si nasconde.

Il perno alla giusta altezza

Perché il primo passaggio oltre la verticale scopra tutto l’angolo dall’altra parte, il perno sta sopra lo schermo di distanza / tan(angolo più lontano · 0,9): con un pendolo che si calma presto il perno sale, con uno che oscilla tanto scende. La riga è un div largo un pixel e mezzo e lungo quattro volte lo schermo, con transform-origin in alto, girato attorno al perno. Il perno si ricalcola a ogni fotogramma con le misure del momento, quindi un ridimensionamento a metà oscillazione non stacca la riga dal bordo dello spicchio.

Le lettere che si piegano

Prima di partire si misura l’angolo di ogni lettera del titolo nuovo visto dal perno e si cerca nei campioni il primo istante in cui la riga lo supera: lì, nella stessa timeline, la lettera parte inclinata di KICK gradi (skewX, con transform-origin in basso) e col peso a 520 sull’asse wght di Roboto Flex, e torna dritta e leggera con elastic.out.

Telefono e movimento ridotto

Al telefono le colonne diventano una sola e la riga sta a nove pixel dal bordo, a destra nella prima pagina e a sinistra nella seconda: il pendolo spazza lo stesso tutto lo schermo e si ferma sul bordo. Con il movimento ridotto le due pagine si scambiano in dissolvenza e la riga è già al suo posto.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`FALL`	script.js	`0.62`	I secondi che la riga impiega a cadere dall’orizzontale alla verticale; il resto dell’oscillazione segue in proporzione.
`DAMPING`	script.js	`1.9`	Quanto in fretta l’oscillazione si spegne: 1.2 oscilla a lungo, 3 torna appena indietro.
`KICK`	script.js	`9`	Di quanti gradi si piega una lettera quando la riga la supera: 0 = resta ferma.
`SPEED`	script.js	`1`	La velocità di tutto: 2 è il doppio, 0.5 la metà.

Provali nel Playground

Quando usarla

Per passare da una pagina all’altra in un sito sobrio impaginato a colonne: un orologiaio o un negozio di orologi, una bottega artigiana, uno studio di architettura o di design, il sito di un festival di musica (il pendolo come un metronomo), un portfolio con una riga di colonna come segno.

Sul telefono

La stessa oscillazione: le due colonne diventano una sola e la riga sta vicino al bordo, così il pendolo cade attraverso tutto lo schermo alto e si ferma sul margine.

Con il movimento ridotto

Niente oscilla: la pagina nuova compare in dissolvenza sopra la vecchia, con la sua riga di colonna già al suo posto.

Trappole

Un pendolo vero che cade in 0,6 secondi impiega più di un secondo per ogni oscillazione successiva: con poco attrito si calmava dopo cinque secondi. L’attrito è più forte, e sotto i nove gradi l’ultimo ritorno è un quarto di coseno.
Con il perno sul bordo alto dello schermo, l’oscillazione oltre la verticale non arriverebbe all’angolo in alto dall’altra parte e ne resterebbe scoperto un triangolo della pagina vecchia: il perno si alza quanto serve, calcolato dall’angolo più lontano della fisica.
Se lo spicchio seguisse l’angolo di adesso, quando la riga torna indietro la pagina nuova sparirebbe di nuovo. Lo spicchio va dall’orizzontale all’angolo più basso raggiunto finora.
Il titolo diviso in lettere perderebbe lo spazio fra Slow e time: uno spazio da solo in un inline-block si annulla, quindi diventa uno spazio non separabile (String.fromCharCode(160)).

Librerie

GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.

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

Collaudo

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