La frase che si ricompone

/* La frase che si ricompone
   Le parole partono sparse per lo schermo: spostate, girate, grandi o piccole, ognuna con una sua
   larghezza e un suo peso del carattere variabile. Scorrendo tornano una alla volta al loro posto, con
   tempi un po' diversi, e la frase si legge. Alla fine le parole in data-accento prendono il colore.
   Il disordine è deciso da un numero (SEME): cambia il seme, cambia la confusione, ma resta la stessa
   a ogni visita. */
gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const SEME = 7;          /* il disordine di partenza: prova altri numeri */
const SPARGI = 0.4;      /* quanto lontano partono, in frazione dello schermo */
const GIRO = 38;         /* rotazione massima in gradi */
const RITARDO = 0.35;    /* quanto si sfalsano le parole, in frazione della corsa */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const frase = document.querySelector('[data-frase]');

/* divide in parole senza perdere lo span dell'accento */
const parole = [];
function dividi(nodo) {
  [...nodo.childNodes].forEach((n) => {
    if (n.nodeType === 3) {
      const pezzi = n.textContent.split(/(\s+)/);
      const f = document.createDocumentFragment();
      pezzi.forEach((p) => {
        if (!p) return;

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

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