Rolling list drum

/* Tamburo di voci
   Una lista che scorre dentro una fascia fissa, come le voci sul tamburo di una macchina.
   La voce più vicina al centro è piena, le altre sfumano con la distanza; una maschera CSS
   le fa sparire sopra e sotto. Il rombo accanto gira di un quarto di giro a ogni voce. */
gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const CENTRO = 0.5;          /* dove sta la fascia chiara, in frazione dell'altezza */
const SPENTO = 0.14;         /* opacità minima delle voci lontane */
const CADUTA = 0.85;         /* quanto in fretta si spengono allontanandosi (1 = voce dopo già spenta) */
const GIRO = 90;             /* gradi del rombo per ogni voce */

const tamburo = document.querySelector('.tamburo');
const lista = document.querySelector('.voci');
const voci = [...document.querySelectorAll('.voce')];
const rombo = document.querySelector('.rombo');
const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const n = voci.length;
let centri = [];

const misura = () => { centri = voci.map((v) => v.offsetTop + v.offsetHeight / 2); };

function disegna(k) {
  /* k va da 0 (prima voce al centro) a n - 1 (ultima voce al centro) */
  const i = Math.min(n - 2, Math.floor(k));
  const f = k - i;

The code for this animation is part of lifetime access.

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