L’anello delle sfere

/* L’anello delle sfere
   Tre sfere luminose sparse attorno a un titolo. Scorrendo, il titolo si sfoca e scende, e le sfere girano
   insieme lungo un arco: ognuna va verso il suo posto su un anello, rimpicciolendo, mentre il lucido dentro
   gira su sé stesso. Quando arrivano compaiono i loro nomi, sempre dritti, e un anello sottile con una parola
   al centro. Finito lo scorrimento l’anello continua a girare piano, da solo. */

gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const CORSA = 2.2;          /* quanti schermi di scorrimento dura la scena */
const GIRO = 0.6;           /* quanti giri fa il gruppo mentre le sfere vanno all’anello */
const ORBITA = 50;          /* secondi per un giro completo, a scena finita */
const LUCIDO = [300, 270, 140];   /* di quanti gradi gira il lucido di ogni sfera durante la scena */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const scena = document.querySelector('[data-scena]');
const titolo = document.querySelector('[data-titolo]');
const anello = document.querySelector('[data-anello]');
const sfere = [...document.querySelectorAll('[data-sfera]')];
const lucidi = [...document.querySelectorAll('[data-lucido]')];
const nomi = [...document.querySelectorAll('[data-nome]')];
if (RIDOTTO) {
  scena.classList.add('scena--ferma');
  document.querySelector('[data-nota]').textContent = 'Le tre sfere stanno sull’anello, ognuna col suo nome.';
}

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

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