La funivia allo scroll

Scroll, SVGGSAPImpegnativaPeso compresso: Demo 18 KBGSAP + ScrollTrigger 45 KBLenis 5,3 KBGratisScarica lo zip

Scorri dentro l’anteprima

Scorrendo, una cabina rossa sale lungo il cavo dal paese in valle fino alla stazione in cima alla montagna: dondola quando parte, sobbalza sui rulli di ogni pilone, attraversa boschi, pascoli con le mucche, rocce, nuvole e neve mentre l’altimetro conta i metri. In cima entra in stazione, le porte si aprono e il panorama prende tutto lo schermo.

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 cable car up the mountain</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/big-shoulders-display@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/albert-sans@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/martian-mono@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a made-up ski area, Alder Crown. The stage sticks while you scroll: a cable car leaves the village in the valley
       and climbs the cable to the summit, swinging at every pylon, through woods, pastures, rocks, clouds and snow.
       At the top it docks in the station, the doors open and the view takes the whole screen.
       The landscape, the cabin and the view are SVG drawn by the script -->
  <main>
    <section class="corsa" data-corsa>
      <div class="palco" data-palco>
        <div class="cielo" aria-hidden="true"><div class="cielo__quota" data-quota></div></div>
        <svg class="mondo" data-mondo aria-hidden="true"></svg>

        <header class="marchio" data-hud>
          <svg class="marchio__segno" viewBox="0 0 40 40" aria-hidden="true">
            <path d="M3 33 15 14l6 8 5-6 11 17z" class="marchio__monte"/>
            <path d="M15 14l-3 5 3-1 2 2 2-3z" class="marchio__neve"/>
            <path d="M2 9 38 3" class="marchio__cavo"/>
            <path d="M23 6v4" class="marchio__cavo"/>
            <rect x="19" y="10" width="8" height="7" rx="2" class="marchio__cabina"/>
          </svg>
          <p class="marchio__nome">Alder Crown<span>Cable car</span></p>
        </header>

        <aside class="altimetro" data-hud aria-label="Altimeter">
          <svg class="quadrante" viewBox="0 0 80 80" aria-hidden="true">
            <circle cx="40" cy="40" r="37" class="quadrante__fondo"/>
            <g data-tacche></g>
            <path d="M40 40V19" class="quadrante__corta" data-corta/>
            <path d="M40 46V9" class="quadrante__lunga" data-lunga/>
            <circle cx="40" cy="40" r="3.4" class="quadrante__perno"/>
          </svg>
          <div class="altimetro__dati">
            <p class="altimetro__etichetta">Altitude</p>
            <p class="altimetro__quota" data-quota-testo>1,240 m</p>
            <p class="altimetro__aria" data-aria>15 °C</p>
          </div>
        </aside>

        <div class="zona" data-hud>
          <p class="zona__etichetta">Now passing</p>
          <h2 class="zona__nome" data-zona><span>Alder Hollow</span></h2>
          <p class="zona__riga" data-zona-riga>The valley station opens at eight. Bells, fresh bread, one last coffee.</p>
        </div>

        <p class="cenno" data-cenno>
          <span>Scroll to ride up</span>
          <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 3v13M4.5 10.5 10 16l5.5-5.5"/></svg>
        </p>

        <div class="panorama" data-panorama>
          <svg class="panorama__scena" data-pano viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice" aria-hidden="true"></svg>
          <div class="panorama__testo">
            <p class="panorama__quota" data-pano-quota>Crown Station</p>
            <h1 class="panorama__titolo" data-pano-titolo>The whole range at your feet</h1>
            <p class="panorama__riga" data-pano-riga>Seventy peaks in one look, a terrace in the sun and the last ride down at five.</p>
            <a class="tasto" href="#" data-tasto><span>Plan your ride</span></a>
          </div>
        </div>
      </div>
    </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="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.

55 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 «La funivia allo scroll» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Il palco resta fermo per tutta la corsa: è il sito di Alder Crown, un comprensorio sciistico inventato. Si parte nel paese in valle, con le case, il campanile con l’orologio che gira e il fumo che esce dai camini; la cabina aspetta nella stazione a valle con le porte aperte. Scorrendo le porte si chiudono, la camera lascia il paese e si mette davanti alla cabina, e la cabina sale lungo il cavo: il cavo di trazione tratteggiato scorre, le ruote delle due stazioni girano, il carrello segue la pendenza del cavo e la cabina, appesa sotto, dondola come un pendolo quando accelera o rallenta. A ogni pilone il carrello passa sui rulli, che girano, la testa del pilone vibra con un elastico e la cabina fa un sobbalzo e oscilla. Il paesaggio è fatto di strati che scorrono a velocità diverse: il sole e le catene lontane quasi ferme, la cresta velata dietro il pendio, il pendio con i suoi oggetti, e davanti alberi e rocce che passano veloci. Si attraversano il bosco di larici, i pascoli con la baita, lo steccato e le mucche che brucano e muovono la coda, le rocce con gli uccelli in volo, un banco di nuvole che passa davanti alla cabina e poi resta sotto, e il ghiacciaio con la traccia degli sci. Il cielo diventa più blu salendo. In alto a destra l’altimetro ha due lancette (una fa un giro ogni mille metri) e scrive la quota e la temperatura; in basso a sinistra il nome della zona cambia con le lettere che saltano. In cima la cabina entra nella stazione e si assesta, la camera si avvicina fino a inquadrare le porte, le porte si aprono con un piccolo rimbalzo e fra le due ante si vede già il panorama: l’apertura si allarga fino a riempire lo schermo. Le catene di montagne salgono al loro posto, il sole si alza con i raggi che girano, le nuvole basse si muovono nelle valli e il titolo entra lettera per lettera con un rimbalzo, poi la riga e il pulsante elastico. Tornando su, tutto si ripete all’indietro.

