Le carte che passano di traverso

ScrollGSAP, Solo CSSMediaPeso compresso: Demo 4,9 KBGSAP + ScrollTrigger 45 KBLenis 5,3 KBGratisScarica lo zip

Scorri dentro l’anteprima

Animazione di scroll in stile minimal: i vantaggi di un hotel di montagna su sei carte grandi in fila. La pagina si ferma e la fila scorre a sinistra con lo scroll; ogni carta entra bassa da destra e storta, sale attraversando lo schermo e esce alta a sinistra, inclinata dall’altra parte. Il titolo della carta si allarga quando passa in mezzo.

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 cards that cross over</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- what a made-up mountain hotel, Hollin, offers, on six large cards in a row. The row slides to the left with
       the scroll while the stage stays still; each card comes in low on the right and tilted, rises as it crosses
       the screen and leaves high on the left, tilted the other way. Its title widens as it passes the middle -->
  <main class="pagina">
    <header class="apertura">
      <p class="occhiello">Hollin, a hotel above the tree line</p>
      <h1 class="apertura__titolo">Stay a little longer.</h1>
      <p class="scendi">Scroll</p>
    </header>

    <section class="vantaggi" data-vantaggi aria-label="What the hotel offers">
      <div class="palco" data-palco>
        <p class="palco__nota">What is included</p>
        <div class="binario">
        <div class="fila" data-fila>
          <article class="carta" data-carta>
            <svg class="carta__disegno" viewBox="0 0 200 120" aria-hidden="true">
              <path d="M40 110V58M64 110V44M88 110V58M112 110V44M136 110V58M160 110V44" />
              <path d="M58 34c-6-8 6-14 0-22M100 34c-6-8 6-14 0-22M142 34c-6-8 6-14 0-22" />
            </svg>
            <h2 class="carta__titolo" data-titolo>Sauna</h2>
            <p class="carta__testo">Cedar benches, a cold plunge and the valley through a window.</p>
          </article>
          <article class="carta" data-carta>
            <svg class="carta__disegno" viewBox="0 0 200 120" aria-hidden="true">
              <path d="M30 104 130 14M52 108 152 18" />
              <path d="M96 112 120 64M128 112 152 64" />
              <path d="M24 112h152" />
            </svg>
            <h2 class="carta__titolo" data-titolo>Ski room</h2>
            <p class="carta__testo">Warm racks for boots, and a door straight onto the first lift.</p>
          </article>
          <article class="carta carta--sabbia" data-carta>
            <svg class="carta__disegno" viewBox="0 0 200 120" aria-hidden="true">
              <path d="M40 112V40M28 64h24M32 82h16M60 112V24M44 52h32M48 74h24M48 94h24M140 112V30M126 56h28M130 78h20M164 112V48M152 72h24M156 92h16" />
              <path d="M84 112c10-18 26-22 22-40s14-24 10-44" />
            </svg>
            <h2 class="carta__titolo" data-titolo>Forest trail</h2>
            <p class="carta__testo">Six kilometres of pine from the terrace to the waterfall.</p>
          </article>
          <article class="carta" data-carta>
            <svg class="carta__disegno" viewBox="0 0 200 120" aria-hidden="true">
              <path d="M62 52h64v26a32 32 0 0 1-64 0z" />
              <path d="M126 60h10a10 10 0 0 1 0 20h-12" />
              <path d="M40 112h120" />
              <path d="M80 38c-4-6 4-10 0-16M100 38c-4-6 4-10 0-16" />
            </svg>
            <h2 class="carta__titolo" data-titolo>Breakfast</h2>
            <p class="carta__testo">Bread from the oven downstairs, until eleven, on weekends till noon.</p>
          </article>
          <article class="carta" data-carta>
            <svg class="carta__disegno" viewBox="0 0 200 120" aria-hidden="true">
              <path d="M24 60h152M24 112h152" />
              <path d="M36 60v52M60 60v52M84 60v52M108 60v52M132 60v52M156 60v52" />
              <path d="M30 44 72 18l26 16 30-20 42 30" />
            </svg>
            <h2 class="carta__titolo" data-titolo>Terrace</h2>
            <p class="carta__testo">A long balcony facing west, with blankets when the sun goes.</p>
          </article>
          <article class="carta" data-carta>
            <svg class="carta__disegno" viewBox="0 0 200 120" aria-hidden="true">
              <path d="M38 112V36M50 112V48M62 112V30M74 112V44M86 112V38M98 112V52M110 112V34M122 112V46M134 112V40M146 112V28M158 112V44" />
              <path d="M28 112h144" />
            </svg>
            <h2 class="carta__titolo" data-titolo>Library</h2>
            <p class="carta__testo">Maps, field guides and a chair by the stove for each of them.</p>
          </article>
        </div>
        </div>
      </div>
    </section>

    <footer class="chiusura">
      <p class="chiusura__titolo">Book a winter week.</p>
    </footer>
  </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="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.

