Vai al contenuto
animorio
EN
Torna alla libreria

Il quaderno ad anelli

Scroll, SVG, 3DGSAP, Solo CSSImpegnativaPeso compresso: Demo 16 KBGSAP + ScrollTrigger 45 KBLenis 5,3 KBGratisScarica lo zip

Scorri dentro l’anteprima

Un quaderno a spirale aperto sul tavolo: scorrendo, le pagine si voltano in 3D intorno agli anelli, si curvano e gettano l’ombra sulla pagina sotto; su ogni pagina nuova uno schizzo a penna si disegna da solo, le note si scrivono a mano e post-it e graffette arrivano con un rimbalzo.

Il codice

Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nella scheda React la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Il quaderno ad anelli</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/caveat@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <!-- la scena: più alta dello schermo; il palco resta fermo e, scorrendo, le pagine si voltano -->
    <section class="scena" data-scena>
      <div class="palco" data-palco>
        <header class="testata">
          <p class="testata__marchio">Studio Pell <span>field notes</span></p>
          <p class="testata__titolo" data-titolo aria-live="polite"></p>
        </header>

        <!-- la vista in prospettiva: il piano del tavolo con il quaderno, e sopra una copia del piano con gli anelli -->
        <div class="vista" data-vista>
          <div class="piano" data-piano>
            <div class="tappetino" aria-hidden="true"></div>
            <!-- la matita e la gomma sul tavolo -->
            <svg class="matita" data-matita viewBox="0 0 300 26" aria-hidden="true">
              <path class="matita__ombra" d="M14 22 L262 22 L298 15 L262 8 L14 8 Z" />
              <path class="matita__gomma" d="M0 5 Q0 1 4 1 L22 1 L22 21 L4 21 Q0 21 0 17 Z" />
              <path class="matita__ghiera" d="M20 0 L38 0 L38 22 L20 22 Z" />
              <path class="matita__riga" d="M24 0 L24 22 M29 0 L29 22 M34 0 L34 22" />
              <path class="matita__corpo" d="M37 1 L246 1 L246 21 L37 21 Z" />
              <path class="matita__lato" d="M37 8 L246 8 L246 14 L37 14 Z" />
              <path class="matita__legno" d="M246 1 L284 9.5 Q288 11 284 12.5 L246 21 Z" />
              <path class="matita__mina" d="M276 7.8 L290 10.6 Q292 11 290 11.4 L276 14.2 Z" />
            </svg>
            <div class="gomma" data-gomma aria-hidden="true"><span>PELL</span></div>

            <!-- il quaderno: il cartone sotto, il cartone sopra (la copertina già girata) e le pagine -->
            <div class="cartone cartone--giu" aria-hidden="true"><div class="spessore" data-spessore></div></div>
            <div class="cartone cartone--su" aria-hidden="true">
              <div class="cartone__dentro">
                <p class="cartone__nome">Studio Pell</p>
                <p class="cartone__riga">Field notes, spring.</p>
                <p class="cartone__riga">If found, please return it to the studio.</p>
              </div>
              <div class="cartone__fori"></div>
              <div class="ombra" data-ombra-copertina></div>
            </div>
            <svg class="fili" data-fili aria-hidden="true"></svg>
            <div class="pagine" data-pagine></div>
            <svg class="anelli anelli--su" data-anelli-su aria-hidden="true"></svg>
          </div>
          <div class="piano piano--anelli" data-piano-anelli aria-hidden="true">
            <svg class="anelli anelli--giu" data-anelli-giu></svg>
          </div>
        </div>

        <p class="cenno" data-cenno>Scroll to leaf through the notebook</p>
      </div>
    </section>
  </main>

  <!-- le pagine del quaderno: uno schizzo in SVG per pagina, nell'ordine in cui si voltano.
       .t è un tratto di penna, .t.r di matita rossa, .nota una scritta a mano, .postit un post-it, .graffetta una graffetta -->
  <template data-pagina data-nome="Day one, the lighthouse">
    <svg class="schizzo" viewBox="0 0 568 400">
      <text class="nota nota--grande" x="44" y="86">Coast trip</text>
      <text class="nota" x="46" y="116">field notes, day one</text>
      <path class="t" d="M120 206 C119 192 131 182 144 182 C158 182 168 193 168 206 C168 220 157 230 144 230 C130 230 120 220 121 205" />
      <path class="t" d="M144 166 L144 156 M172 178 L180 171 M184 206 L194 206 M116 178 L108 171 M104 206 L94 206" />
      <text class="nota" x="102" y="262">first light, 6 am</text>
      <path class="t" d="M376 330 L386 152 L414 152 L424 330" />
      <path class="t" d="M380 152 L380 130 L420 130 L420 152 M376 152 L424 152" />
      <path class="t" d="M374 130 L400 108 L426 130 Z M400 108 L400 98" />
      <path class="t" d="M392 130 L392 152 M408 130 L408 152" />
      <path class="t r" d="M384 196 L416 196 L417 214 L383 214 Z M386 200 L414 210 M385 206 L405 213 M395 199 L415 205" />
      <path class="t r" d="M381 252 L419 252 L420 272 L380 272 Z M383 256 L417 268 M382 263 L405 271 M392 255 L418 262" />
      <path class="t" d="M396 300 L396 286 C396 282 404 282 404 286 L404 300" />
      <path class="t" d="M424 138 L506 114 M424 144 L510 156" />
      <path class="t" d="M318 346 C336 326 360 322 384 332 C404 322 430 318 460 330 C474 334 486 342 496 348" />
      <path class="t" d="M300 362 C314 354 328 366 342 360 C356 352 370 366 384 360 C398 352 412 366 426 360 C440 352 454 366 468 360 C482 352 496 366 512 358" />
      <path class="t" d="M236 82 C242 74 248 74 252 82 C256 74 262 74 268 82" />
      <path class="t" d="M272 108 C276 102 280 102 283 108 C286 102 290 102 294 108" />
      <path class="t" d="M300 262 C320 258 344 252 372 250 M362 244 L374 250 L364 258" />
      <text class="nota" x="204" y="290">red and white bands,</text>
      <text class="nota" x="204" y="314">keep for the poster?</text>
      <g class="postit postit--giallo" transform="translate(56 300) rotate(-5)">
        <path class="postit__ombra" d="M4 6 L124 4 L126 82 L6 86 Z" />
        <path class="postit__carta" d="M0 0 L120 0 L120 80 L0 80 Z" />
        <path class="postit__colla" d="M0 0 L120 0 L120 16 L0 16 Z" />
        <text class="postit__testo" x="12" y="40">pack the</text>
        <text class="postit__testo" x="12" y="64">good pens</text>
      </g>
    </svg>
  </template>

  <template data-pagina data-nome="The Pell chair, third try">
    <svg class="schizzo" viewBox="0 0 568 400">
      <text class="nota nota--grande" x="44" y="86">Pell chair, v3</text>
      <path class="t" d="M246 236 L372 236 L372 250 L246 250 Z" />
      <path class="t" d="M258 250 L246 352 M268 250 L258 352" />
      <path class="t" d="M358 250 L370 352 M368 250 L382 352" />
      <path class="t" d="M254 236 L234 118 M264 236 L246 118" />
      <path class="t" d="M228 120 C236 112 248 112 254 120 L256 152 C248 146 238 146 232 152 Z" />
      <path class="t" d="M252 312 L374 312" />
      <path class="t" d="M248 236 C280 228 330 228 372 236" />
      <path class="t" d="M206 236 L206 352 M200 236 L212 236 M200 352 L212 352" />
      <text class="nota" x="168" y="300">450</text>
      <path class="t" d="M246 372 L382 372 M246 366 L246 378 M382 366 L382 378" />
      <text class="nota" x="298" y="394">520</text>
      <path class="t" d="M470 98 C498 98 518 118 518 146 C518 174 498 194 470 194 C442 194 422 174 422 146 C422 118 442 98 470 98" />
      <path class="t" d="M440 132 L500 132 L500 146 L440 146 Z M462 146 L456 184 M478 146 L484 184 M468 126 L468 156" />
      <path class="t" d="M430 178 L372 238" />
      <text class="nota" x="424" y="222">dowel, no screws</text>
      <path class="t r" d="M396 316 C380 314 376 300 384 294 M378 300 L384 293 L392 298" />
      <text class="nota" x="402" y="324">legs thinner?</text>
      <path class="t r" d="M352 256 C350 290 356 330 364 356 M362 256 C366 300 372 330 378 356" />
      <g class="ritaglio" transform="translate(82 132) rotate(-6)">
        <path class="ritaglio__ombra" d="M4 5 L96 3 L98 76 L6 80 Z" />
        <path class="ritaglio__stoffa" d="M0 0 L92 0 L92 72 L0 72 Z" />
        <path class="ritaglio__trama" d="M6 10 L86 10 M6 20 L86 20 M6 30 L86 30 M6 40 L86 40 M6 50 L86 50 M6 60 L86 60 M14 4 L14 68 M30 4 L30 68 M46 4 L46 68 M62 4 L62 68 M78 4 L78 68" />
      </g>
      <text class="nota" x="80" y="240">wool, rust</text>
      <g class="graffetta" transform="translate(112 112) rotate(-6)">
        <path class="graffetta__filo" d="M6 50 L6 8 C6 2 18 2 18 8 L18 44 C18 50 12 50 12 44 L12 14" />
      </g>
    </svg>
  </template>

  <template data-pagina data-nome="The blue tile street">
    <svg class="schizzo" viewBox="0 0 568 400">
      <text class="nota nota--grande" x="44" y="86">Blue tile street</text>
      <path class="t" d="M150 360 L150 132 L420 132 L420 360" />
      <path class="t" d="M138 132 L432 132 M142 122 L428 122 L432 132" />
      <path class="t" d="M178 210 L178 168 C178 150 210 150 210 168 L210 210 Z" />
      <path class="t" d="M268 210 L268 168 C268 150 300 150 300 168 L300 210 Z" />
      <path class="t" d="M358 210 L358 168 C358 150 390 150 390 168 L390 210 Z" />
      <path class="t" d="M256 222 L312 222 M260 222 L260 240 M270 222 L270 240 M280 222 L280 240 M290 222 L290 240 M300 222 L300 240 M308 222 L308 240 M256 240 L312 240" />
      <path class="t" d="M178 300 L178 262 C178 244 210 244 210 262 L210 300 Z" />
      <path class="t" d="M358 300 L358 262 C358 244 390 244 390 262 L390 300 Z" />
      <path class="t" d="M262 360 L262 270 C262 246 306 246 306 270 L306 360 M284 254 L284 360" />
      <path class="t" d="M150 318 L262 318 M306 318 L420 318" />
      <path class="t" d="M156 330 L164 322 L172 330 L164 338 Z M180 330 L188 322 L196 330 L188 338 Z M204 330 L212 322 L220 330 L212 338 Z M228 330 L236 322 L244 330 L236 338 Z M324 330 L332 322 L340 330 L332 338 Z M348 330 L356 322 L364 330 L356 338 Z M372 330 L380 322 L388 330 L380 338 Z M396 330 L404 322 L412 330 L404 338 Z" />
      <path class="t" d="M156 350 L164 342 L172 350 M180 350 L188 342 L196 350 M204 350 L212 342 L220 350 M228 350 L236 342 L244 350 M324 350 L332 342 L340 350 M348 350 L356 342 L364 350 M372 350 L380 342 L388 350 M396 350 L404 342 L412 350" />
      <path class="t r" d="M174 154 C170 140 196 132 214 146 C222 156 216 170 204 168" />
      <path class="t" d="M120 168 C140 170 158 164 172 160 M162 154 L174 159 L164 167" />
      <text class="nota" x="40" y="196">arches,</text>
      <text class="nota" x="40" y="220">a logo?</text>
      <path class="t" d="M110 300 C124 316 136 324 150 330 M138 318 L151 331 L136 334" />
      <text class="nota" x="36" y="290">tiles, four colours</text>
      <g class="postit postit--rosa" transform="translate(440 222) rotate(5)">
        <path class="postit__ombra" d="M4 6 L112 4 L114 82 L6 86 Z" />
        <path class="postit__carta" d="M0 0 L108 0 L108 80 L0 80 Z" />
        <path class="postit__colla" d="M0 0 L108 0 L108 16 L0 16 Z" />
        <text class="postit__testo" x="10" y="40">come back</text>
        <text class="postit__testo" x="10" y="64">at dusk</text>
      </g>
    </svg>
  </template>

  <template data-pagina data-nome="A fig leaf from the market">
    <svg class="schizzo" viewBox="0 0 568 400">
      <text class="nota nota--grande" x="44" y="86">Fig leaf, market</text>
      <path class="t" d="M300 300 C272 306 240 300 222 282 C200 292 172 288 158 268 C176 258 188 246 194 232 C170 230 148 214 144 190 C168 196 190 192 204 182 C190 162 192 136 208 116 C222 134 238 148 254 154 C258 132 274 110 300 96" />
      <path class="t" d="M300 96 C326 110 342 132 346 154 C362 148 378 134 392 116 C408 136 410 162 396 182 C410 192 432 196 456 190 C452 214 430 230 406 232 C412 246 424 258 442 268 C428 288 400 292 378 282 C360 300 328 306 300 300" />
      <path class="t" d="M300 300 C302 320 306 340 316 364" />
      <path class="t" d="M300 296 C300 240 301 160 300 104" />
      <path class="t" d="M300 250 C270 240 232 222 204 200 M300 250 C330 240 368 222 396 200" />
      <path class="t" d="M300 196 C282 180 264 166 252 158 M300 196 C318 180 336 166 348 158" />
      <path class="t" d="M300 280 C272 282 244 278 222 272 M300 280 C328 282 356 278 378 272" />
      <path class="t" d="M252 230 L236 246 M348 230 L364 246 M268 186 L254 200 M332 186 L346 200" />
      <path class="t" d="M64 312 L94 312 L94 342 L64 342 Z M68 316 L90 338 M68 326 L80 338 M74 316 L90 332" />
      <path class="t" d="M108 312 L138 312 L138 342 L108 342 Z M112 322 L134 322 M112 330 L134 330" />
      <path class="t" d="M152 312 L182 312 L182 342 L152 342 Z M156 316 L178 338 M156 324 L170 338 M162 316 L178 332 M156 332 L164 338 M170 316 L178 324" />
      <text class="nota nota--piccola" x="62" y="364">olive</text>
      <text class="nota nota--piccola" x="108" y="364">sand</text>
      <text class="nota nota--piccola" x="154" y="364">ink</text>
      <path class="t r" d="M146 318 C140 300 168 296 184 304 C196 314 190 346 172 350 C156 352 146 344 146 330" />
      <text class="nota" x="420" y="330">wrapping paper</text>
      <text class="nota" x="420" y="354">print, maybe</text>
      <path class="t" d="M446 312 C440 298 428 290 412 282 M416 292 L410 281 L423 280" />
      <g class="postit postit--giallo" transform="translate(436 104) rotate(-4)">
        <path class="postit__ombra" d="M4 6 L104 4 L106 82 L6 86 Z" />
        <path class="postit__carta" d="M0 0 L100 0 L100 80 L0 80 Z" />
        <path class="postit__colla" d="M0 0 L100 0 L100 16 L0 16 Z" />
        <text class="postit__testo" x="10" y="40">ask Ines</text>
        <text class="postit__testo" x="10" y="64">about paper</text>
      </g>
    </svg>
  </template>

  <template data-pagina data-nome="Last morning, then home">
    <svg class="schizzo" viewBox="0 0 568 400">
      <text class="nota nota--grande" x="44" y="86">Last morning</text>
      <path class="t" d="M136 334 C136 316 324 316 324 334 C324 352 136 352 136 334 Z" />
      <path class="t" d="M174 252 C176 302 194 330 230 330 C266 330 284 302 286 252" />
      <path class="t" d="M174 252 C174 240 286 240 286 252 C286 264 174 264 174 252 Z" />
      <path class="t" d="M284 268 C316 262 320 302 278 306" />
      <path class="t" d="M206 230 C196 210 216 200 206 180 M230 228 C220 204 242 194 230 168 M254 230 C246 212 264 202 254 186" />
      <path class="t" d="M190 284 C200 296 214 302 228 304" />
      <text class="nota" x="364" y="124">to do back home</text>
      <text class="nota" x="364" y="164">poster, the lighthouse</text>
      <text class="nota" x="364" y="198">chair, thinner legs</text>
      <text class="nota" x="364" y="232">tile print samples</text>
      <text class="nota" x="364" y="266">call the printer</text>
      <path class="t" d="M360 158 C420 155 470 157 530 154" />
      <path class="t" d="M360 192 C410 190 450 192 504 189" />
      <path class="t" d="M360 226 C400 224 440 226 492 222" />
      <path class="t r" d="M356 280 C400 276 450 282 494 276" />
      <g class="biglietto" transform="translate(48 116) rotate(-4)">
        <path class="biglietto__ombra" d="M4 5 L176 3 L178 66 L6 70 Z" />
        <path class="biglietto__carta" d="M0 0 L172 0 L172 62 L0 62 Z" />
        <path class="biglietto__strappo" d="M132 4 L132 58" />
        <text class="biglietto__testo" x="12" y="26">TRAIN 08:14</text>
        <text class="biglietto__testo biglietto__testo--piccolo" x="12" y="46">COAST TO CITY</text>
      </g>
      <g class="graffetta" transform="translate(64 96) rotate(-4)">
        <path class="graffetta__filo" d="M6 50 L6 8 C6 2 18 2 18 8 L18 44 C18 50 12 50 12 44 L12 14" />
      </g>
      <g class="postit postit--rosa" transform="translate(410 296) rotate(-3)">
        <path class="postit__ombra" d="M4 6 L112 4 L114 82 L6 86 Z" />
        <path class="postit__carta" d="M0 0 L108 0 L108 80 L0 80 Z" />
        <path class="postit__colla" d="M0 0 L108 0 L108 16 L0 16 Z" />
        <text class="postit__testo" x="12" y="40">ship it</text>
        <text class="postit__testo" x="12" y="64">on Friday</text>
      </g>
    </svg>
  </template>

  <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="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.

