Blinds over images

/* Persiane sulle immagini
   Sopra ogni immagine ci sono delle stecche del colore della pagina. Quando l'immagine entra
   nello schermo le stecche si ritirano verso l'alto in ordine sparso, come una persiana che si
   apre, e intanto l'immagine si allontana (da 1.3 a 1). Le stecche non sono tutte uguali:
   l'ultima è larga il doppio, e quante sono dipende dalla larghezza della foto. */
gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const STECCA = 170;          /* larghezza indicativa di una stecca, in pixel */
const MIN = 2, MAX = 5;      /* quante stecche al minimo e al massimo */
const ZOOM = 1.3;            /* da quanto vicino parte l'immagine */
const DURATA = 0.8;

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;

document.querySelectorAll('.lavoro').forEach((lavoro, n) => {
  const quadro = lavoro.querySelector('.quadro');
  const immagine = lavoro.querySelector('.immagine');
  const didascalia = lavoro.querySelector('.didascalia');
  if (RIDOTTO) return;

  const persiane = document.createElement('div');
  persiane.className = 'persiane';
  persiane.setAttribute('aria-hidden', 'true');
  const quante = gsap.utils.clamp(MIN, MAX, Math.round(quadro.offsetWidth / STECCA));
  for (let i = 0; i < quante; 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.