Le cifre che si accendono

Scroll, TestoGSAP, Solo CSSFacilePeso compresso: Demo 6,6 KBGSAP + ScrollTrigger 45 KBGratisScarica lo zip

Scorri dentro l’anteprima

Quattro schede pallide con una cifra ciascuna, che conta da zero quando arriva. Poi lo scorrimento le accende una alla volta: il velo chiaro si alza da una stanza, le parole diventano bianche e la scheda di prima torna a dormire.

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 figures that light up</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/400-italic.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-condensed@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the about section of a made-up interior studio. Four pale cards with a figure each count up from zero when they
       arrive; then, as you scroll, one card at a time lights up: the pale veil lifts off a room and the words turn
       white, and the card before goes back to sleep -->
  <main>
    <section class="apertura">
      <p class="etichetta">The studio</p>
      <h1 class="titolo">Nothing in a room<br>is there by chance.</h1>
      <p class="testo">Scroll down to read us in four figures.</p>
    </section>

    <section class="racconto" data-racconto>
      <div class="palco">
        <header class="testa">
          <p class="etichetta etichetta--parentesi">
            <svg viewBox="0 0 6 16" aria-hidden="true"><path d="M5 1H1v14h4" fill="none" stroke="currentColor" stroke-width="1"/></svg>
            in figures
            <svg viewBox="0 0 6 16" aria-hidden="true"><path d="M1 1h4v14H1" fill="none" stroke="currentColor" stroke-width="1"/></svg>
          </p>
          <h2 class="titolo titolo--medio">About us.</h2>
        </header>

        <div class="finestra" data-finestra>
          <ol class="carte" data-carte>
            <li class="carta" data-carta>
              <div class="carta__stanza" data-stanza="5"></div>
              <div class="carta__buio"></div>
              <div class="carta__velo" data-velo></div>
              <p class="carta__testo" data-testo><span>Years in Seville</span><b class="carta__cifra" data-cifra="12">12</b></p>
            </li>
            <li class="carta" data-carta>
              <div class="carta__stanza" data-stanza="18"></div>
              <div class="carta__buio"></div>
              <div class="carta__velo" data-velo></div>
              <p class="carta__testo" data-testo><span>Years in practice</span><b class="carta__cifra" data-cifra="19">19</b></p>
            </li>
            <li class="carta" data-carta>
              <div class="carta__stanza" data-stanza="33"></div>
              <div class="carta__buio"></div>
              <div class="carta__velo" data-velo></div>
              <p class="carta__testo" data-testo><span>Homes in Spain</span><b class="carta__cifra" data-cifra="41">41</b></p>
            </li>
            <li class="carta" data-carta>
              <div class="carta__stanza" data-stanza="52"></div>
              <div class="carta__buio"></div>
              <div class="carta__velo" data-velo></div>
              <p class="carta__testo" data-testo><span>Homes abroad</span><b class="carta__cifra" data-cifra="96">96</b></p>
            </li>
          </ol>
        </div>

        <p class="testo testo--sotto">Proportion sets the structure, material sets the tone, and light shapes the space.</p>
      </div>
    </section>

    <section class="apertura apertura--fine">
      <h2 class="titolo titolo--medio">Start with a conversation.</h2>
    </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="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.

29 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 cifre che si accendono» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

La sezione «chi siamo» di uno studio d’interni inventato, raccontata in quattro cifre: anni a Siviglia, anni di mestiere, case in Spagna, case all’estero. Le quattro schede arrivano pallide, color crema, con le parole in un grigio caldo, e ogni cifra, in un corsivo grande, conta da zero la prima volta che si vede: veloce all’inizio e più piano alla fine. Poi lo schermo si ferma e lo scorrimento accende le schede una dopo l’altra: il velo crema si alza e sotto c’è una stanza, scurita perché le parole si leggano, e le parole diventano bianche. Mentre si accende la scheda dopo, quella di prima si spegne. L’ultima resta accesa. Al telefono le schede sono larghe e la fila scorre di lato, così la scheda accesa sta sempre in mezzo.

Come funziona

Tre strati

Ogni scheda ha quattro strati uno sull’altro: la stanza disegnata, un velo nero a metà, il velo crema e le parole. Spenta, il velo crema copre tutto e le parole sono del colore --spenta; accesa, il velo crema è trasparente e le parole sono LIT. Il velo nero non si muove mai: c’è solo perché le parole bianche si leggano sulla stanza.

Le cifre che contano

Un IntersectionObserver guarda le schede e, quando una è sullo schermo per almeno COUNT_AT, fa contare la sua cifra da zero una volta sola: un tween su un numero, in COUNT_TIME secondi con power1.out, che a ogni passo scrive il valore arrotondato. È la stessa curva del sito, 1 meno il quadrato di quello che manca.

Una scheda per tempo

La sezione è alta 420lvh e il palco dentro è sticky. Una timeline con ScrollTrigger, da START alla fine della sezione con scrub SCRUB, accende la scheda numero i al tempo i, in un tempo, e la spegne al tempo i + 1, mentre si accende quella dopo. All’ultima manca lo spegnimento, così resta accesa. Le curve sono EASE.

Il colore delle parole

Le parole passano da un colore all’altro con un tween su color. Il valore di partenza si legge da --spenta con getComputedStyle, così cambiando il colore nel CSS cambia anche quello a cui la scheda torna quando si spegne.

Al telefono

Sotto i 768 pixel le schede sono larghe tre quarti dello schermo e stanno in una fila più larga dello schermo. gsap.matchMedia aggiunge alla stessa timeline, allo stesso tempo di ogni accensione, uno spostamento di lato che porta la scheda in mezzo, con power2.inOut e senza uscire dai bordi della fila.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SCRUB`	script.js	`0.8`	Quanto ci mettono le schede a raggiungere lo scorrimento (nel sito 0,8).
`START`	script.js	`'top -20%'`	Quando si accende la prima scheda (nel sito top -20%).
`EASE`	script.js	`'power2.out'`	La curva del velo e delle parole (nel sito power2.out).
`COUNT_TIME`	script.js	`1`	Quanti secondi ci mette una cifra a contare (nel sito 1).
`COUNT_AT`	script.js	`0.2`	Quanta scheda deve vedersi prima che la cifra conti (nel sito 0,2).
`LIT`	script.js	`'#ffffff'`	Il colore delle parole di una scheda accesa.

Provali nel Playground

Quando usarla

Per i numeri di uno studio, di un’azienda, di un’associazione: anni, progetti, persone, città. Quattro cifre sono il numero giusto; con più schede la sezione va allungata.

Sul telefono

Uguale, con le schede larghe e la fila che scorre di lato insieme allo scorrimento, una scheda in mezzo per volta.

Con il movimento ridotto

Le cifre sono già scritte e le quattro schede sono già accese, senza conteggio e senza movimento; al telefono la fila si scorre col dito.

Trappole

Se la scheda ha una transition CSS sul colore, come nel sito, e GSAP cambia il colore a ogni fotogramma, le due si inseguono: il colore arriva in ritardo e scivola. O l’una o l’altra.
Il numero va scritto a zero prima che la scheda si veda, non quando parte il conteggio: altrimenti per un attimo si legge la cifra finale e poi lo zero.
Al telefono il palco a griglia si allarga per contenere la fila e lo spostamento di lato diventa zero: serve grid-template-columns: minmax(0, 1fr).
Le posizioni di lato vanno date come funzioni: le misure delle schede cambiano quando arrivano i caratteri e quando si gira il telefono.

Librerie

GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Instrument Serif 5.3.0, Roboto Condensed (font variabile) 5.3.0.

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

Collaudo

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