Vai al contenuto
animorio
EN
Torna alla libreria

Le stelle lungo il sentiero

Scroll, SVGGSAPMediaPeso compresso: Demo 5,7 KBGSAP + ScrollTrigger + CustomEase + MotionPath 58 KBGratisScarica lo zip

Scorri dentro l’anteprima

La pagina «come lavoriamo» di uno studio: scorrendo, un trenino di piccole forme scende lungo un sentiero invisibile che passa fra un passo e l’altro, prima tutte strette e poi sgranate per tutta la strada. Sopra ogni passo le stanghette sono le sue settimane di lavoro, e un aquilone ci salta sopra avanti e indietro.

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>Stars along the trail</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/400.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the "how we work" page of a small studio: as you scroll, a little train of shapes runs down an invisible trail
       that winds between the steps, and over each step a small kite hops along the bars of its weeks -->
  <header class="apertura">
    <p class="apertura__marchio">Paper Kite</p>
    <h1 class="apertura__titolo">How we work</h1>
    <p class="apertura__sotto">Five steps, from the first call to the day after launch.</p>
  </header>

  <section class="percorso" data-percorso>
    <svg class="sentiero" data-sentiero aria-hidden="true" focusable="false">
      <defs>
        <symbol id="forma-stella" viewBox="-10 -10 20 20"><path d="M0 -10C1.2 -2.5 2.5 -1.2 10 0C2.5 1.2 1.2 2.5 0 10C-1.2 2.5 -2.5 1.2 -10 0C-2.5 -1.2 -1.2 -2.5 0 -10Z"/></symbol>
        <symbol id="forma-fiore" viewBox="-10 -10 20 20"><circle cx="0.00" cy="-4.90" r="4.3"/><circle cx="4.66" cy="-1.51" r="4.3"/><circle cx="2.88" cy="3.96" r="4.3"/><circle cx="-2.88" cy="3.96" r="4.3"/><circle cx="-4.66" cy="-1.51" r="4.3"/><circle r="3.4"/></symbol>
        <symbol id="forma-anello" viewBox="-10 -10 20 20"><path d="M0 -9A9 9 0 1 1 0 9A9 9 0 1 1 0 -9ZM0 -4.5A4.5 4.5 0 1 0 0 4.5A4.5 4.5 0 1 0 0 -4.5Z" fill-rule="evenodd"/></symbol>
        <symbol id="forma-aquilone" viewBox="-10 -10 20 20"><path d="M0 -10L7 -1.5L0 10L-7 -1.5Z"/></symbol>
        <symbol id="forma-goccia" viewBox="-10 -10 20 20"><path d="M0 -10C4 -4 7.5 -0.5 7.5 3A7.5 7.5 0 0 1 -7.5 3C-7.5 -0.5 -4 -4 0 -10Z"/></symbol>
      </defs>
      <path class="sentiero__linea" data-linea d="M0 0"/>
      <g data-forme></g>
    </svg>

    <ol class="passi">
      <li class="passo passo--sinistra" data-passo data-lato="sinistra">
        <div class="settimane" data-settimane aria-hidden="true">
          <svg class="aquilone" data-aquilone viewBox="-12 -16 24 32"><path d="M0 -15L11 -2L0 15L-11 -2Z"/><path d="M-11 -2H11M0 -15V15" class="aquilone__croce"/></svg>
          <span class="stanghetta" data-stanghetta></span>
        </div>
        <h2 class="passo__titolo">First call</h2>
        <p class="passo__durata">1 week</p>
        <p class="passo__testo">We listen, ask a lot of questions and write down what the project has to do.</p>
      </li>
      <li class="passo passo--destra" data-passo data-lato="destra">
        <div class="settimane" data-settimane aria-hidden="true">
          <svg class="aquilone" data-aquilone viewBox="-12 -16 24 32"><path d="M0 -15L11 -2L0 15L-11 -2Z"/><path d="M-11 -2H11M0 -15V15" class="aquilone__croce"/></svg>
          <span class="stanghetta" data-stanghetta></span><span class="stanghetta" data-stanghetta></span>
        </div>
        <h2 class="passo__titolo">Sketches</h2>
        <p class="passo__durata">2 weeks</p>
        <p class="passo__testo">Rough ideas on paper and in the browser, until one of them feels right.</p>
      </li>
      <li class="passo passo--sinistra" data-passo data-lato="sinistra">
        <div class="settimane" data-settimane aria-hidden="true">
          <svg class="aquilone" data-aquilone viewBox="-12 -16 24 32"><path d="M0 -15L11 -2L0 15L-11 -2Z"/><path d="M-11 -2H11M0 -15V15" class="aquilone__croce"/></svg>
          <span class="stanghetta" data-stanghetta></span><span class="stanghetta" data-stanghetta></span><span class="stanghetta" data-stanghetta></span>
        </div>
        <h2 class="passo__titolo">Design</h2>
        <p class="passo__durata">3 weeks</p>
        <p class="passo__testo">Every screen drawn properly, with a prototype you can click through.</p>
      </li>
      <li class="passo passo--destra" data-passo data-lato="destra">
        <div class="settimane" data-settimane aria-hidden="true">
          <svg class="aquilone" data-aquilone viewBox="-12 -16 24 32"><path d="M0 -15L11 -2L0 15L-11 -2Z"/><path d="M-11 -2H11M0 -15V15" class="aquilone__croce"/></svg>
          <span class="stanghetta" data-stanghetta></span><span class="stanghetta" data-stanghetta></span><span class="stanghetta" data-stanghetta></span><span class="stanghetta" data-stanghetta></span>
        </div>
        <h2 class="passo__titolo">Build</h2>
        <p class="passo__durata">4 weeks</p>
        <p class="passo__testo">The real thing, written and tested on the phones and computers people use.</p>
      </li>
      <li class="passo passo--sinistra" data-passo data-lato="sinistra">
        <div class="settimane" data-settimane aria-hidden="true">
          <svg class="aquilone" data-aquilone viewBox="-12 -16 24 32"><path d="M0 -15L11 -2L0 15L-11 -2Z"/><path d="M-11 -2H11M0 -15V15" class="aquilone__croce"/></svg>
          <span class="stanghetta" data-stanghetta></span><span class="stanghetta" data-stanghetta></span>
        </div>
        <h2 class="passo__titolo">Looking after it</h2>
        <p class="passo__durata">2 weeks</p>
        <p class="passo__testo">Launch day, then fixes and small changes for as long as you need them.</p>
      </li>
    </ol>
  </section>

  <footer class="chiusura">
    <p class="chiusura__frase">Let’s fly something together.</p>
  </footer>

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