Come funziona

Il cavo e i piloni

Il cavo passa per le due stazioni e per la cima dei piloni; fra due sostegni è una parabola con una freccia del 3% della campata, quindi in ogni pilone fa uno spigolo come un cavo vero. La posizione della cabina è un numero p: la parte intera dice la campata, la parte decimale dove si trova dentro. I piloni nascono alti 300 unità sopra il terreno e un piccolo ciclo li alza finché la cabina, appesa sotto, passa sempre sopra il suolo, anche sulle gobbe delle rocce.

Lo scroll diviso in fasi

ScrollTrigger dà l’avanzamento della sezione, ammorbidito ogni fotogramma; da lì le fasi: le porte si chiudono (fino a 0,03), il viaggio (0,04-0,80, metà lineare e metà power1.inOut, così parte e arriva piano), poi la camera che si avvicina, le porte che si aprono con back.out e il panorama che si allarga. La sezione è alta 100lvh più 900lvh per RIDE.

Il pendolo e il sobbalzo

La cabina è un pendolo: ogni fotogramma si misura l’accelerazione orizzontale del carrello e la si dà a una molla poco smorzata, così alla partenza resta indietro e alla frenata va avanti. Quando p supera un numero intero (un pilone) arrivano una spinta all’angolo e una alla molla verticale del sobbalzo, e la testa del pilone vibra con elastic.out. In stazione lo smorzamento triplica e la cabina si assesta in fretta.

Gli strati del paesaggio

Ogni strato ha una profondità d: il suo gruppo si sposta di meno la posizione della camera per d (0,03 il sole, 0,1 e 0,22 le catene, 0,36 il mare di nuvole, 1 il pendio, 1,22 le nuvole davanti, 1,45 alberi e rocce in primo piano). Per mettere una cosa dove serve si sceglie il punto del viaggio in cui deve comparire e la si disegna a camera per d più lo spostamento voluto sullo schermo. Le zone del terreno sono poligoni sovrapposti con il bordo dentato che scende di traverso al pendio.

Le porte e il panorama

Alla fine la camera si avvicina con uno scale su tutto il disegno, centrata sulla cabina. Il panorama è un div sopra il palco con un clip-path inset calcolato ogni fotogramma dal getBoundingClientRect del vano della porta: prima largo quanto le ante aperte, poi si allarga fino a tutto lo schermo con power3.inOut. Il titolo è una timeline a tempo che parte quando l’apertura è quasi finita e torna indietro più veloce se si risale.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PYLONS`	script.js	`4`	Quanti piloni ci sono fra le due stazioni, da 2 a 6: più piloni, più sobbalzi.
`SWING`	script.js	`1`	Quanto dondola la cabina alla partenza, alla frenata e sui piloni (0 = rigida).
`BUMP`	script.js	`1`	Quanto forte è il sobbalzo sui rulli di ogni pilone e all’arrivo (0 = liscio).
`DEPTH`	script.js	`1`	Quanto è profondo il paesaggio: la differenza di velocità fra gli strati vicini e lontani (0 = tutto piatto).
`RIDE`	script.js	`1`	Quanto scroll serve per la corsa intera: 2 è il doppio.
`COWS`	script.js	`6`	Quante mucche brucano nei pascoli, da 0 a 10.
`BASE_ALT`	script.js	`1240`	La quota della stazione a valle, in metri: l’altimetro parte da qui.
`TOP_ALT`	script.js	`3086`	La quota della stazione in cima, in metri: l’altimetro arriva qui e la scrive sopra il titolo.

Provali nel Playground

Quando usarla

Per raccontare un viaggio che sale: il sito di un comprensorio sciistico o di un rifugio, un impianto di risalita, un hotel in montagna, un percorso a tappe, una pagina che porta dal problema alla soluzione «in cima», il lancio di un prodotto che si scopre solo alla fine.

Sul telefono

La stessa animazione con le misure adattate: la vista è più stretta e più alta, la cabina sta più al centro, all’inizio la camera guarda meno lontano verso il paese, l’altimetro è più piccolo e la scheda della zona occupa tutta la larghezza in basso.

Con il movimento ridotto

Niente viaggio, niente dondolio e niente scorrimento morbido: la cabina si ferma in sei punti della salita e il paesaggio passa dall’uno all’altro in dissolvenza. Le porte e il panorama compaiono in dissolvenza, senza avvicinamento, e il titolo arriva in dissolvenza; mucche, fumo, nuvole e uccelli stanno fermi.

Trappole

Colorare il terreno con un gradiente orizzontale lungo il pendio faceva bande verticali sfumate, che su un pendio sembrano un errore: le zone sono poligoni sovrapposti con il bordo dentato che entra nel terreno di traverso.
Con il cavo dritto fra le stazioni i piloni erano alti uguali e sulle gobbe delle rocce la cabina entrava nel terreno: le cime dei piloni si alzano in un piccolo ciclo finché la cabina passa sempre sopra il suolo.
Il cappello di neve della prima punta di una catena prendeva come vicino il punto in fondo al poligono e diventava una striscia bianca lunga fino al bordo: la prima e l’ultima punta restano senza neve.
Lo scale di GSAP sul cenno «Scroll to ride up» cancellava il translateX(-50%) della classe e lo spostava di lato: il cenno sta al centro con margin auto, senza transform nel CSS.
Le ruote del carrello con il bordo bianco, viste da vicino alla fine, sembravano due occhi: sono piene, con un mozzo grigio piccolo.

Librerie

GSAP 3.15.0, Lenis 1.3.26, Big Shoulders Display (font variabile) 5.3.0, Albert Sans (font variabile) 5.3.0, Martian Mono (font variabile) 5.3.0.

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

Collaudo

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