29 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 «Il quaderno ad anelli» da Animorio e adattala al mio sito

Cosa fa

Su un tappetino da taglio verde c’è un quaderno a spirale aperto, visto un po’ dall’alto, con accanto una matita e una gomma. In alto c’è la copertina di cartone già girata, con scritto a mano a chi appartiene; in basso la prima pagina, a righe, e fra le due la spirale di metallo, con gli anelli che escono dai fori di una pagina, passano sopra il dorso e rientrano nei fori dell’altra. È il taccuino di viaggio di uno studio inventato, Studio Pell. Appena la pagina compare, uno schizzo a penna si disegna da solo, tratto dopo tratto, ripassato due volte come fa la mano: un faro sugli scogli, con le fasce colorate a matita rossa; le note si scrivono lettera per lettera e un post-it giallo cade sulla pagina e rimbalza. Scorrendo, la pagina si stacca dalla pila, si alza curvandosi un poco, passa in piedi sopra gli anelli e ricade dall’altra parte, dove sbatte e rimbalza due o tre volte; mentre sale, la sua ombra corre sulla pagina sotto e si ritira verso il dorso, poi ricompare sulla pila girata. Della pagina voltata si vede il retro, con lo schizzo che traspare al contrario. Sotto c’è la pagina nuova, che si disegna a sua volta: la sedia dello studio con le quote, un ritaglio di stoffa e una graffetta; una facciata con gli archi e le piastrelle; una foglia di fico con i campioni di colore; l’ultima mattina con la tazza, il biglietto del treno e la lista delle cose da fare, cancellate una per una. In alto il titolo della pagina aperta cambia con le lettere che saltano. Tornando su le pagine si voltano all’indietro e quelle coperte si cancellano, così si ridisegnano. Col mouse i post-it si sollevano quando ci passi sopra.

