Charts that draw themselves

/* Grafici che si disegnano
   Ogni grafico è legato allo scorrimento della sua sezione (scrub): le barre crescono dal basso con
   scaleY, la ciambella chiude il tratto con stroke-dashoffset, i punti si accendono uno alla volta.
   I numeri contano insieme al disegno, quindi il dato e la forma arrivano nello stesso momento.
   La carta del grafico ha anche una leggera parallasse, e tornando su tutto si smonta all'indietro. */
gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const INIZIO = 'top 78%';     /* quando il grafico comincia a disegnarsi */
const FINE = 'center 48%';    /* quando è completo */
const PARALLASSE = 6;         /* percento di spostamento della carta mentre attraversa lo schermo */

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

/* un numero che conta legato a una timeline: legge il valore finale da data-valore */
function conta(tl, el, pos, durata) {
  const fine = +el.dataset.valore;
  const s = { n: 0 };
  tl.to(s, { n: fine, duration: durata, ease: 'none', onUpdate: () => { el.textContent = Math.round(s.n); } }, pos);
}

function finale() {
  /* movimento ridotto: tutto già disegnato */
  document.querySelectorAll('[data-valore]').forEach((el) => { el.textContent = el.dataset.valore; });
  const anello = document.querySelector('.anello');
  const C = 2 * Math.PI * 80;

The code for this animation is part of lifetime access.

The preview stays open: watch it, slow it down, try it on your phone.