Continua a scorrere
Transizioni, Scroll
NuovaGratis
Torna alla libreria
Lo strappo fra due sezioni
Scorri dentro l’anteprima
Fra una sezione e l’altra la pagina si strappa mentre scorri: lo strappo corre da un lato all’altro lungo una linea frastagliata, sotto l’orlo resta una fascia di fibra bianca e il lembo che si stacca si arriccia mostrando il grigio del retro.
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 tear between two sections</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the page of a made-up comedy tour. Between one section and the next the page does not slide: the sheet above is
torn off as you scroll, from one side to the other, and the torn strip curls back showing the grey of its back -->
<main>
<section class="sezione sezione--carbone">
<p class="occhiello">The Small Hours Tour</p>
<h1 class="titolo">Jokes told<br>past <em>bedtime</em></h1>
<p class="sotto">Scroll down: the page tears.</p>
</section>
<div class="strappo" data-strappo data-sopra="--carbone" data-sotto="--notte" aria-hidden="true">
<canvas class="strappo__tela"></canvas>
</div>
<section class="sezione sezione--notte">
<h2 class="titolo titolo--medio">Where to <em>find us</em></h2>
<ul class="date">
<li><span class="date__giorno">14 Nov</span><span class="date__luogo">Leeds, The Night Owl</span><span class="date__nota">Late show</span></li>
<li><span class="date__giorno">22 Nov</span><span class="date__luogo">Glasgow, The Lamplighter</span><span class="date__nota">Two nights</span></li>
<li><span class="date__giorno">03 Dec</span><span class="date__luogo">Bristol, Little Moon Hall</span><span class="date__nota">Sold out</span></li>
<li><span class="date__giorno">11 Dec</span><span class="date__luogo">Dublin, The Quiet Room</span><span class="date__nota">Late show</span></li>
</ul>
</section>
<!-- the second tear goes the other way: mirrored, with the colours swapped -->
<div class="strappo" data-strappo data-sopra="--notte" data-sotto="--carbone" data-rovescio aria-hidden="true">
<canvas class="strappo__tela"></canvas>
</div>
<section class="sezione sezione--carbone sezione--fine">
<h2 class="titolo titolo--medio">See you <em>after midnight</em></h2>
<p class="sotto">Doors at eleven. Bring a friend who laughs loudly.</p>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.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
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 «Lo strappo fra due sezioni» da Animorio e adattala al mio sitoCosa fa
La pagina di un tour comico inventato, The Small Hours Tour, in due colori scuri: carbone e blu notte. Fra la prima sezione e la seconda non c’è un bordo dritto: scorrendo, il foglio carbone comincia a strapparsi dal lato destro, piano, e poi sempre più in fretta verso sinistra. Dove lo strappo è passato, l’orlo del foglio è frastagliato e un po’ in pendenza, sotto c’è una fascia di carta bianca, sottile da una parte e spessa dall’altra, e sotto ancora la sezione blu. Proprio sulla punta dello strappo il lembo che si sta staccando si piega all’indietro: una lingua di carta grigia, sfrangiata sul bordo, con la sua ombra sul blu. Portando il mouse vicino alla punta, lo strappo va un poco più avanti. Fra la seconda sezione e l’ultima c’è un altro strappo, rovesciato: parte da sinistra e ha i colori scambiati.
Come funziona
Un solo numero
Ogni strappo è una fascia fra due sezioni con un canvas dentro, e tutto quello che si vede dipende da un numero: quanto lo strappo è andato avanti. ScrollTrigger lo porta da 0 a OVERSHOOT mentre si scorrono LENGTH altezze della fascia, centrate su quando la fascia passa sul fondo dello schermo, con la curva EASE: power3.in parte lentissima e finisce di corsa. Oltre 1 la punta è già uscita dallo schermo, e il lembo con lei.
L’orlo frastagliato
L’orlo è una linea in pendenza di SLOPE gradi spostata da un rumore: un valore a caso a ogni intero e una curva morbida fra uno e l’altro. Il rumore grande dà la forma, quello fine, mescolato nella misura DETAIL, la rende ruvida; quanto la linea si allontana dal dritto lo dice RAGGED, in larghezze. La linea si calcola una volta per larghezza, un punto ogni tre pixel, e poi si legge e basta.
La fibra bianca
Sotto l’orlo, dove lo strappo è passato, c’è la carta strappata: una fascia color carta alta fino a FIBRE della fascia, con un terzo rumore che la fa spessa in un punto e sottile in un altro e cresce da un quarto al pieno andando verso il lato da cui parte lo strappo; il bordo di sotto è sfrangiato da un rumore finissimo. Sopra la carta c’è una grana fatta una volta sola, sovrapposta in moltiplica, e sull’orlo un filo di luce.
Il lembo che si arriccia
Sulla punta il foglio non è ancora staccato: a sinistra resta intero, a destra è tagliato lungo l’orlo. Il lembo è una lingua che parte dalla punta, scende fino al fondo piegandosi un poco ed è larga CURL della fascia in basso. Il bordo esterno è gonfio e sfrangiato come uno strappo vero; il colore è la carta, con la grana e una sfumatura scura sulla piega, chiara in mezzo e di nuovo scura fuori, che lo fa sembrare arrotolato. La sua ombra sul blu è forte SHADOW e sparisce negli ultimi decimi dello strappo.
Il mouse e il rovescio
Il mouse, da -1 a 1 sulla fascia e seguito con morbidezza, conta tanto più quanto è vicino alla punta: lì la spinge avanti fino a PULL della larghezza e allarga un poco il lembo. Lo strappo rovesciato è lo stesso disegno specchiato con una scala di -1 e i due colori scambiati, presi dagli attributi data-sopra e data-sotto. Il canvas si ridipinge solo quando la fascia è sullo schermo e qualcosa è cambiato.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SLOPE | script.js | 11.25 | Quanto pende lo strappo, in gradi (nel sito un ottavo di angolo retto). |
RAGGED | script.js | 0.04 | Quanto l’orlo si allontana dal dritto, in larghezze (nel sito 0,04). |
DETAIL | script.js | 0.25 | Quanto del rumore fine entra nell’orlo (nel sito 0,25). |
FIBRE | script.js | 0.15 | Il massimo spessore della fibra bianca, in fasce (nel sito 0,15). |
CURL | script.js | 0.3 | Quanto è largo in basso il lembo che si arriccia, in fasce. |
SHADOW | script.js | 0.66 | Quanto è scura l’ombra del lembo (nel sito 0,66). |
LENGTH | script.js | 1.7 | Quante altezze della fascia di scorrimento dura lo strappo (nel sito 1,7). |
OVERSHOOT | script.js | 1.15 | Fin dove arriva il numero: oltre 1 il lembo esce dallo schermo (nel sito 1,15). |
PULL | script.js | 0.04 | Quanto il mouse può tirare avanti la punta, in larghezze. |
EASE | script.js | 'power3.in' | La curva fra lo scorrimento e lo strappo (nel sito power3.in). |
Quando usarla
Per il passaggio fra due sezioni di colore diverso in una pagina con un carattere fatto a mano, da collage o da rivista: un artista, un festival, un locale, un libro. Uno o due per pagina, nei punti in cui cambia argomento.
Sul telefono
Uguale: la fascia è più bassa, l’orlo è più corto e il lembo più stretto; tutto si muove col dito come col mouse a scorrere.
Con il movimento ridotto
Lo strappo è già finito: l’orlo frastagliato e la fibra bianca sono al loro posto, senza lembo e senza movimento.
Trappole
- Il rumore va calcolato in pixel divisi per la larghezza del progetto, non in centesimi della fascia: altrimenti su uno schermo stretto l’orlo diventa una sega fitta e su uno largo una collina.
- Con lo strappo rovesciato si specchia il disegno con ctx.scale(-1, 1), ma il mouse resta nel verso dello schermo: va girato anche lui, o la punta scappa dalla parte sbagliata.
- L’ombra del lembo con shadowBlur va disegnata prima della grana e della sfumatura, che vanno sullo stesso tracciato senza ombra: altrimenti ogni strato aggiunge la sua e il blu diventa nero.
- Il canvas va rimisurato a ogni refresh di ScrollTrigger e non solo al resize: quando i caratteri arrivano le sezioni si allungano e la fascia cambia posto.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Inter Tight (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,0 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 8 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.
