La card della camera che si alza
Card, 3D, Hover, SVG
NuovaGratis
Tutti i componenti
La nav col nastro di carta
I link del portfolio di un illustratore, con quello corrente su un pezzo di nastro di carta da pittore, crema, storto e strappato ai due capi. Scegliendo un altro link il nastro si stacca con una piega che si alza e mostra il retro, e un rotolo arriva dal bordo, stende un pezzo nuovo sulla parola, lo strappa con un capo frastagliato sempre diverso e lo schiaccia giù.
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 masking tape nav</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the nav of an illustrator's portfolio: the current link sits on a strip of masking tape. Choosing another link
the strip peels off with a fold that lifts and shows its back, and a roll comes in from the edge, lays a new
strip on the word, tears it off with a ragged end and slaps it down -->
<nav class="mt" aria-label="Main" data-nav>
<div class="mt__desk" aria-hidden="true" data-desk></div>
<ul class="mt__list" data-list>
<li><a class="mt__link" href="#" aria-current="page" data-link><span class="mt__word" data-word>Illustration</span></a></li>
<li><a class="mt__link" href="#" data-link data-autoclic><span class="mt__word" data-word>Prints</span></a></li>
<li><a class="mt__link" href="#" data-link data-autoclic><span class="mt__word" data-word>Shop</span></a></li>
<li><a class="mt__link" href="#" data-link data-autoclic><span class="mt__word" data-word>About</span></a></li>
</ul>
</nav>
<!-- what every strip is made of: the paper's fibres, running along the strip, its sheen and the soft shadow under it -->
<svg class="mt__defs" aria-hidden="true" focusable="false">
<defs>
<!-- the texture is drawn once by the script, as an image: cheaper to repaint than a noise filter -->
<pattern id="mt-fibres" patternUnits="userSpaceOnUse" width="240" height="60">
<image width="240" height="60" data-fibres/>
</pattern>
<filter id="mt-soft" x="-20%" y="-60%" width="140%" height="220%">
<feGaussianBlur stdDeviation="1.6"/>
</filter>
<linearGradient id="mt-crease" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#46300e" stop-opacity="0.34"/>
<stop offset="1" stop-color="#46300e" stop-opacity="0"/>
</linearGradient>
<linearGradient id="mt-sheen" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.34"/>
<stop offset="0.45" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="1" stop-color="#7a5a20" stop-opacity="0.08"/>
</linearGradient>
</defs>
</svg>
</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.
17 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 nav col nastro di carta» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco quattro link in un carattere con le grazie, Illustration, Prints, Shop e About, grigi tranne quello corrente, nero e posato su un pezzo di nastro di carta: crema, un po' trasparente, con le fibre che corrono per il lungo, una luce sul bordo alto, un'ombra morbida sotto, un po' storto e strappato a mano ai due capi, con i denti e i fili bianchi della carta. All'arrivo un rotolo di nastro scende dal bordo alto, stende il nastro sotto Illustration mentre gira, lo strappa con uno scatto e il pezzo viene schiacciato sulla carta: si appiattisce un attimo, rimbalza e le grinze si spianano. Cliccando un altro link il nastro vecchio si stacca dal capo verso il nuovo link: una linea di piega lo percorre e la parte staccata si alza e si ripiega sopra il resto, mostrando il retro più opaco, poi tutto il pezzo vola via sbiadendo. Intanto il rotolo scende sopra la nuova parola, stende un pezzo nuovo con un angolo diverso, lo strappa e lo schiaccia giù. Puntando il link col nastro si solleva l'angolo in basso a destra del pezzo, con la sua ombra; puntando un altro link si solleva un poco l'angolo dalla sua parte, come se il nastro stesse per staccarsi. Cliccando il link già scelto, il nastro viene ripremuto con un colpetto.
Come funziona
Lo strappo, sempre diverso
I due capi di ogni pezzo sono tracciati a ogni strappo con lo spostamento del punto medio: 33 punti lungo l'altezza, ogni livello più liscio del precedente (0,58 volte, partendo da ROUGH), più una fila di dentini alterni e una pendenza, come quando la mano tira di lato. I bordi lunghi, tagliati dalla lama del rotolo, sono quasi dritti. Sui capi, un tratto chiaro e qualche filo che sporge fanno le fibre della carta strappata. Tutto il caso viene da un generatore con il seme che cresce a ogni strappo, così la sequenza è sempre la stessa.
La carta
Il pezzo è un SVG grande quanto lui: un'ombra sfocata, il corpo crema all'84%, le fibre (una piastrella di fili lunghi e sottili disegnata una volta su una tela e usata come motivo), una luce in sfumatura dall'alto, le grinze, il bordo strappato e un velo scuro per le ombre della piega. Il pezzo sta sotto le parole, così il testo non è mai coperto, e ogni angolo è diverso da quello di prima di almeno metà di TILT.
La piega in 3D
Il pezzo è disegnato due volte: la parte ancora attaccata e quella che si stacca, tagliate lungo la linea di piega da due clip-path a poligono (il rettangolo tagliato dal semipiano, calcolato a ogni fotogramma). La parte che si stacca gira attorno alla linea con rotate3d, sull'asse scelto in modo che vada verso chi guarda; oltre i 90 gradi mostra il retro, e un velo scuro cresce col seno dell'angolo. Sulla parte attaccata, lungo la piega, una sfumatura fa l'ombra.
Il viaggio del rotolo
Una timeline: il pezzo vecchio si ripiega (la linea percorre due terzi del pezzo in PEEL secondi, inclinata di 6 gradi) e poi vola via; il rotolo scende dal bordo alto girando di quanto ha viaggiato diviso il raggio, percorre la parola in LAY secondi mentre un clip-path scopre il nastro dietro di lui, poi lo strappo: il capo frastagliato compare, il rotolo scatta in alto e sparisce, il pezzo si appiattisce (scaleY 0,9) e torna con elastic.out mentre le grinze sbiadiscono.
L'angolo che si alza
Puntando un link, o arrivandoci col Tab, la stessa piega serve per un angolo: una linea dal bordo basso al capo stacca il triangolo dell'angolo, che si alza di LIFT gradi (o di poco meno della metà verso un altro link) con back.out e un'ombra portata. Passando da un lato all'altro il primo angolo si abbassa prima che si alzi l'altro.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TILT | script.js | 4 | Quanto può essere storto un pezzo di nastro, al massimo, in gradi. |
ROUGH | script.js | 4.5 | Quanto è frastagliato un capo strappato, in pixel. |
OVERHANG | script.js | 14 | Quanto sporge il nastro dalla parola da ogni lato, in pixel. |
PEEL | script.js | 0.55 | I secondi che il nastro vecchio ci mette a staccarsi. |
LAY | script.js | 0.34 | I secondi che il rotolo ci mette a stendere il nastro su una parola. |
LIFT | script.js | 52 | Quanto si alza l'angolo sotto il puntatore, in gradi. |
Quando usarla
Per la nav del portfolio di chi illustra, disegna o fa grafica, di una cartoleria, di uno studio creativo, di un negozio di stampe o di un diario di lavoro.
Sul telefono
La fila si stringe con lo schermo (il testo fino a 19 pixel, gli spazi fino a 10) e il rotolo e il nastro seguono la grandezza del testo; il tocco sceglie senza aspettare il doppio tocco, e il rotolo esce verso l'alto, senza uscire di lato dallo schermo.
Con il movimento ridotto
Niente rotolo, niente piega e niente angoli che si alzano: il nastro vecchio sbiadisce e quello nuovo, già strappato e storto, compare in dissolvenza sulla parola scelta.
Trappole
- Chrome può non disegnare affatto un elemento che ha insieme un clip-path e un rotate3d su un asse inclinato: il clip-path sta su una scatola dentro quella che gira, e il problema sparisce.
- Il filtro feTurbulence per le fibre andava ricalcolato a ogni fotogramma mentre il clip-path cambiava, e l'animazione scattava: le fibre sono una piastrella disegnata una volta su una tela e usata come motivo SVG.
- L'ombra della piega deve stare dentro la forma del nastro: messa come elemento HTML usciva oltre i capi strappati; ora è un rettangolo con una sfumatura dentro l'SVG, tagliato da un clipPath con la forma del pezzo.
- Se la piega percorre tutto il pezzo, la parte staccata finisce oltre il capo e passa sopra la parola accanto: si ferma a due terzi e poi il pezzo intero vola via.
- Una scelta può arrivare a metà del viaggio: la timeline in corso viene portata alla fine (progress(1)), così il pezzo appena steso diventa quello vecchio e si stacca come gli altri.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 5 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
