The hour that covers the photo

/* L'ora che copre la foto
   Si scorre in giù e la striscia va di lato: uno schermo fermo (position: sticky) e dentro un binario
   che scivola, un pixel di lato per ogni pixel di scorrimento. Tutti gli altri effetti si agganciano al
   binario con containerAnimation. Quando arriva un pannello con l'ora, la lastra prima resta ferma
   (viene spinta avanti quanto il pannello avanza) e si rimpicciolisce mentre il pannello la copre;
   le cifre salgono una dopo l'altra. Le foto sono più larghe della cornice e scorrono dentro di lei. */
gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const RIMPICCIOLISCE = 0.86;   /* a quanto si riduce la lastra coperta */
const SPARISCE = 0.25;         /* in quale frazione della corsa del pannello la lastra coperta è già sparita */
const PARALLASSE = true;       /* le foto scorrono dentro la cornice */

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

/* grana: un quadrato di rumore disegnato una volta sola */
(function grana() {
  const c = document.createElement('canvas');
  c.width = c.height = 160;
  const x = c.getContext('2d');
  const img = x.createImageData(160, 160);
  for (let i = 0; i < img.data.length; i += 4) {
    const v = (Math.random() * 255) | 0;
    img.data[i] = img.data[i + 1] = img.data[i + 2] = v;

The code for this animation is part of lifetime access.

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