Come funziona

Il tavolo in prospettiva

Il palco è sticky, alto 100lvh, dentro una sezione alta qualche schermo. Il tavolo è un piano grande, con perspective sul genitore e rotateX per vederlo dall’alto: il tappetino, la matita, la gomma, i due cartoni del quaderno e le pagine ci stanno sopra con transform-style: preserve-3d. Le misure (larghezza della pagina, spazio del dorso, passo degli anelli) le calcola lo script dalla finestra e le scrive come variabili CSS, così il quaderno sta sempre fra la testata e il cenno, anche sul telefono.

Una pagina in tre strisce

Ogni pagina è fatta di tre strisce annidate: la prima ruota intorno al dorso (transform-origin spostato di metà dorso sopra il bordo), le altre due ruotano un poco all’indietro rispetto a quella che le porta. Così la pagina si curva: l’angolo in più è CURL per sin(π·p) e si annulla a pagina piatta, sia sotto sia sopra. Ogni striscia ha un davanti e un retro (backface-visibility: hidden, il retro con rotateX(180deg)) e dentro tutte e due c’è il foglio intero, spostato in su per mostrarne il pezzo giusto. Un velo scuro su ogni faccia segue l’inclinazione della sua striscia: è la luce.

Gli anelli davanti e dietro

Un anello è un cerchio intorno al dorso. Visto dall’alto, un punto sollevato di z sopra la carta si vede spostato verso il fondo di z·tan(inclinazione): lo script disegna così l’arco sul piano, dal foro in basso, sopra il dorso, fino al foro in alto; sotto la carta il filo torna indietro e si vede solo nello spazio del dorso. La metà sopra le pagine girate sta nel quaderno, un poco sollevata, così una pagina in piedi la copre; la metà sopra le pagine da girare sta in un piano gemello, con la stessa trasformazione, disegnato davanti a tutto.