45 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 «Le stelle lungo il sentiero» da Animorio e adattala al mio sito

Cosa fa

La pagina di uno studio inventato, Paper Kite, su un rosa chiarissimo: un titolo enorme, «How we work», e sotto cinque passi, uno a sinistra e il successivo a destra, dalla prima telefonata a quello che succede dopo il lancio. Ogni passo ha il suo nome, quante settimane dura e due righe di testo, e sopra il nome una fila di stanghette viola, una per settimana. Su ogni fila un piccolo aquilone rosa salta da una stanghetta all’altra fino all’ultima e poi torna indietro, si ferma un attimo e ricomincia; sul passo di una settimana sola sta fermo. Quando la sezione arriva a metà schermo, da in cima al sentiero parte un trenino di ventiquattro forme colorate, stelline, fiori, anelli, aquiloni e gocce: scendono girando su sé stesse lungo una curva che passa ogni volta dal lato opposto a quello del passo, la prima davanti e le altre dietro, una alla volta, così all’inizio sono strette in un mucchio e alla fine sono sgranate per tutto il percorso. Lo scorrimento le porta avanti e indietro: tornando su, tornano su anche loro.

Come funziona

Il sentiero

Lo script prende un punto in cima alla sezione, al centro, uno accanto a ogni passo dal lato opposto alle sue parole, spostato di SWING della larghezza dal centro, e uno in fondo. Poi li unisce con una curva morbida: ogni pezzo parte nella direzione che va dal punto prima al punto dopo, divisa per sei. Il tracciato non si disegna; si rifà quando la pagina cambia misura.

Un numero solo per tutte

