Numeri che contano e si allargano

/* Numeri che contano e si allargano
   Quando un numero entra nello schermo conta fino al suo valore e, nello stesso tempo,
   si allarga sull'asse della larghezza del font: da stretto e nervoso a pieno e fermo.
   Un'ombra spostata cresce con lui, come una scia. */
gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const DURATA = 2.2;           /* secondi del conteggio */
const LARGHEZZA = [75, 104];  /* asse wdth: all'inizio e alla fine */
const SCIA = 12;              /* spostamento massimo dell'ombra, in pixel */
const DA_VICINO = 70;         /* per gli anni: parte da (anno - 70) invece che da zero */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;

document.querySelectorAll('.numero').forEach((n) => {
  const fino = +n.dataset.fino;
  if (RIDOTTO) {
    n.style.setProperty('--w', LARGHEZZA[1]);
    return;
  }
  const da = fino > 1000 ? fino - DA_VICINO : 0;
  const o = { v: da, w: LARGHEZZA[0], s: 0 };
  const scrivi = () => {
    n.textContent = Math.round(o.v);
    n.style.setProperty('--w', o.w.toFixed(1));
    n.style.setProperty('--scarto', o.s.toFixed(1));

Il codice di questa animazione è nell’accesso a vita.

L’anteprima resta libera: guardala, rallentala, provala sul telefono.