Lo scorrimento e l’ombra

Lenis rende morbido lo scorrimento e una timeline con ScrollTrigger (scrub) porta per ogni pagina un numero da 0 a 1, con una pausa fra una pagina e l’altra. A ogni aggiornamento la pagina prende angolo, curva e quota (translateZ, per stare sopra la pila giusta) e la pagina sotto riceve la sua ombra: un gradiente dal dorso lungo H·cos(angolo), forte finché la pagina è bassa. Quando la pagina tocca la pila parte un piccolo rimbalzo a tempo (bounce.out) che si somma all’angolo e fa sbattere il bordo.

Lo schizzo che si disegna

Gli schizzi sono SVG nei template della pagina. Ogni tratto ha pathLength=1 e un secondo passaggio un poco spostato; si disegna portando stroke-dashoffset da 1 a 0, con una durata che cresce con la sua lunghezza vera. Le note sono divise in tspan e compaiono lettera per lettera con fill-opacity; post-it e graffette cadono con back.out ed elastic.out. Il disegno parte quando la pagina sopra è girata a metà, si completa in fretta se la pagina comincia a voltarsi prima della fine e si azzera quando torna coperta. SPEED cambia il timeScale.

Valori da cambiare

NomeFileDi partenzaCosa cambia
PAGESscript.js5Quante pagine ha il quaderno, da 2 a 5 (una per schizzo): l’ultima resta aperta, le altre si voltano.
CURLscript.js1Quanto si curva la pagina mentre si volta: 0 è rigida come un cartoncino, 2 molto morbida.
PAPERscript.js'lines'La carta delle pagine: 'lines' a righe col margine rosso, 'grid' a quadretti, 'blank' bianca.
INKscript.js'#22305c'Il colore della penna di schizzi e note.
SPEEDscript.js1La velocità con cui gli schizzi si disegnano: 2 è il doppio, 0.5 la metà.
TILTscript.js30Quanto vediamo il quaderno dall’alto, in gradi: 0 è di fronte, 45 molto inclinato.

