Il caricamento che diventa marchio
Transizioni, SVG, Testo
NuovaGratis
Torna alla libreria
La transizione dal taglio
Un cambio di pagina minimal a clic: una linea sottile taglia la pagina a metà, le due metà si aprono in alto e in basso come un cassetto e dalla fessura si allarga la pagina nuova, col titolo che entra correndo lungo la linea. Tornando indietro le metà si richiudono con un piccolo colpo e la linea si chiude come una cucitura.
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 split-line transition</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>
<main class="stage" data-stage>
<!-- the first page: the headline sits right across the line, so the cut runs through its letters -->
<section class="page page--a is-on" data-page="a" aria-label="Objects">
<header class="bar">
<span class="brand">Halden</span>
<nav class="nav" aria-label="Pages">
<a href="#objects" aria-current="page">Objects</a>
<a href="#studio" data-go="b">Studio</a>
</nav>
</header>
<div class="hero hero--a" data-hero-a>
<p class="kicker">Spring collection</p>
<h1 class="headline" data-headline>Made slowly.</h1>
<a class="go go--next" href="#studio" data-go="b" data-autoclic>
<span class="go__text">Visit 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">
<span>Ceramics and furniture</span>
<span>Since 2009</span>
</footer>
</section>
<!-- the second page: its title stands on the line -->
<section class="page page--b" data-page="b" aria-label="Studio" aria-hidden="true">
<header class="bar" data-b-top>
<span class="brand">Halden</span>
<nav class="nav" aria-label="Pages">
<a href="#objects" data-go="a">Objects</a>
<a href="#studio" aria-current="page">Studio</a>
</nav>
</header>
<div class="hero hero--b">
<h2 class="title" data-title>The studio</h2>
<div class="below" data-below>
<p class="lede" data-rise>Six people, one kiln and a long oak table. We make a few things each year, and mend them for life.</p>
<a class="go go--back" href="#objects" 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 objects</span>
</a>
</div>
</div>
<footer class="foot" data-b-foot>
<span>Open by appointment</span>
<span>Since 2009</span>
</footer>
</section>
<!-- the two halves of the page being cut, and the line itself (both built and moved by the script) -->
<div class="halves" data-halves aria-hidden="true"></div>
<div class="cut" data-cut aria-hidden="true"></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.
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 «La transizione dal taglio» da Animorio e adattala al mio sitoCosa fa
Il sito di uno studio di ceramiche e mobili inventato, Halden, in due pagine e quasi niente: fondo color carta, un titolo enorme, una riga di testo, una linea color terracotta. All’apertura la linea attraversa lo schermo dal centro ai bordi e le due metà della prima pagina arrivano dall’alto e dal basso, si chiudono sulla linea con un piccolo colpo e un rimbalzo di pochi pixel; la linea resta un attimo come una cucitura, poi si ritira nel centro. Il titolo, Made slowly., sta proprio a cavallo del taglio. Al clic su Visit the studio la linea parte dal punto del clic e corre verso i due bordi; la pagina si incrina di qualche pixel, aspetta un respiro e poi le due metà scivolano via, una in su e una in giù, tagliando le lettere del titolo. Dalla fessura si allarga la pagina scura: la testata scende e il piede sale dal centro verso il loro posto, e il titolo nuovo, The studio, entra lungo la linea da sinistra, inclinato e stretto finché corre, con le lettere che si compattano e si allargano quando si ferma. Poi la linea si stringe fino alla larghezza del titolo e gli resta sotto, e il testo e il link per tornare salgono uno dopo l’altro. Al clic su Back to objects il titolo riparte lungo la linea verso destra, l’ultima lettera per prima, le metà della prima pagina si richiudono sopra la pagina scura, bussano e si assestano, e la linea si chiude nel centro.
Come funziona
Due copie tagliate
Le pagine vere non si tagliano mai. Lo script fa due copie della pagina che se ne va, le mette una sopra l’altra esattamente al suo posto e le ritaglia con clip-path: alla copia di sopra inset(0 0 calc(100% - var(--cut)) 0), a quella di sotto inset(var(--cut) 0 0 0). Il ritaglio si muove con la copia, quindi basta spostare le due copie in y. Nelle copie si tolgono data-go e data-autoclic e i link escono dal Tab, così nessuno le clicca.
La linea dal clic
La linea è un div alto un pixel, largo quanto la pagina, con transform-origin a sinistra. La sua posizione si scrive come estremo sinistro (x) e lunghezza (scaleX): partire dal clic vuol dire x uguale al punto del clic e scaleX zero, e arrivare ai bordi x zero e scaleX uno. Con lo stesso easing le due estremità arrivano insieme anche se un lato è più lungo. Lo stesso modo serve per stringerla sotto il titolo e per chiuderla nel centro.
Il cassetto
Prima un’incrinatura di pochi pixel con power3.out, poi un attimo fermo, poi le metà vanno fino ai bordi con power4.inOut: il tempo morto fra le due spinte è quello che fa sentire il cassetto. Alla chiusura le metà arrivano con power3.in (accelerano fino al colpo), tornano indietro di KNOCK pixel in 0,09 secondi e si rimettono a posto con elastic.out(1, 0.4). La pagina nuova sta sotto e intanto testata e piede si aprono dal centro con expo.out, un po’ dopo le metà.
Il titolo lungo la linea
Il titolo è diviso in lettere, ognuna un inline-block con font-stretch legato alla variabile --w (Instrument Sans va da 75 a 100 di larghezza). Ogni lettera parte spostata a sinistra di quasi un’altezza di lettera più TRAIL per le lettere che ha davanti: arrivando con expo.out le distanze si chiudono e le lettere si compattano come vagoni che frenano. L’inclinazione torna a zero con un elastico, --w si allarga a 100 a partire dall’ultima lettera. La base del titolo si misura con un elemento vuoto allineato alla baseline, così poggia proprio sulla linea.
Regia, telefono e movimento ridotto
Ogni passaggio è una timeline sola con le etichette draw, crack, open, title, settle (e leave, run, shut, knock al ritorno) e timeScale per SPEED. Un clic che arriva mentre la pagina cambia aspetta in coda. Le misure si rifanno a ogni ridimensionamento: i due titoli si adattano alla larghezza, il taglio sta a LINE_AT dell’altezza. Con il movimento ridotto la linea compare in dissolvenza, le pagine si scambiano in dissolvenza e il titolo appare già al suo posto.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LINE_AT | script.js | 0.5 | Dove passa il taglio, dall’alto: 0.5 è proprio a metà, 0.35 più in alto, 0.65 più in basso. |
DRAW | script.js | 0.6 | I secondi che la linea impiega ad attraversare la pagina. |
OPEN | script.js | 1.05 | I secondi che le due metà impiegano ad aprirsi (e, un po’ più in fretta, a richiudersi). |
CRACK | script.js | 6 | Di quanti pixel la pagina si incrina prima di aprirsi: 0 = le metà partono subito. |
KNOCK | script.js | 5 | Di quanti pixel le metà rimbalzano quando si richiudono: 0 = si fermano e basta. |
TRAIL | script.js | 0.32 | Quanto le lettere del titolo arrivano sgranate lungo la linea, in altezze di lettera: 0 = tutte insieme. |
SPEED | script.js | 1 | La velocità di tutto: 2 è il doppio, 0.5 la metà. |
Quando usarla
Per passare da una pagina all’altra in un sito sobrio, dove la tipografia fa tutto: lo studio di un designer o di un architetto, un marchio di arredamento o di ceramiche, un portfolio, la pagina «chi siamo» di un’agenzia, il passaggio fra la home e una sezione. Funziona bene con un fondo chiaro e uno scuro che si alternano.
Sul telefono
La stessa transizione con le misure adattate: i due titoli si stringono fino a stare nella larghezza dello schermo, il taglio resta a metà dell’altezza e il testo va a capo sotto la linea. Un tocco sul link la apre e la richiude.
Con il movimento ridotto
Niente si sposta: la linea compare in dissolvenza, la prima pagina svanisce mentre compare la seconda col titolo già al suo posto, poi il testo; al ritorno la prima pagina torna in dissolvenza e la linea sparisce.
Trappole
- Con l’ombra sotto il bordo di ogni metà, la metà di sotto (che sta sopra nel disegno) stendeva la sua ombra sulla metà di sopra, e da chiuse restava una fascia grigia attraverso il titolo: le ombre sono state tolte, la profondità la dà la pagina nuova che si apre dal centro.
- Le copie della pagina portavano con sé data-autoclic: il pilota automatico conta tutti gli elementi segnati e cliccava le copie. Nelle copie si tolgono data-autoclic e data-go.
- Le lettere sono inline-block per poterle muovere, e cambiando font-stretch cambiano larghezza e spingono le vicine: la larghezza del titolo e le estremità della linea si misurano a lettere ferme, con --w a 100, prima di nasconderle.
- Un clic che arriva a metà del cambio (il pilota delle anteprime clicca ogni 2,8 secondi) partirebbe sopra una timeline ancora in corsa: va in coda e parte appena la timeline finisce.
- Il clic del pilota automatico (el.click()) non ha coordinate: in quel caso la linea parte dal centro del link, non da zero.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,4 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 14 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.
