Stacking certificates

/* Certificati che si impilano
   Ogni riga dell'elenco ha il suo attestato, chiuso da un clip-path. Passandoci sopra si apre dal basso
   e cresce un poco; lasciando la riga si richiude verso l'alto. Ogni attestato che si apre prende uno
   z-index più alto dei precedenti: se scorri veloce sulle righe i fogli si impilano l'uno sull'altro,
   un po' storti, come carte buttate sul tavolo. Sul telefono non c'è hover: si apre la riga che passa
   a metà schermo. */
gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const DURATA = 0.5;        /* secondi per aprire o chiudere un attestato */
const CURVA = 'expo.out';
const PICCOLO = 0.9;       /* la scala da cui parte l'attestato */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const TOCCO = matchMedia('(hover: none), (pointer: coarse)').matches;
const d = RIDOTTO ? 0 : DURATA;
let pila = 1;
let aperta = null;

const righe = [...document.querySelectorAll('.premio')];
righe.forEach((r) => gsap.set(r.querySelector('.attestato'), { scale: PICCOLO }));

function apri(riga) {
  const foglio = riga.querySelector('.attestato');
  pila += 1;
  gsap.set(foglio, { zIndex: pila });

The code for this animation is part of lifetime access.

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