Provali nel Playground

Quando usarla

Per raccontare un processo o un viaggio un passo alla volta: la pagina «come lavoriamo» di uno studio, il diario di un progetto, un portfolio di schizzi, il sito di una cartoleria o di chi fa quaderni, un caso studio che mostra le idee prima del risultato.

Sul telefono

La stessa animazione con le misure adattate: il quaderno è largo quasi quanto lo schermo, la prospettiva è più lunga perché la pagina in piedi non esca dai lati, e la matita e la gomma stanno sotto il quaderno invece che ai lati.

Con il movimento ridotto

Niente pagine che si alzano e niente scorrimento morbido: gli schizzi sono già disegnati e, scorrendo, la pagina sfuma via in dissolvenza e ricompare girata in alto, mostrando sotto quella nuova.

Trappole

  • Un elemento con preserve-3d perde la profondità se ha opacity, overflow, filter o clip-path: le strisce restano pulite e la dissolvenza del movimento ridotto agisce sulle facce, che non hanno figli in 3D.
  • Gli anelli disegnati tutti sopra le pagine bucavano la pagina in piedi; tutti dentro il quaderno venivano tagliati dalla pagina che parte. Si dividono a metà: la metà verso le pagine girate sta nel quaderno, l’altra in un piano gemello davanti a tutto, con la stessa trasformazione e la stessa quota, così le due metà combaciano.
  • La curva spinge la prima striscia oltre l’angolo della pagina: vicino a 0° o a 180° sarebbe finita dentro la pila. La curva vale sin(π·p), quindi sparisce agli estremi, e ogni angolo è comunque chiuso fra 0 e 180; anche il rimbalzo curva il bordo libero, mai la parte vicino agli anelli.
  • Con pathLength=1 e i capi tondi, un tratto non ancora disegnato lascia un puntino: i tratti partono con opacity 0 e si accendono solo quando cominciano a disegnarsi.
  • Il CSS rotate della matita veniva cancellato dal transform in linea di GSAP: la rotazione di riposo la scrive GSAP stesso, e il sobbalzo parte da lì.
  • Ogni pagina esiste tre volte (una per striscia): ogni tratto, lettera e post-it si anima su tutte e tre le copie insieme, cercandole con lo stesso data-k.

Librerie

GSAP 3.15.0, Lenis 1.3.26, Caveat (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 16 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.

Collaudo

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

Tutte le animazioni