Le foto stirate dallo scorrimento

Immagini, ScrollGSAP, CanvasMediaPeso compresso: Demo 7,3 KBGSAP 28 KBLenis 5,3 KBGratisScarica lo zip

Scorri dentro l’anteprima

Nello stile minimal, un racconto fotografico su carta: cinque foto in colonna che, quando scorri, lasciano una scia come una fotocamera a fessura. L’ultima riga di pixel si allunga in strisce dei loro colori, tanto più lunghe quanto più vai veloce, e quando ti fermi rientra su una molla; i titoli si allargano con la velocità e nell’angolo il tempo di posa rallenta.

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>Photos stretched by the scroll</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the photos are drawn on this canvas, under the words: the page only keeps their places -->
  <canvas class="film" data-film aria-hidden="true"></canvas>

  <header class="top">
    <p class="mark">Halden</p>
    <p class="shutter" aria-hidden="true"><span class="shutter__k">Shutter</span> <span class="shutter__v" data-shutter>1/500 s</span></p>
  </header>

  <main class="page">
    <section class="intro">
      <h1 class="title" data-title>Long light</h1>
      <p class="dek">Five photographs from a slow summer. Scroll fast and they leave a trail.</p>
    </section>

    <section class="roll" data-roll>
      <figure class="shot shot--a" data-shot data-scene="dune" data-ratio="0.8">
        <div class="shot__slot" data-slot role="img" aria-label="Dune at five"></div>
        <figcaption class="shot__cap"><span class="shot__t" data-cap>Dune at five</span><span class="shot__m">Erg Chebbi, June</span></figcaption>
      </figure>
      <figure class="shot shot--b" data-shot data-scene="lanes" data-ratio="1.5">
        <div class="shot__slot" data-slot role="img" aria-label="Lane four"></div>
        <figcaption class="shot__cap"><span class="shot__t" data-cap>Lane four</span><span class="shot__m">Lido pool, July</span></figcaption>
      </figure>
      <figure class="shot shot--c" data-shot data-scene="tulips" data-ratio="0.8">
        <div class="shot__slot" data-slot role="img" aria-label="Rows of tulips"></div>
        <figcaption class="shot__cap"><span class="shot__t" data-cap>Rows of tulips</span><span class="shot__m">Lisse, April</span></figcaption>
      </figure>
      <figure class="shot shot--b" data-shot data-scene="umbrellas" data-ratio="1.5">
        <div class="shot__slot" data-slot role="img" aria-label="Beach from above"></div>
        <figcaption class="shot__cap"><span class="shot__t" data-cap>Beach from above</span><span class="shot__m">Rimini, August</span></figcaption>
      </figure>
      <figure class="shot shot--a" data-shot data-scene="neon" data-ratio="0.8">
        <div class="shot__slot" data-slot role="img" aria-label="Late bar"></div>
        <figcaption class="shot__cap"><span class="shot__t" data-cap>Late bar</span><span class="shot__m">Porto, September</span></figcaption>
      </figure>
    </section>

    <p class="end">End of the roll</p>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.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.

27 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 foto stirate dallo scorrimento» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una pagina lunga color carta, il racconto fotografico di un giornale di viaggi inventato, Halden. In apertura il titolo enorme, Long light, che entra stirandosi da stretto a largo, e una riga che dice: cinque foto di un’estate lenta, scorri veloce e lasciano una scia. Poi cinque foto disegnate dallo script, in una colonna sciolta, alcune a sinistra e alcune a destra, ognuna col suo titolo e il luogo accanto: dune al tramonto, le corsie di una piscina con le corde rosse e bianche, file di tulipani colorati che corrono all’orizzonte, una spiaggia vista dall’alto con gli ombrelloni a spicchi, un bar di notte con le insegne al neon. Ferme sono solo foto. Scorrendo, ogni foto lascia una scia come una fotocamera a fessura: l’ultima riga di pixel dalla parte da cui si allontana si allunga in strisce dei suoi colori (le corsie diventano un codice a barre rosso e blu, i tulipani bande piene, il neon colate rosa e arancio), tanto più lunghe quanto più si va veloci, e sfumano nella carta verso la fine. Quando ci si ferma la scia rientra su una molla, va un pixel oltre il bordo e torna. Anche i titoli delle foto si allargano con la velocità, e nell’angolo in basso a destra un tempo di posa in rosso rallenta da 1/500 s fino a 1/4 s mentre la scia cresce, e torna veloce quando ci si ferma.

