/* The exhibition hung on scroll The header of a made-up art gallery, Halle Nord, in the rich style. The stage sticks while you scroll: on an empty green wall with a brass picture rail, a track of spotlights and an oak floor, the paintings of the winter show are hung one after the other. For each one a brass hook slides along the rail to its place, the painting is hoisted up from the floor on its two steel wires, arrives with a little bounce and swings on the hook until it settles; its label slides in under it and its spotlight clicks on with a flicker, with dust floating in the beam. A wooden step ladder moves along under the work being hung. Then the room lights go down, the spots stay up, the wall steps back and the opening night arrives with the title and the button. Everything that depends on the scroll (the hooks, the hoisting, the labels, which spot is on, the ladder, the wall stepping back) is computed from one number, so scrolling back takes the show down; what depends on time (the swinging, the flicker, the dust) runs on the GSAP ticker. The pointer, or a finger dragging, nudges a hung painting and it swings on its wires. */ /* ---- valori da cambiare ---- */ const BRAND = 'Halle Nord'; /* the gallery's name in the header */ const SHOW = 'Winter show'; /* the name of the show, under the moment's name and over the title */ const SCREENS = 6; /* how long hanging the whole show lasts, in screens of scroll */ const SWAY = 1; /* how much the paintings swing when they arrive or are nudged (0 = never) */ const LIGHT = 1; /* how bright the spotlight beams are, from 0 to 1.6 */ const DUST = 1; /* how much dust floats in the beams, from 0 to 2 */ gsap.registerPlugin(ScrollTrigger); const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const NS = 'http://www.w3.org/2000/svg'; const $ = (s, r = document) => r.querySelector(s); const clamp = (v, a = 0, b = 1) => Math.min(b, Math.max(a, v)); const liscio = (t) => { t = clamp(t); return t * t * (3 - 2 * t); }; const lerp = (a, b, t) => a + (b - a) * t; const f1 = (n) => Math.round(n * 10) / 10; /* a rise that passes its place by a hair and comes back, like a hoist stopping */ const arrivo = (t) => { t = clamp(t); const c = 1.9; return 1 + (c + 1) * Math.pow(t - 1, 3) + c * Math.pow(t - 1, 2); }; function el(tag, attrs, parent) { const e = document.createElementNS(NS, tag); for (const k in attrs) e.setAttribute(k, attrs[k]); if (parent) parent.appendChild(e); return e; } /* a small random generator that gives the same numbers for the same seed */ function casuale(seme) { let s = seme | 0; return () => { s = (s + 0x6d2b79f5) | 0; let t = Math.imul(s ^ (s >>> 15), 1 | s); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } const F = (c) => `style="fill:${c}"`; const FS = (c, s, w) => `style="fill:${c};stroke:${s};stroke-width:${w}"`; const S = (s, w, extra = '') => `style="fill:none;stroke:${s};stroke-width:${w};${extra}"`; const mix = (a, b, p) => `color-mix(in srgb, ${a}, ${b} ${p}%)`; const giro = $('[data-giro]'); const palco = $('[data-palco]'); const svg = $('[data-scena]'); const finale = $('[data-finale]'); const cenno = $('[data-cenno]'); const statoEl = $('[data-stato]'); const statoNome = $('[data-stato-nome]'); const statoNota = $('[data-stato-nota]'); $('[data-brand]').textContent = BRAND; $('[data-brand2]').textContent = BRAND; $('[data-show]').textContent = SHOW; statoNota.textContent = SHOW; giro.style.height = `${(SCREENS + 1) * 100}lvh`; /* the five works of the show: their name, what they are, their shape (width over height), their frame */ const OPERE = [ { nome: 'Paper Suns', nota: 'Cut paper, 2024', forma: 0.8, misura: 1, cornice: 'rovere' }, { nome: 'Low Hills', nota: 'Oil on linen', forma: 1.32, misura: 0.9, cornice: 'oro' }, { nome: 'Three Circles', nota: 'Screen print, framed', forma: 1, misura: 0.78, cornice: 'bianca' }, { nome: 'Blue Vase', nota: 'Oil on board', forma: 0.78, misura: 1, cornice: 'nera' }, { nome: 'North Sail', nota: 'Gouache, 2025', forma: 1.24, misura: 0.88, cornice: 'noce' }, ]; /* on a narrow stage only three works fit, on a middle one four */ const SCELTA = { 3: [0, 1, 3], 4: [0, 1, 2, 3], 5: [0, 1, 2, 3, 4] }; /* ---------------------------------------------------------------- the paintings, drawn inside x,y,w,h */ function tela(id, x, y, w, h) { return ``; } function artePaper(id, x, y, w, h) { const r = casuale(11); let specks = ''; for (let i = 0; i < 26; i++) specks += ``; return ` ${specks} `; } function arteHills(id, x, y, w, h) { const r = casuale(23); let alberi = ''; for (let i = 0; i < 9; i++) { const ax = x + w * (0.08 + i * 0.1 + r() * 0.04); const ay = y + h * (0.6 + Math.sin(i * 0.9) * 0.05); const s = h * (0.05 + r() * 0.03); alberi += ``; } return ` ${alberi} `; } function arteCircles(id, x, y, w, h) { let righe = ''; for (let i = 1; i < 6; i++) righe += ``; return ` ${righe} `; } function arteVase(id, x, y, w, h) { const cx = x + w * 0.56; const fiori = [[-0.14, 0.2, 'var(--arancio)'], [0.02, 0.12, 'var(--rosa)'], [0.16, 0.22, 'var(--giallo)'], [-0.02, 0.3, '#fff']]; let steli = ''; let corolle = ''; for (const [dx, fy, c] of fiori) { const fx = cx + w * dx; const fyy = y + h * fy; steli += ``; let petali = ''; for (let i = 0; i < 6; i++) { const a = (i / 6) * Math.PI * 2; petali += ``; } corolle += `${petali}`; } return ` ${steli} ${corolle} `; } function arteSail(id, x, y, w, h) { let onde = ''; for (let i = 0; i < 5; i++) { const oy = y + h * (0.66 + i * 0.065); onde += ``; onde += ``; } const bx = x + w * 0.44; const by = y + h * 0.66; return ` ${onde} `; } const ARTI = [artePaper, arteHills, arteCircles, arteVase, arteSail]; /* the frames: oak, gold, white with a mat and glass, black lacquer, walnut */ function cornice(tipo, x, y, w, h, ft) { const fondo = { rovere: 'url(#gRovere)', oro: 'url(#gOro)', bianca: '#f6f3ec', nera: 'url(#gNera)', noce: 'url(#gNoce)', }[tipo]; let extra = ''; if (tipo === 'rovere' || tipo === 'noce') { const r = casuale(tipo.length * 7 + Math.round(w)); for (let i = 0; i < 7; i++) { const yy = y + r() * ft; extra += ``; const yb = y + h - r() * ft; extra += ``; } } if (tipo === 'oro') { extra += ``; extra += ``; } /* the bevel: light on the top and left inner edges, shade on the bottom and right */ const bev = ` `; return ` ${extra} ${bev}`; } /* ---------------------------------------------------------------- the scene */ let W = 0; let H = 0; let stretto = false; let N = 5; let trackY = 0; let railY = 0; let floorY = 0; let quadri = []; /* per painting: the elements and the numbers that place it */ let museo; let buio; let scala; let bancoG; let notte; let polvere = []; let inizi = []; function defs() { return ` `; } function costruisci() { const r = palco.getBoundingClientRect(); W = Math.max(280, r.width); H = Math.max(300, r.height); stretto = W < 560; if (stretto) palco.setAttribute('data-stretto', ''); else palco.removeAttribute('data-stretto'); N = W >= 760 ? 5 : W >= 520 ? 4 : 3; svg.setAttribute('viewBox', `0 0 ${f1(W)} ${f1(H)}`); svg.innerHTML = defs(); trackY = clamp(H * 0.13, 46, 116); railY = trackY + Math.max(16, H * 0.045); floorY = H * 0.8; /* the dark of the room around the wall, once it steps back for the title */ notte = el('rect', { x: 0, y: 0, width: W, height: H, style: 'fill:#0b2421;opacity:0' }, svg); svg.insertAdjacentHTML('beforeend', ``); museo = el('g', { 'clip-path': 'url(#cMuseo)' }, svg); /* the wall, with a faint plaster texture and the shade low down */ el('rect', { x: 0, y: 0, width: W, height: floorY, style: 'fill:url(#gMuro)' }, museo); const rr = casuale(5); let intonaco = ''; for (let i = 0; i < Math.round(W / 9); i++) { const x = rr() * W; const y = rr() * floorY; intonaco += ` 0.5 ? '#fff' : '#000', 0.6, `opacity:${(0.03 + rr() * 0.04).toFixed(3)}`)}/>`; } museo.insertAdjacentHTML('beforeend', intonaco); /* the room lights going down as the spots come up */ buio = el('rect', { x: 0, y: 0, width: W, height: H, style: 'fill:#04110f;opacity:0' }, museo); /* the oak floor in planks, the skirting and the shadow line */ const pav = el('g', {}, museo); pav.insertAdjacentHTML('beforeend', ``); const rp = casuale(9); let assi = ''; const righe = 5; for (let j = 0; j < righe; j++) { const y0 = floorY + ((H - floorY) * j) / righe; const y1 = floorY + ((H - floorY) * (j + 1)) / righe; assi += ``; let x = -rp() * 120; while (x < W) { const l = 90 + rp() * 110; assi += ``; if (rp() > 0.55) assi += ``; assi += ``; x += l; } } pav.insertAdjacentHTML('beforeend', assi); pav.insertAdjacentHTML('beforeend', ` `); /* the track of spotlights and the brass picture rail */ museo.insertAdjacentHTML('beforeend', ` `); for (let x = W * 0.08; x < W; x += Math.max(140, W * 0.22)) { museo.insertAdjacentHTML('beforeend', ` `); } const coni = el('g', {}, museo); const ombre = el('g', {}, museo); const opere = el('g', {}, museo); const lampade = el('g', {}, museo); const etichette = el('g', {}, museo); const polvereG = el('g', {}, museo); /* the works: where they hang and how big they are */ const scelte = SCELTA[N]; const margine = W * 0.05; const slot = (W - margine * 2) / N; const zonaAlta = railY + H * 0.08; const zonaBassa = floorY - Math.max(40, H * 0.11); const cy = (zonaAlta + zonaBassa) / 2; const hMax = zonaBassa - zonaAlta; quadri = scelte.map((k, i) => { const o = OPERE[k]; let h = Math.min(hMax, (slot * 0.74) / o.forma) * o.misura; const w = h * o.forma; const xc = margine + slot * (i + 0.5); const top = cy - h / 2 + (i % 2 ? h * 0.02 : 0); const ft = Math.max(4, Math.min(w, h) * (o.cornice === 'bianca' ? 0.05 : 0.075)); const id = `q${i}`; const lx = -w / 2; const ly = top - railY; const mat = o.cornice === 'bianca' ? Math.min(w, h) * 0.11 : 0; const ax = lx + ft + mat; const ay = ly + ft + mat; const aw = w - (ft + mat) * 2; const ah = h - (ft + mat) * 2; /* the shadow on the wall, the hook, the swinging group with wires, painting and frame */ const ombra = el('rect', { x: f1(xc - w / 2 + 4), y: f1(top + 9), width: f1(w), height: f1(h), style: 'fill:#000;opacity:.4', filter: 'url(#fOmbra)' }, ombre); const gancio = el('g', {}, opere); gancio.innerHTML = ` `; const appeso = el('g', {}, opere); const fili = el('path', { style: 'fill:none;stroke:#d6dbe1;stroke-width:1.1;stroke-linecap:round' }, appeso); const fili2 = el('path', { style: 'fill:none;stroke:#fff;stroke-width:.5;opacity:.6' }, appeso); const corpo = el('g', {}, appeso); corpo.innerHTML = ` ${mat ? ` ` : ''} ${ARTI[k](id, f1(ax), f1(ay), f1(aw), f1(ah))} ${o.cornice !== 'bianca' ? `${tela(id, f1(ax), f1(ay), f1(aw), f1(ah))}` : ''} ${cornice(o.cornice, f1(lx), f1(ly), f1(w), f1(h), f1(ft))} ${o.cornice === 'bianca' ? `` : ''} `; /* the spotlight on the track, aimed at the work, and its beam */ const lampX = xc - Math.min(slot * 0.32, w * 0.55); const mira = Math.atan2(top + h * 0.45 - trackY, xc - lampX) * (180 / Math.PI) - 90; const cono = el('path', { d: `M${f1(lampX - 5)} ${f1(trackY + 22)}L${f1(lampX + 5)} ${f1(trackY + 22)}L${f1(xc + w * 0.78)} ${f1(top + h * 1.12)}L${f1(xc - w * 0.62)} ${f1(top + h * 1.12)}Z`, style: `fill:url(#gCono${i});opacity:0`, }, coni); svg.querySelector('defs').insertAdjacentHTML('beforeend', ` `); const pozza = el('ellipse', { cx: f1(xc + w * 0.08), cy: f1(top + h * 0.5), rx: f1(w * 0.85), ry: f1(h * 0.78), style: 'fill:var(--luce);opacity:0', filter: 'url(#fOmbra)' }, coni); const lampada = el('g', { transform: `translate(${f1(lampX)} ${f1(trackY)})` }, lampade); lampada.innerHTML = ` `; const bocca = lampada.querySelector('[data-bocca]'); /* the label under the work */ const lw = Math.min(w * 0.82, stretto ? 92 : 132); const lh = Math.max(20, lw * 0.32); const fs = Math.max(7.5, lh * 0.34); const etichetta = el('g', {}, etichette); etichetta.innerHTML = ` ${o.nome} ${o.nota}`; const etX = xc - lw / 2; const etY = top + h + Math.max(8, H * 0.02); /* a few motes of dust floating in the beam */ const motes = []; const rm = casuale(31 + i); const nMotes = Math.round(7 * DUST); for (let m = 0; m < nMotes; m++) { motes.push({ e: el('circle', { r: f1(0.6 + rm() * 1.1), style: 'fill:var(--luce);opacity:0' }, polvereG), u: rm(), v: rm() - 0.5, f: rm() * 10, s: 0.04 + rm() * 0.06, }); } return { o, w, h, xc, top, ft, ombra, gancio, appeso, fili, fili2, corpo, cono, pozza, bocca, etichetta, etX, etY, lw, lh, lampX, motes, ang: 0, vel: 0, arrivato: false, acceso: false, flicker: { v: 0 }, }; }); /* the step ladder that follows the work being hung */ const sh = Math.min(H * 0.34, floorY - railY - 20); scala = el('g', {}, museo); let pioli = ''; for (let i = 1; i < 5; i++) { const y = -sh * (i / 5); const sp = sh * 0.11 * (1 - i / 7); pioli += ``; } scala.innerHTML = ` ${pioli} `; /* the bench in the middle of the room */ const bw = Math.min(W * 0.36, 300); const bh = Math.max(12, (H - floorY) * 0.22); const by = floorY + (H - floorY) * 0.62; bancoG = el('g', { transform: `translate(${f1(W / 2)} ${f1(by)})` }, museo); let bottoni = ''; for (let i = 1; i < 8; i++) bottoni += ``; bancoG.innerHTML = ` ${bottoni}`; inizi = quadri.map((q, i) => 0.06 + i * (0.68 / N)); costruisciFasi(); } /* ---------------------------------------------------------------- the moments, for the name top right */ let FASI = []; function costruisciFasi() { FASI = [[0, 'An empty wall', SHOW]]; quadri.forEach((q, i) => FASI.push([inizi[i], q.o.nome, q.o.nota])); FASI.push([0.78, 'Lights down', 'Spots up']); FASI.push([0.86, 'Opening night', 'Friday at seven']); } const stato = { p: 0 }; let ultimo = 0; let tempoAttuale = 0; let trasformazione = { tx: 0, ty: 0, sc: 1 }; function accendi(q) { q.flicker.v = 0; if (REDUCED) { q.flicker.v = 1; return; } gsap.timeline() .to(q.flicker, { v: 0.85, duration: 0.05 }) .to(q.flicker, { v: 0.15, duration: 0.06 }) .to(q.flicker, { v: 1, duration: 0.05 }) .to(q.flicker, { v: 0.55, duration: 0.05, delay: 0.08 }) .to(q.flicker, { v: 1, duration: 0.25, ease: 'power2.out' }); } function disegna(p, t, dt) { /* each work: the hook slides to its place, the painting is hoisted, it swings, its label and spot come on */ let corrente = 0; let luci = 0; quadri.forEach((q, i) => { const s = inizi[i]; const scorre = liscio((p - s) / 0.025); const sale = clamp((p - s - 0.018) / 0.05); const h1 = REDUCED ? liscio(sale) : arrivo(sale); const etichetta = liscio((p - s - 0.07) / 0.02); const luce = p > s + 0.078; if (p >= s) corrente = i; const gx = lerp(-30, q.xc, scorre); q.gancio.setAttribute('transform', `translate(${f1(gx)} ${f1(railY)})`); q.gancio.setAttribute('opacity', scorre > 0.001 ? 1 : 0); /* the painting comes up from the floor on its wires */ const sotto = H + 20 - q.top; const dy = (1 - h1) * sotto; if (sale >= 0.999 && !q.arrivato) { q.arrivato = true; if (!REDUCED) q.vel += (i % 2 ? 1 : -1) * 34 * SWAY; } if (sale < 0.5) q.arrivato = false; if (!REDUCED && dt > 0) { const acc = -30 * q.ang - 2.4 * q.vel; q.vel += acc * dt; q.ang += q.vel * dt; if (sale < 0.98) { q.ang *= 0.8; q.vel *= 0.8; } } const a = REDUCED ? 0 : q.ang; q.appeso.setAttribute('transform', `translate(${f1(q.xc)} ${f1(railY)}) rotate(${a.toFixed(2)})`); q.appeso.setAttribute('opacity', sale > 0.001 ? 1 : 0); q.corpo.setAttribute('transform', `translate(0 ${f1(dy)})`); const yTop = q.top - railY + dy; const hx = (scorre < 1 ? gx - q.xc : 0); const d = `M${f1(hx)} 10L${f1(-q.w * 0.32)} ${f1(yTop + q.ft * 0.5)}M${f1(hx)} 10L${f1(q.w * 0.32)} ${f1(yTop + q.ft * 0.5)}`; q.fili.setAttribute('d', d); q.fili2.setAttribute('d', d); /* the shadow on the wall follows, softer while it is still low */ q.ombra.setAttribute('opacity', (0.4 * h1 * (sale > 0.001 ? 1 : 0)).toFixed(3)); q.ombra.setAttribute('transform', `translate(0 ${f1(dy)}) rotate(${a.toFixed(2)} ${f1(q.xc)} ${f1(railY)})`); /* the label slides up into place */ q.etichetta.setAttribute('opacity', etichetta.toFixed(3)); q.etichetta.setAttribute('transform', `translate(${f1(q.etX)} ${f1(q.etY + (1 - etichetta) * 10)})`); /* the spot clicks on with a flicker the first time the scroll passes it */ if (luce && !q.acceso) { q.acceso = true; accendi(q); } if (!luce && q.acceso) { q.acceso = false; gsap.killTweensOf(q.flicker); q.flicker.v = 0; } const L = q.flicker.v * LIGHT; q.cono.style.opacity = (L * 0.85).toFixed(3); q.pozza.style.opacity = (L * 0.16).toFixed(3); q.bocca.style.fill = L > 0.05 ? 'var(--luce)' : '#3a414d'; luci += q.flicker.v; /* the dust in the beam */ q.motes.forEach((m) => { const u = (m.u + t * m.s) % 1; const along = 0.25 + u * 0.7; const x0 = lerp(q.lampX, q.xc + q.w * 0.08, along) + m.v * q.w * 1.1 * along + Math.sin(t * 0.9 + m.f) * 4; const y0 = lerp(trackY + 22, q.top + q.h * 1.05, along) + Math.cos(t * 0.7 + m.f) * 3; const vis = L * Math.sin(u * Math.PI) * (REDUCED ? 0 : 0.7); m.e.setAttribute('cx', f1(x0)); m.e.setAttribute('cy', f1(y0)); m.e.style.opacity = vis.toFixed(3); }); }); /* the ladder moves along under the work being hung, then leaves */ const q = quadri[corrente]; const qp = quadri[Math.max(0, corrente - 1)]; const passo = liscio((p - inizi[corrente]) / 0.03); const fianco = Math.min(H * 0.34, floorY - railY - 20) * 0.18 + 8; const lxA = qp.xc + qp.w / 2 + fianco; const lxB = q.xc + q.w / 2 + fianco; const via = liscio((p - 0.76) / 0.06); const lx = lerp(corrente === 0 ? lxB : lxA, lxB, corrente === 0 ? 1 : passo) + via * (W + 200 - lxB); const lean = REDUCED ? 0 : (corrente > 0 && passo > 0 && passo < 1 ? Math.sin(passo * Math.PI) * -4 : 0) + via * (1 - via) * -14; scala.setAttribute('transform', `translate(${f1(lx)} ${f1(floorY + (H - floorY) * 0.3)}) rotate(${f1(lean)})`); /* the room lights go down as the spots come up, then the wall steps back for the title */ buio.style.opacity = (Math.min(1, luci / Math.max(1, quadri.length)) * 0.34 * liscio((p - 0.72) / 0.08) + 0.06 * (luci / Math.max(1, quadri.length))).toFixed(3); const fine = liscio((p - 0.84) / 0.07); const sc = lerp(1, stretto ? 0.66 : 0.62, fine); const tx = (W * (1 - sc)) / 2; const ty = lerp(0, -railY * sc * 0.15, fine); notte.style.opacity = (fine * 0.92).toFixed(3); trasformazione = { tx, ty, sc }; museo.setAttribute('transform', `translate(${f1(tx)} ${f1(ty)}) scale(${sc.toFixed(4)})`); gsap.set(finale, { opacity: liscio((p - 0.88) / 0.06), y: REDUCED ? 0 : (1 - liscio((p - 0.88) / 0.06)) * 24, visibility: p > 0.88 ? 'visible' : 'hidden' }); gsap.set(cenno, { opacity: 1 - liscio(p / 0.04) }); /* on a small stage the rail ends up under the name of the moment: the title already says it, so it steps aside */ gsap.set(statoEl, { opacity: stretto || H < 560 ? 1 - fine : 1 }); aggiornaFase(p); } let faseOra = 0; let faseTl = null; function aggiornaFase(p) { let i = 0; FASI.forEach(([da], j) => { if (p >= da) i = j; }); if (i === faseOra) return; const su = i > faseOra ? 1 : -1; faseOra = i; if (faseTl) faseTl.kill(); faseTl = gsap.timeline() .to([statoNome, statoNota], { opacity: 0, y: REDUCED ? 0 : -10 * su, duration: 0.14, ease: 'power2.in' }) .add(() => { statoNome.textContent = FASI[i][1]; statoNota.textContent = FASI[i][2]; }) .fromTo([statoNome, statoNota], { opacity: 0, y: REDUCED ? 0 : 12 * su }, { opacity: 1, y: 0, duration: 0.42, ease: 'back.out(2.4)', stagger: 0.05 }); } /* ---------------------------------------------------------------- the pointer nudges a hung painting */ let px = null; palco.addEventListener('pointermove', (e) => { if (REDUCED) return; if (e.pointerType !== 'mouse' && e.buttons === 0) { px = null; return; } const r = palco.getBoundingClientRect(); const x = (e.clientX - r.left - trasformazione.tx) / trasformazione.sc; const y = (e.clientY - r.top - trasformazione.ty) / trasformazione.sc; const dx = px === null ? 0 : x - px; px = x; for (const q of quadri) { if (!q.arrivato) continue; if (x > q.xc - q.w / 2 && x < q.xc + q.w / 2 && y > q.top && y < q.top + q.h) { q.vel = clamp(q.vel + dx * 1.4 * SWAY, -90, 90); } } }); palco.addEventListener('pointerleave', () => { px = null; }); /* ---------------------------------------------------------------- start */ costruisci(); if (!REDUCED) { gsap.to(stato, { p: 1, ease: 'none', scrollTrigger: { trigger: giro, start: 'top top', end: 'bottom bottom', scrub: 0.7 }, }); if (typeof Lenis !== 'undefined') { const lenis = new Lenis({ autoRaf: false, lerp: 0.1 }); lenis.on('scroll', ScrollTrigger.update); gsap.ticker.add((t) => lenis.raf(t * 1000)); gsap.ticker.lagSmoothing(0); } gsap.ticker.add((tempo) => { const dt = Math.min(0.05, ultimo ? tempo - ultimo : 0.016); ultimo = tempo; tempoAttuale = tempo; disegna(stato.p, tempo, dt); }); } else { /* less motion: the hanging in still moments, each one fading in */ const FERMI = [0, 0.2, 0.4, 0.6, 0.8, 1]; let ora = 0; let dissolvi = null; const mostra = (i) => { stato.p = FERMI[i]; disegna(stato.p, 0, 0); }; mostra(0); ScrollTrigger.create({ trigger: giro, start: 'top top', end: 'bottom bottom', onUpdate(self) { const i = Math.min(FERMI.length - 1, Math.floor(self.progress * FERMI.length)); if (i === ora) return; ora = i; if (dissolvi) dissolvi.kill(); dissolvi = gsap.timeline() .to(svg, { opacity: 0, duration: 0.2 }) .add(() => mostra(i)) .to(svg, { opacity: 1, duration: 0.35 }); }, }); } disegna(stato.p, 0, 0); /* ---------------------------------------------------------------- resize: the drawing takes the shape of the box */ let larghezzaPrima = innerWidth; let attesa = null; addEventListener('resize', () => { costruisci(); disegna(stato.p, tempoAttuale, 0); if (attesa) attesa.kill(); attesa = gsap.delayedCall(0.15, () => { if (innerWidth !== larghezzaPrima) { larghezzaPrima = innerWidth; ScrollTrigger.refresh(); } }); }); if (document.fonts) document.fonts.ready.then(() => { costruisci(); disegna(stato.p, tempoAttuale, 0); ScrollTrigger.refresh(); }); addEventListener('load', () => ScrollTrigger.refresh());