La consegna lungo la strada

Selettori, SVG, Fisica, TransizioniGSAPImpegnativaPeso compresso: Demo 17 KBGSAP 28 KBGratisScarica lo zip

La scelta della consegna nel carrello di un negozio di piante, in tre schede: quella scelta apre una finestra su una lunga strada disegnata in SVG. Scegliendone un'altra la finestra si chiude nella scheda vecchia e si apre nella nuova mentre la camera viaggia lungo la strada, coi piani che scorrono ognuno alla sua velocità: dalla strada di campagna del furgone al paese della bici cargo, fino alla bottega. Il furgone o la bici arrivano e frenano, e la carrozzeria, il corriere e la pianta nella cassetta dondolano sulle molle; al negozio la tenda esce dal cassonetto e l'orologio gira fino alle quattro. Il segno della scelta è un pacco che cade nella sua casella.

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 delivery street</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/gabarito@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the delivery choice at the checkout of a plant shop: three real radio buttons, each a card. The chosen card
         opens a window onto one long street, drawn in SVG: the country road where the van drives, the town where
         the courier rides a cargo bike, and the shop itself. Choosing another card, the window closes in the old one
         and opens in the new one while the camera travels along the street, its layers sliding past each other; the
         van or the bike rolls in and brakes on its springs, and at the shop the awning unrolls and the clock turns
         to four. The sign of the choice is a parcel that drops into its slot. Under the cards, when it arrives -->
    <form class="ship" data-delivery onsubmit="return false">
      <fieldset class="ship__set" data-set data-autoclic>
        <legend class="ship__title">Delivery</legend>

        <label class="opt" data-opt data-days="5" data-working="true" data-say="Arrives by {date}">
          <input class="opt__input" type="radio" name="delivery" value="standard">
          <span class="opt__bay" aria-hidden="true" data-bay><span class="opt__win" data-win></span></span>
          <span class="opt__row">
            <svg class="opt__sign" viewBox="0 0 28 28" aria-hidden="true" data-sign>
              <rect class="sign__slot" x="4.5" y="4.5" width="19" height="19" rx="5"/>
              <g class="sign__box" data-box>
                <rect class="sign__kraft" x="4" y="4" width="20" height="20" rx="4"/>
                <rect class="sign__tape" x="11.5" y="4" width="5" height="20" data-tape/>
                <rect class="sign__label" x="16.5" y="16" width="5" height="4" rx="1"/>
              </g>
            </svg>
            <span class="opt__text">
              <span class="opt__name">Standard</span>
              <span class="opt__when">3–5 working days</span>
            </span>
            <span class="opt__price is-free">Free</span>
          </span>
        </label>

        <label class="opt" data-opt data-days="1" data-working="false" data-say="Arrives {date}">
          <input class="opt__input" type="radio" name="delivery" value="express">
          <span class="opt__bay" aria-hidden="true" data-bay><span class="opt__win" data-win></span></span>
          <span class="opt__row">
            <svg class="opt__sign" viewBox="0 0 28 28" aria-hidden="true" data-sign>
              <rect class="sign__slot" x="4.5" y="4.5" width="19" height="19" rx="5"/>
              <g class="sign__box" data-box>
                <rect class="sign__kraft" x="4" y="4" width="20" height="20" rx="4"/>
                <rect class="sign__tape" x="11.5" y="4" width="5" height="20" data-tape/>
                <rect class="sign__label" x="16.5" y="16" width="5" height="4" rx="1"/>
              </g>
            </svg>
            <span class="opt__text">
              <span class="opt__name">Express</span>
              <span class="opt__when">Tomorrow by 1 pm</span>
            </span>
            <span class="opt__price">€6.90</span>
          </span>
        </label>

        <label class="opt" data-opt data-days="0" data-working="false" data-say="Ready today, {date}">
          <input class="opt__input" type="radio" name="delivery" value="pickup">
          <span class="opt__bay" aria-hidden="true" data-bay><span class="opt__win" data-win></span></span>
          <span class="opt__row">
            <svg class="opt__sign" viewBox="0 0 28 28" aria-hidden="true" data-sign>
              <rect class="sign__slot" x="4.5" y="4.5" width="19" height="19" rx="5"/>
              <g class="sign__box" data-box>
                <rect class="sign__kraft" x="4" y="4" width="20" height="20" rx="4"/>
                <rect class="sign__tape" x="11.5" y="4" width="5" height="20" data-tape/>
                <rect class="sign__label" x="16.5" y="16" width="5" height="4" rx="1"/>
              </g>
            </svg>
            <span class="opt__text">
              <span class="opt__name">Pick up at the shop</span>
              <span class="opt__when">Today after 4 pm</span>
            </span>
            <span class="opt__price is-free">Free</span>
          </span>
        </label>
      </fieldset>

      <p class="ship__sum" aria-hidden="true" data-sum></p>
      <p class="sr" aria-live="polite" data-live></p>
    </form>

    <!-- the gradients of the street, shared by its three windows -->
    <svg class="defs" aria-hidden="true" focusable="false">
      <defs>
        <linearGradient id="street-sky" x1="0" y1="0" x2="0" y2="1">
          <stop class="w-sky-top" offset="0"/>
          <stop class="w-sky-low" offset="0.72"/>
        </linearGradient>
        <linearGradient id="street-glass" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stop-color="#ffffff" stop-opacity="0.55"/>
          <stop offset="0.45" stop-color="#ffffff" stop-opacity="0"/>
        </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.

