L’indice coi cerchi col mirino che si radunano allo scroll

Scroll, TransizioniGSAP, Solo CSSMediaPeso compresso: Demo 7,5 KBGSAP + ScrollTrigger 45 KBLenis 5,3 KBGratisScarica lo zip

Scorri dentro l’anteprima

Animazione allo scroll nello stile minimal, su fondo argento: due cerchi sottili, ognuno con due mirini sul bordo, cambiano posto, misura e rotazione a ogni sezione. Fra una sezione e l'altra non saltano: prima si radunano sullo stesso cerchio al centro, poi si allargano nella disposizione nuova. A sinistra un indice sottile con i nomi delle sezioni e una linea rossa che si riempie scorrendo.

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>Raggio</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/hanken-grotesk@5.3.0/wght.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a made-up maker of carbon wheels, Raggio. The stage sticks while you scroll: two thin rings, each with two
       crosshairs on its rim, change place, size and turn at every stop. Between one stop and the next they first
       regroup on the same circle in the middle, then spread to the new layout. On the left a thin index names the
       sections and a line fills with the scroll -->
  <main>
    <section class="corsa" data-corsa>
      <div class="palco" data-palco>
        <div class="anelli" data-anelli aria-hidden="true">
          <div class="anello" data-anello>
            <span class="anello__tacca" data-tacca></span>
            <span class="mirino mirino--a" data-mirino><svg viewBox="0 0 14 14"><path d="M7 0v14M0 7h14"/></svg></span>
            <span class="mirino mirino--b" data-mirino><svg viewBox="0 0 14 14"><path d="M7 0v14M0 7h14"/></svg></span>
          </div>
          <div class="anello" data-anello>
            <span class="anello__tacca" data-tacca></span>
            <span class="mirino mirino--a" data-mirino><svg viewBox="0 0 14 14"><path d="M7 0v14M0 7h14"/></svg></span>
            <span class="mirino mirino--b" data-mirino><svg viewBox="0 0 14 14"><path d="M7 0v14M0 7h14"/></svg></span>
          </div>
        </div>

        <span class="angolo angolo--ns" aria-hidden="true"><svg viewBox="0 0 14 14"><path d="M7 0v14M0 7h14"/></svg></span>
        <span class="angolo angolo--ne" aria-hidden="true"><svg viewBox="0 0 14 14"><path d="M7 0v14M0 7h14"/></svg></span>
        <span class="angolo angolo--ss" aria-hidden="true"><svg viewBox="0 0 14 14"><path d="M7 0v14M0 7h14"/></svg></span>
        <span class="angolo angolo--se" aria-hidden="true"><svg viewBox="0 0 14 14"><path d="M7 0v14M0 7h14"/></svg></span>

        <a class="marchio" href="#" data-marchio>Raggio</a>

        <nav class="indice" aria-label="Sections" data-indice>
          <span class="indice__binario"><span class="indice__pieno" data-pieno></span></span>
          <ul>
            <li><a href="#" data-voce="1">Philosophy</a></li>
            <li><a href="#" data-voce="2">Craft</a></li>
            <li><a href="#" data-voce="3">Innovation</a></li>
            <li><a href="#" data-voce="4">Ride</a></li>
          </ul>
        </nav>

        <div class="titoli" data-titoli>
          <div class="titolo" data-titolo>
            <p class="titolo__nota">Carbon wheels</p>
            <h2>Built around a circle</h2>
          </div>
          <div class="titolo" data-titolo>
            <p class="titolo__nota">Philosophy</p>
            <h2>Light is a decision</h2>
          </div>
          <div class="titolo" data-titolo>
            <p class="titolo__nota">Craft</p>
            <h2>Laid by hand, in carbon</h2>
          </div>
          <div class="titolo" data-titolo>
            <p class="titolo__nota">Innovation</p>
            <h2>Stiffer where it matters</h2>
          </div>
          <div class="titolo" data-titolo>
            <p class="titolo__nota">Ride</p>
            <h2>Made for the long climb</h2>
          </div>
        </div>

        <p class="cenno" data-cenno><span>Scroll</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>
    </section>

    <footer class="piede">
      <p>Raggio wheels are laid by hand, one rim at a time.</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.

32 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 «L’indice coi cerchi col mirino che si radunano allo scroll» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

È la pagina di Raggio, un costruttore di ruote in carbonio inventato. Il palco resta fermo mentre scorri e attraversa cinque soste: l'apertura, Philosophy, Craft, Innovation e Ride. Sul fondo argento, più chiaro al centro, ci sono solo due cerchi sottili, di un grigio leggero, e ognuno porta due mirini a croce sul bordo, alle due estremità di un diametro. All'apertura i due cerchi stanno bassi, con il centro sotto il bordo della pagina, come un orizzonte; nelle soste dopo si mettono uno accanto all'altro, si scambiano di posto girando di mezzo giro, si stringono o si allargano, finché alla fine stanno uno dentro l'altro, spostati a sinistra. Quando passi da una sosta all'altra i cerchi non saltano: prima si radunano tutti e due sullo stesso cerchio al centro, poi si allargano nella disposizione nuova, il secondo un attimo dopo il primo, con una curva che parte svelta e arriva piano. I mirini girano col loro cerchio, così a metà rotazione diventano una X; quando arrivano si assestano, girando indietro e scendendo di un pixel. Lungo ogni bordo corre una piccola tacca rossa, che accelera mentre scorri. Al centro un titolo breve cambia a ogni sosta, con le parole che salgono una dopo l'altra; a sinistra un indice sottile dice i nomi delle sezioni, la voce corrente si scurisce e una linea rossa si riempie con lo scroll. Puntando un nome i cerchi si inclinano verso di lui; un clic porta a quella sosta. Negli angoli del palco quattro croci piccole fanno da segni di registro.

