Carte che si impilano

/* Carte che si impilano
   Le carte sono position: sticky, ognuna si ferma uno scalino più in basso della precedente. Mentre la
   carta dopo sale, quella sotto si rimpicciolisce, si storce un poco e si scurisce, legata allo
   scorrimento. Quando una carta arriva in alto il suo disegno si traccia da solo: ogni tratto SVG
   parte nascosto (stroke-dashoffset uguale alla sua lunghezza) e si disegna fino a zero. */
gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const PICCOLA = 0.93;     /* la scala della carta coperta */
const STORTA = 1.4;       /* gradi di rotazione, un verso per carta */
const BUIO = 0.38;        /* quanto si scurisce */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const carte = [...document.querySelectorAll('.carta')];
const ancore = [...document.querySelectorAll('.ancora')];

/* ogni tratto sa quanto è lungo: il disegno parte nascosto */
function preparaDisegno(carta) {
  const tratti = [...carta.querySelectorAll('.tratto')];
  tratti.forEach((t) => {
    const l = t.getTotalLength();
    gsap.set(t, { strokeDasharray: l, strokeDashoffset: l });
  });
  const pezzi = carta.querySelectorAll('.compare');
  gsap.set(pezzi, { transformOrigin: '50% 50%', transformBox: 'fill-box' });
  const tl = gsap.timeline({ paused: true });

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

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