ScrollTrigger porta un numero da 0 a 1 mentre la sezione scorre da TRAIL[0] a TRAIL[1], legato allo scorrimento. La forma i sta al punto del sentiero dato da quel numero meno i/COUNT, tenuto fra 0 e 0,999: la prima è sempre avanti, l’ultima parte solo quando il numero supera 23 ventiquattresimi. È MotionPathPlugin.getPositionOnPath a dire dove cade quel punto.

Le forme

Sono cinque simboli SVG, ognuno usato a turno da un elemento use: stellina, fiore, anello, aquilone e goccia, coi colori presi dal foglio di stile. Ogni forma gira di SPIN gradi in tutto il viaggio, in proporzione a dove si trova.

L’aquilone sulle settimane

Lo script misura il centro di ogni stanghetta e fa una timeline che si ripete per sempre, con una pausa di HOP_PAUSE secondi alla fine: per ogni stanghetta un tween orizzontale di HOP[0] secondi e, nello stesso momento, uno su di HOP[1] e uno giù di HOP[2]. La fila si percorre fino all’ultima stanghetta e poi indietro fino alla prima. La curva è una CustomEase fatta coi quattro numeri di EASE.

Le stanghette come dato

Le stanghette non contano i passi: sono le settimane di lavoro di ognuno, e accanto c’è scritto quante. Un passo di una settimana ha una stanghetta sola e l’aquilone ci resta sopra fermo.

Valori da cambiare

NomeFileDi partenzaCosa cambia
COUNTscript.js24Quante forme viaggiano sul sentiero (nel sito 24).
SIZEscript.js[26, 20]La loro misura in pixel, al computer e al telefono.
TRAILscript.js['20% 50%', '80% 35%']Dove comincia e finisce il viaggio: un punto della sezione incontra un punto dello schermo (quelli del sito).
SPINscript.js540Di quanti gradi gira ogni forma nel suo viaggio.
SWINGscript.js0.26Quanto si allontana dal centro il sentiero, in parti della larghezza.
HOPscript.js[0.8, 0.28, 0.36]Il salto dell’aquilone in secondi: di lato, su e giù (quelli del sito).
HOP_HEIGHTscript.js[8, 20]Quanto sta sopra le stanghette l’aquilone e quanto in alto salta, in pixel.
HOP_PAUSEscript.js0.35La pausa alla fine di ogni andata e ritorno.
EASEscript.js[0.22, 1, 0.36, 1]La curva del salto, come in un cubic-bezier.

Provali nel Playground

Quando usarla

Per una pagina che racconta un metodo, un percorso o le tappe di un progetto: il trenino accompagna chi scorre da un passo all’altro, e le stanghette dicono quanto dura ogni cosa senza bisogno di un grafico.

Sul telefono

Uguale, con i passi uno sotto l’altro: il sentiero ondeggia da un lato all’altro dello schermo passando dietro alle parole, e le forme sono un poco più piccole.

Con il movimento ridotto

Niente viaggio e niente salti: le forme compaiono con una dissolvenza già sgranate su tutto il sentiero, e gli aquiloni stanno fermi sulla prima stanghetta.

Trappole

  • GSAP non legge le curve scritte come in CSS: una stringa «cubic-bezier(0.22,1,0.36,1)» passata come ease non dà errore, ma diventa power1.out. Per avere davvero quella curva serve CustomEase.
  • Due colonne di una griglia mettono due passi sulla stessa riga: ogni passo ha la sua riga, altrimenti il sentiero non ha spazio per passare da un lato all’altro.
  • Il sentiero dipende da dove stanno i passi, che dipende dai caratteri: va disegnato dopo che i caratteri sono caricati e rifatto quando ScrollTrigger rimisura la pagina.

Librerie

GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, MotionPath (GSAP) 3.15.0, CustomEase (GSAP) 3.15.0, Bricolage Grotesque (font variabile) 5.3.0, IBM Plex Mono 5.3.0.

Compressi con gzip, i tre file della demo pesano 5,7 KB; le librerie: GSAP + ScrollTrigger + CustomEase + MotionPath 58 KB.

Collaudo

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

Della stessa famiglia

Tutte le animazioni