Come funziona

Le foto su una canvas fissa

Le foto non sono immagini della pagina: la pagina tiene solo i loro posti (div vuoti con aspect-ratio) e le didascalie. Una canvas fissa grande quanto la finestra sta sotto il testo, e a ogni fotogramma lo script legge con getBoundingClientRect dove sta ogni posto e ci disegna la foto. Così la scia può uscire dal riquadro senza tagli.

La velocità

A ogni fotogramma il ticker di GSAP misura di quanto è cambiato scrollY (Lenis rende lo scorrimento morbido) e lo divide per deltaRatio, così la velocità è la stessa a 60 e a 120 Hz. Il segno dice da che parte va la scia: scorrendo in giù le foto salgono e la scia esce dal basso, scorrendo in su dall’alto.

La scia su una molla

La lunghezza della scia non segue la velocità di colpo: è una molla (SPRING) che insegue velocità × STRETCH, fino a MAX_TRAIL dell’altezza della foto. Quando ci si ferma la molla torna a zero passando un poco oltre: la scia rientra con un assestamento invece di sparire.

La fessura

La scia è drawImage di due sole righe di pixel della foto, prese appena dentro il bordo (dove la vignettatura non le ha ancora scurite), stirate alla lunghezza della scia: ogni colonna della foto diventa una striscia del suo colore. Sopra, una sfumatura dal trasparente al colore della carta la fa sparire verso la fine (FADE).

Le parole che corrono

I titoli delle foto sono in Anybody, carattere variabile con l’asse wdth da 50 a 150: la stessa molla della scia porta la larghezza da 100 a 150. Il tempo di posa nell’angolo sceglie fra otto valori, da 1/500 s a 1/4 s, secondo quanto è lunga la scia.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`STRETCH`	script.js	`16`	Quanto si allungano le scie per la stessa velocità.
`MAX_TRAIL`	script.js	`0.6`	La scia più lunga possibile, come parte dell’altezza della sua foto.
`SPRING`	script.js	`[0.16, 0.7]`	La molla della scia: quanto in fretta segue la velocità e quanto del suo slancio conserva (di più oscilla di più).
`FADE`	script.js	`0.7`	Da che punto della scia comincia a sfumare nella carta (0 = subito, 1 = solo alla fine).
`STRETCH_TYPE`	script.js	`true`	I titoli delle foto si allargano con la velocità.
`SMOOTH`	script.js	`true`	Lo scorrimento morbido con Lenis.

Provali nel Playground

Quando usarla

Per un racconto fotografico lungo: il reportage di una rivista di viaggi, la pagina di un fotografo con una serie, il diario di un’estate in un blog, la galleria di un albergo o di uno stabilimento balneare. Chi scorre piano vede le foto pulite; chi corre le vede lasciare la scia.

Sul telefono

La stessa animazione con le misure adattate: le foto stanno in una colonna larga quasi quanto lo schermo, i titoli sotto le foto, e la scia segue lo scorrimento col dito.

Con il movimento ridotto

Niente scie e niente parole che si allargano: lo scorrimento è quello normale del browser e le foto restano pulite; il titolo compare in dissolvenza.

Trappole

La scia presa dall’ultimissima riga di pixel veniva grigia e sporca: la vignettatura della foto scurisce proprio il bordo. Ora la fessura sta al 97,5% dell’altezza (al 2,5% scorrendo in su).
Con la testata fissa in cima, le foto le passavano sotto e il nome del giornale finiva sopra il nero del bar: la testata scorre con la pagina e resta fisso solo il tempo di posa, su un ritaglio di carta nell’angolo.
Una foto per elemento img con una scia in CSS sarebbe tagliata dal suo riquadro: per questo tutto passa da una canvas sola, sotto il testo (le didascalie restano leggibili anche sopra la scia).

Librerie

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

Compressi con gzip, i tre file della demo pesano 7,3 KB; le librerie: GSAP 28 KB, Lenis 5,3 KB.

Collaudo

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