36 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 consegna lungo la strada» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco, da solo, il blocco Delivery del carrello di Fernhouse, un negozio di piante inventato, largo 400 pixel: sotto il titolo tre schede bianche dagli angoli tondi, Standard (3–5 working days, Free), Express (Tomorrow by 1 pm, €6.90) e Pick up at the shop (Today after 4 pm, Free), e sotto le schede una riga che dice quando arriva, per esempio Arrives by Wednesday 14 October, con la data in nero. A sinistra di ogni scheda c'è una casella tratteggiata; in quella scelta c'è un pacco di cartone col nastro e l'etichetta, la scheda ha un bordo scuro e in cima si apre una finestra alta 120 pixel su una strada disegnata: per Standard il furgone verde del negozio su una strada di campagna, coi campi, la recinzione, i pioppi e un magazzino lontano; per Express il corriere in giacca gialla su una bici cargo con una pianta nella cassetta, in una via di case color pastello; per il ritiro la bottega verde con l'insegna, la tenda a strisce, la vetrina con le piante, il cartello Open sulla porta e un orologio fermo sulle quattro. È una strada sola, e ogni finestra la guarda da una camera. Scegliendo un'altra scheda il pacco si solleva dalla casella vecchia e svanisce, e uno nuovo cade nella casella nuova girando, si schiaccia toccando il fondo e il nastro ci scorre sopra. Intanto la finestra si chiude nella scheda vecchia e si apre nella nuova, sempre attaccata alle parole della scheda, mentre la camera viaggia lungo la strada: le nuvole quasi non si muovono, le colline poco, le case di più, la strada del tutto e i cespugli davanti passano veloci. Il furgone o la bici arrivano andando avanti, frenano fino a fermarsi proprio al loro posto e dondolano: la carrozzeria del furgone si inclina in avanti, il corriere si piega e la pianta nella cassetta si curva, poi tornano indietro e si assestano; le ruote girano con la strada fatta e il corriere pedala. Al negozio la tenda esce dal cassonetto, la frangia smerlata sbatte un poco, il cartello sulla porta oscilla e le lancette girano fino alle quattro. Sotto, le parole della riga che cambiano escono in alto e le nuove salgono dal basso, mentre le altre si stringono o si allargano per far loro posto. Col mouse sopra una scheda il bordo si scurisce e la casella si tinge dell'ombra del pacco.