33 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 «Le carte che passano di traverso» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una carta bianco caldo, il titolo di un hotel di montagna inventato, Hollin: «Stay a little longer.». Scendendo, la pagina si ferma sotto una riga sottile con la scritta «What is included», e da destra, in basso, arriva storta la prima di sei carte grandi: Sauna, Ski room, Forest trail, Breakfast, Terrace, Library, ognuna con un disegno a righe sottili color bruno (le panche e il vapore, gli sci appoggiati, i pini e il sentiero, la tazza, la ringhiera davanti ai monti, i dorsi dei libri) e una frase. La fila scivola a sinistra mentre si scorre, e ogni carta fa la sua strada: entra bassa e inclinata da un lato, sale attraversando lo schermo, passa in mezzo quasi dritta e se ne va alta a sinistra, inclinata dall’altra parte. Le carte a posto pari scendono un po’ di più e quelle dispari un po’ di meno, così la fila fa una linea spezzata, e ogni carta ha la sua inclinazione e il suo spostamento, sempre gli stessi a ogni visita. Il titolo di ogni carta è stretto ai bordi e si allarga e prende un filo di peso quando la carta passa in mezzo allo schermo. Una sola carta, Forest trail, è color sabbia. Uscita l’ultima, la pagina riparte verso «Book a winter week.».

Come funziona

Il palco e la fila

La sezione è alta quanto lo schermo più la lunghezza della fila (la calcola lo script a ogni refresh di ScrollTrigger, con refreshInit), e dentro c’è un palco sticky alto 100lvh. Un tween porta la fila da xPercent 0 a -100, cioè la sposta di tutta la sua larghezza, con ScrollTrigger dalla cima della sezione al suo fondo e scrub: un pixel di scroll, un pixel di fila. La fila parte con un margine sinistro dell’86% dello schermo, così la prima carta si affaccia appena da destra, e ha un margine destro che lascia uscire l’ultima.

Ogni carta per conto suo

Ogni carta ha un suo fromTo con containerAnimation sul tween della fila: ScrollTrigger misura la carta dentro la fila che scorre, da quando il suo bordo sinistro è al 120% dello schermo (ancora fuori a destra) a quando il bordo destro è a -20% (già fuori a sinistra), con scrub ed ease none. Parte da rotation r, xPercent x e yPercent y + LIFT ± SWAY e arriva a -r, -x e -y - LIFT ∓ SWAY: le carte pari col più all’entrata e il meno all’uscita, le dispari il contrario.

Il caso con il seme

r (fra TILT), x (fra SHIFT_X) e il segno di ognuno, più y di 5, vengono da un piccolo generatore di numeri a caso con un seme (mulberry32): le carte passano tutte un po’ diverse, ma a ogni visita, nel video e nel Playground fanno la stessa strada. Cambiando SEED cambia la serie.

Il titolo che si allarga

A ogni aggiornamento del tween della fila lo script misura dov’è il centro di ogni carta rispetto al centro dello schermo e porta font-stretch del titolo da 70% (ai bordi) a WIDE (in mezzo) con un gradino morbido (smoothstep), e il peso da 520 a 600. Archivo variabile ha l’asse della larghezza da 62 a 125.

Lo scroll morbido

Lenis con duration SMOOTH (1,2 secondi) e una curva esponenziale che frena, Math.min(1, 1.001 - 2 elevato a -10t), guidato dal ticker di GSAP; ScrollTrigger si aggiorna a ogni suo scroll. Con il movimento ridotto niente Lenis e niente tween: la sezione è normale e le carte stanno dritte in una griglia che va a capo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`TILT`	script.js	`[5, 10]`	Quanto è inclinata una carta entrando, in gradi: un valore a caso fra i due, da un lato o dall’altro. Uscendo è inclinata uguale, dall’altra parte.
`SHIFT_X`	script.js	`[20, 30]`	Di quanto è spostata di lato ai due capi del percorso, in percentuale della sua larghezza (a caso fra i due).
`LIFT`	script.js	`75`	Quanto entra sotto la linea di mezzo (ed esce sopra), in percentuale della sua altezza.
`SWAY`	script.js	`15`	Quanto si aggiunge o si toglie a carte alterne, così la fila fa una linea spezzata.
`SEED`	script.js	`7`	Il seme dei numeri a caso: cambialo per un’altra serie di traversate.
`WIDE`	script.js	`112`	La larghezza del titolo in mezzo allo schermo (ai bordi è 70).
`SMOOTH`	script.js	`1.2`	I secondi dello scroll morbido; 0 per quello del browser.

Provali nel Playground

Quando usarla

Per i servizi di un hotel, di una casa vacanze o di una spa, i vantaggi di un abbonamento, le sezioni di una pagina di presentazione: cinque o sei carte da sfogliare scendendo, con un disegno e una frase ciascuna.

Sul telefono

La stessa scena, con le carte larghe quasi tre quarti dello schermo e la fila più corta: entrano storte da destra e se ne vanno a sinistra come sul computer. Il sito, sul telefono, non la fa; noi la teniamo con le misure adattate.

Con il movimento ridotto

Niente palco fermo né scorrimento ammorbidito: le carte stanno dritte in una griglia che va a capo, coi titoli già larghi.

Trappole

Con containerAnimation il tween della fila deve avere ease none: con una curva le posizioni delle carte misurate da ScrollTrigger non tornerebbero con quelle vere.
Il centramento verticale della fila è un translate del CSS su un contenitore a parte (il binario): GSAP, scrivendo il suo transform sulla fila, cancellerebbe il translate della classe.
L’altezza della sezione si ricalcola in refreshInit, prima che ScrollTrigger misuri: calcolata dopo, al cambio di misura della finestra la fila finiva prima o dopo il fondo della sezione.
Con Math.random ogni visita avrebbe carte diverse, e il video dell’anteprima non sarebbe mai uguale al Playground: per questo il caso ha un seme.

Librerie

GSAP 3.15.0, Lenis 1.3.26, Archivo (font variabile) 5.3.0.

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

Collaudo

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