Come funziona

Le disposizioni in unità dello schermo

Ogni sosta è una coppia di pose, una per cerchio: spostamento dal centro, diametro, rotazione e se i mirini si vedono. Sono scritte in unità di uno schermo alto 1080, come fa il sito di partenza con le sue misure in lvh: diametri di 900, 840, 754, 700, 678, spostamenti di 234, 330, 346 di lato (l’ultima sosta qui a 300, per lasciare libero l’indice). Lo script le moltiplica per il minore fra l'altezza / 1080 e la larghezza / 900, così sul telefono decide la larghezza e i cerchi non diventano troppo grandi.

Radunarsi prima di cambiare

Uno ScrollTrigger sulla sezione legge l'avanzamento e ne ricava la sosta corrente e se si è vicini a un cambio (ZONE, una parte della sosta prima e dopo). Una piccola macchina a stati fa il resto: se la sosta mostrata non è quella giusta, o si è vicini a un cambio, i cerchi vanno prima al cerchio comune al centro, di diametro 840, in GATHER secondi; poi, lontano dal cambio, si allargano nella sosta nuova in MOVE secondi. Anche scorrendo di corsa passano sempre dal centro.

La curva del sito

Ogni spostamento usa cubic-bezier(.33, 0, 0, 1), la curva del sito di partenza: parte svelta e arriva piano. GSAP non ha le curve CSS, quindi è risolta a mano con pochi passi di Newton e passata come funzione di ease. Il secondo cerchio parte LAG secondi dopo il primo. Si animano larghezza e altezza, non la scala, così il bordo resta di un pixel a ogni misura.

I mirini, la tacca e l'indice

I mirini sono figli del cerchio e girano con lui; quando arrivano GSAP li porta da 0,4 a 1 con back.out e da meno 45 gradi a zero, poi giù di un pixel e su. La tacca rossa è un riquadro grande quanto il cerchio, girato dal ticker di GSAP, più svelto quando lo scroll ha velocità. La linea dell'indice è una scaleY uguale all'avanzamento; sul telefono l'indice si sdraia sotto il titolo e la linea diventa una scaleX.

Inclinarsi, cliccare, ridimensionare

Puntando una voce (solo con hover: hover) il gruppo dei cerchi gira di LEAN gradi verso di lei e si sposta di poco; un clic porta con Lenis al centro di quella sosta. A ogni resize le pose in pixel si ricalcolano e si rimettono subito, anche a metà di un movimento, poi la macchina riparte.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`RIDE`	script.js	`1`	Quanto scroll prendono le cinque soste: 2 è il doppio.
`GATHER`	script.js	`0.8`	I secondi per radunarsi al centro.
`MOVE`	script.js	`1.2`	I secondi per allargarsi nella disposizione nuova.
`LAG`	script.js	`0.08`	I secondi fra il primo e il secondo cerchio.
`ZONE`	script.js	`0.14`	Quanto restano radunati intorno a un cambio, come parte di una sosta.
`SIZE`	script.js	`1`	Quanto sono grandi i cerchi: 1 è la misura delle disposizioni.
`LEAN`	script.js	`7`	Di quanti gradi si inclinano verso il nome che punti.
`TICK`	script.js	`1`	Quanto corre la tacca rossa lungo i bordi.

Provali nel Playground

Quando usarla

Come apertura della pagina di un prodotto tecnico (ruote, biciclette, orologi, strumenti) divisa in capitoli; come indice di una presentazione o di una storia aziendale in poche sezioni; dove serve un movimento preciso e calmo, da disegno tecnico, dietro a titoli brevi.

Sul telefono

La stessa animazione: le disposizioni si misurano sulla larghezza, così i cerchi restano nel palco e quello che esce di lato lo taglia il palco. L'indice si sdraia in basso, sotto il titolo, e la sua linea si riempie da sinistra a destra; un tocco su un nome porta alla sosta.

Con il movimento ridotto

I cerchi non viaggiano: a ogni sosta si spengono, cambiano posto e si riaccendono in dissolvenza. La tacca sta ferma, i titoli compaiono in dissolvenza, niente scorrimento morbido.

Trappole

Con la scala al posto di larghezza e altezza il bordo di un pixel si ingrossa e si assottiglia mentre il cerchio cresce: si animano width e height, che per due elementi soli costano poco.
Scorrendo di corsa la sosta cambia mentre i cerchi sono ancora in viaggio: se si cambia bersaglio a metà strada saltano il centro. La macchina a stati lascia finire ogni tratto e poi guarda dove si è arrivati con lo scroll.
I mirini sono croci disegnate con vector-effect: non-scaling-stroke: quando si rimpiccioliscono all'uscita la riga resta di un pixel e non sparisce a metà.
Le pose sono calcolate in pixel: al resize (anche la finestra della demo cambia altezza) si rifanno subito, se no i cerchi restano della misura vecchia fino al cambio dopo.

Librerie

GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Hanken Grotesk (font variabile) 5.3.0.

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

Collaudo

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