Come funziona

Tre radio veri

Il blocco è un fieldset con la legend Delivery, e ogni scheda è una label con dentro il suo input radio, nascosto ma presente: prende il fuoco, le frecce cambiano la scelta da sole come in ogni gruppo di radio (anche da un capo all'altro) e lo screen reader legge nome, tempi e prezzo, mentre la strada e il pacco hanno aria-hidden. La riga del quando si annuncia con un paragrafo nascosto aria-live polite, scritto una volta sola per scelta. L'anello del fuoco gira intorno alla scheda solo con la tastiera.

Una strada sola in tre finestre

La strada è un SVG scritto dallo script, largo più di mille unità e alto 120, con le tre scene a 420 unità l'una dall'altra. Ogni finestra ne ha una copia, guardata dalla stessa camera, e ha sei piani con la loro profondità: nuvole 0,06, colline lontane 0,16, colline 0,32, case 0,55, strada 1 e cespugli davanti 1,5; ogni piano è spostato di metà finestra meno la camera per la sua profondità. I gradienti stanno in un solo SVG nascosto, e il ritaglio della tenda ha un id diverso in ogni copia.

La finestra che passa

Ogni scheda ha un valore di apertura, da 0 a 1, che va verso 1 per la scheda scelta e verso 0 per le altre con un tween power2.inOut lungo OPEN secondi. Il contenitore è alto apertura per (SCENE + 6) pixel, la finestra apertura per SCENE, ancorata in basso: la strada resta attaccata alle parole della scheda e la finestra si apre dal suo bordo alto. Una finestra di pochi pixel sarebbe una riga scura di asfalto, quindi ai due capi si dissolve. In un passaggio il totale delle tre schede resta lo stesso, e interrompendo ogni finestra riparte da dove si trova.

La camera e i veicoli

La camera è una molla con smorzamento critico (pulsazione PAN) con una velocità massima di 1500 unità al secondo, calcolata sul ticker di GSAP in passi di 1/240 di secondo col fotogramma limitato a 1/30. Il furgone o la bici della scena nuova partono fuori vista già lanciati: vanno a velocità costante mentre la camera viaggia, poi frenano con una decelerazione costante (power1.out in 0,75 secondi) e si fermano tutti in una volta. Mentre frenano una forza costante agisce su tre molle poco smorzate, l'inclinazione della carrozzeria, quella del corriere e quella della pianta; quando la frenata finisce di colpo le molle tornano indietro e si assestano in poco più di un secondo.

Il corriere calcolato a ogni fotogramma

Le ruote girano della strada fatta divisa per il raggio, la pedivella della metà della ruota dietro. Le due gambe sono due ossa da 17,5 unità dall'anca al pedale, col ginocchio trovato col teorema del coseno e piegato in avanti; il braccio va dalla spalla al manubrio allo stesso modo, e il busto e la testa ruotano intorno all'anca con l'inclinazione della molla. I tracciati si riscrivono solo quando cambiano.

La bottega e il quando

La bottega aspetta che la camera sia vicina: allora la tenda scorre fuori dal cassonetto (tutto quello che sta sopra il suo bordo è tagliato da un clipPath), la frangia smerlata si ridisegna a ogni fotogramma con un'onda che si spegne, il cartello della porta è un pendolo che riceve una spinta e le lancette vanno dall'una e un quarto alle quattro. La riga del quando prende la data dal giorno di oggi, coi giorni lavorativi per Standard; ogni parola ha una chiave (prima della data, la data, dopo) e cambiano solo le parole diverse, ognuna nella sua casella che prende la nuova larghezza. Quando tutto è fermo il ciclo esce dal ticker e non disegna più; l'anteprima della libreria clicca il gruppo, che ha data-autoclic, e passa alla scheda dopo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`START`	script.js	`0`	La scheda scelta all'apertura della pagina (0 è la prima).
`SCENE`	script.js	`120`	L'altezza della strada nella scheda scelta, in pixel: il disegno si ingrandisce o si rimpicciolisce con lei.
`OPEN`	script.js	`0.6`	I secondi che una scheda ci mette ad aprire o chiudere la sua finestra.
`PAN`	script.js	`7`	Quanto in fretta la camera viaggia lungo la strada (di più, prima arriva).
`ROLL`	script.js	`46`	Quanta strada fanno il furgone e la bici mentre frenano, in pixel (0: stanno fermi al loro posto).
`SWAY`	script.js	`1`	Quanto dondolano in frenata la carrozzeria, il corriere e la pianta.
`data-say`	index.html	`Arrives by {date}, Arrives {date}, Ready today, {date}`	La frase sotto le schede per ogni scelta; {date} diventa il giorno, per esempio Wednesday 14 October.
`data-days`	index.html	`5, 1, 0`	Fra quanti giorni arriva ogni scelta (con data-working="true" si contano solo i giorni lavorativi).

Provali nel Playground

Quando usarla

Per la scelta della consegna in un carrello o in un checkout, o per ogni scelta fra due o tre modi di fare la stessa cosa in cui ogni modo è un posto o un mezzo: il ritiro in negozio o a domicilio, il tavolo in terrazza o in sala, il treno o il pullman. La finestra spiega che cosa vuol dire ogni scelta senza altre parole, e la riga sotto dice che cosa cambia. Sta bene in una colonna larga fra 360 e 480 pixel.

Sul telefono

A 390 pixel il blocco è largo 358, la finestra 346 per 120 e la strada si vede un po' più stretta, con le stesse animazioni; le schede chiuse sono alte 64 pixel e si toccano con tutta la loro superficie. Il passaggio del mouse non c'è, il tocco sceglie subito.

Con il movimento ridotto

Niente camera che viaggia e niente veicoli che arrivano: la finestra vecchia si chiude subito, quella nuova è già al suo posto e la sua strada compare in dissolvenza in 0,3 secondi, col furgone o la bici fermi e la bottega già aperta con l'orologio alle quattro. Il pacco compare e scompare in dissolvenza, le parole della riga cambiano in dissolvenza. All'apertura il blocco è già al suo posto.

Trappole

Il cielo usciva grigio scuro: il gradiente sta in un SVG nascosto fuori dalla strada, dove le variabili dei colori della strada non arrivavano. Ora sono definite su tutti e due.
Le foglie di monstera nella cassetta della bici sembravano cuori: ridisegnate come foglie lunghe a paletta.
Una finestra alta pochi pixel, all'inizio dell'apertura o alla fine della chiusura, era solo una riga scura d'asfalto: ai due capi la finestra si dissolve.
Il veicolo che seguiva la distanza della camera partiva da fermo proprio quando entrava in vista e si fermava piano, senza frenare; con una molla invece andava oltre e tornava indietro di qualche pixel, come in retromarcia. Ora va a velocità costante e frena con una decelerazione costante, che si ferma tutta in una volta e fa dondolare la carrozzeria.
La tenda si srotolava prima che la camera arrivasse e cresceva di soli 10 pixel: ora aspetta che la bottega sia in vista ed esce dal cassonetto, tagliata da un clipPath con un id diverso in ogni copia della strada.
La riga del quando confrontava le parole per posizione: da Arrives by ad Arrives rotolava tutta la data. Ora ogni parola ha la sua chiave e cambiano solo quelle diverse; senza il back.out le parole che entrano non saltellano più fuori riga.
La casella vuota aveva un contrasto di 1,9 a 1: scurita a 3,2. Col mouse sopra diventava un quadrato pieno che sembrava una casella di spunta: ora si tinge dell'ombra del pacco.

Librerie

GSAP 3.15.0, Gabarito (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 17 KB; le librerie: GSAP 28 KB.

Collaudo

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