/* Paint chips The autumn card of a paint maker, one colour at a time, while the stage stays still. The chips rise into a row, tall and narrow. Scrolling, the row slides sideways and the chip that reaches the middle lifts a little, stretches to the full height of the screen and then widens until it fills it, pushing its neighbours away. Its name writes itself in big letters, from narrow to wide with an elastic settle, and a hairline draws itself under it with a note and the colour code. Then the name leaves upwards, the chip folds back into the row with a small bounce, and the page keeps a pale tint of that paint while the next chip slides in. Everything follows the scroll, forwards and backwards. */ /* ---- values to change ---- */ const STRIP = 56; /* how wide a chip is in the row, in pixels (a phone uses two thirds of it) */ const GAP = 12; /* the space between two chips, in pixels */ const NARROW = 62; /* the width of the big letters as they arrive, from 62 (narrow) to 125 (wide) */ const WIDE = 112; /* the width they settle on */ const WEIGHT = 640; /* the weight of the big name */ const TINT = 0.16; /* how much of the paint the page keeps once the chip folds back: 0 none, 0.5 a lot */ const SETTLE = 'back.out(1.8)'; /* the curve of the chip shrinking back to its height (the bounce at the end) */ const SCRUB = 0.7; /* how many seconds the drawing takes to catch up with the scroll */ gsap.registerPlugin(ScrollTrigger); const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const $ = (s, r = document) => r.querySelector(s); const $$ = (s, r = document) => Array.from(r.querySelectorAll(s)); const racconto = $('[data-racconto]'); const palco = $('[data-palco]'); const testa = $('[data-testa]'); const radice = document.documentElement; const colore = (n) => getComputedStyle(radice).getPropertyValue(n).trim(); /* ---------------------------------------------------------------- colours */ function rgb(c) { const s = String(c).trim(); if (s[0] === '#') { const h = s.length === 4 ? Array.from(s.slice(1), (x) => x + x).join('') : s.slice(1, 7); return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) || 0); } const m = s.match(/[\d.]+/g) || [0, 0, 0]; return m.slice(0, 3).map(Number); } const esa = (c) => '#' + rgb(c).map((v) => Math.round(v).toString(16).padStart(2, '0')).join(''); function luce(c) { const [r, g, b] = rgb(c).map((v) => { const s = v / 255; return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.04045) / 1.055, 2.4); }); return 0.2126 * r + 0.7152 * g + 0.0722 * b; } function mescola(a, b, t) { const x = rgb(a); const y = rgb(b); return `rgb(${x.map((v, i) => Math.round(v + (y[i] - v) * t)).join(', ')})`; } /* ---------------------------------------------------------------- the chips */ const campioni = $$('[data-campione]').map((el) => { const nome = $('.campione__nome', el).textContent.trim(); const piccolo = $('.campione__nome', el); const tinta = getComputedStyle(el).backgroundColor; const scuro = luce(tinta) < 0.18; el.style.setProperty('--su-tinta', scuro ? colore('--chiaro') : colore('--inchiostro')); el.setAttribute('aria-label', nome); /* the header again, inside the chip: it shows only where the paint covers the real one */ const copia = testa.cloneNode(true); copia.removeAttribute('data-testa'); copia.setAttribute('aria-hidden', 'true'); el.appendChild(copia); /* the big name, a window per letter */ const grande = document.createElement('p'); grande.className = 'grande'; grande.setAttribute('aria-hidden', 'true'); grande.innerHTML = Array.from(nome, (c) => `${c}`).join(''); el.appendChild(grande); /* the hairline with the note and the code */ const dati = document.createElement('div'); dati.className = 'dati'; dati.innerHTML = '

' + `${el.dataset.nota || ''}` + `${esa(tinta)}

`; el.appendChild(dati); return { el, nome, piccolo, grande, dati, tinta, lettere: $$('.grande__lettera', grande), linea: $('.dati__linea', dati), testi: $$('.dati__testo', dati), /* what the timeline moves: rising into the row, the small lift, the height, the width */ s: { entra: 0, su: 0, alto: 0, largo: 0 }, }; }); /* ---------------------------------------------------------------- measuring */ const riga = { pos: 0 }; let M = null; function misura() { const W = palco.clientWidth; const H = palco.clientHeight; const telefono = W < 640; const w = Math.max(14, Math.round(STRIP * (telefono ? 0.66 : 1))); const gap = Math.max(0, Math.round(GAP * (telefono ? 0.7 : 1))); const h = Math.round(Math.min(H * (telefono ? 0.5 : 0.58), 600)); M = { W, H, w, gap, h, passo: w + gap, cx: W / 2, cy: H * 0.54, raggio: Math.min(4, w / 8), lift: telefono ? 10 : 14 }; /* the big name: as wide as it can be at its final width, within the screen and not too tall */ campioni.forEach((c) => { const st = c.grande.style; st.setProperty('--wd', WIDE); st.setProperty('--peso', WEIGHT); st.setProperty('--corpo', '100px'); const larga = c.grande.getBoundingClientRect().width || 100; const corpo = Math.max(28, Math.min((W * (telefono ? 0.84 : 0.72) * 100) / larga, H * 0.3, W * 0.36)); st.setProperty('--corpo', corpo.toFixed(1) + 'px'); c.dati.style.setProperty('--corpo', corpo.toFixed(1) + 'px'); c.dati.style.setProperty('--largo', Math.max(240, (larga * corpo) / 100) + 'px'); st.setProperty('--wd', c.wd ?? NARROW); c.alto = c.piccolo.offsetHeight; }); disegna(); } /* ---------------------------------------------------------------- drawing the row from its numbers */ const tra = (a, b, t) => a + (b - a) * t; function disegna() { if (!M) return; const { W, H, w, gap, h, passo, cx, cy, raggio, lift } = M; /* the chip that is open (the widest one) decides where the others go: they stay beside it */ let a = Math.max(0, Math.min(campioni.length - 1, Math.round(riga.pos))); let max = 0; campioni.forEach((c, i) => { if (c.s.largo > max) { max = c.s.largo; a = i; } }); const la = campioni[a].s.largo; const ca = tra(cx + (a - riga.pos) * passo, W / 2, la); const wa = tra(w, W, la); const ga = tra(gap, gap * 5, Math.max(0, la)); campioni.forEach((c, i) => { const { entra, su, alto, largo } = c.s; let x; let lw = w; if (i === a) { x = ca; lw = wa; } else if (REDUCED) { /* without movement the others stay where they are, under the paint that fades in */ x = cx + (i - riga.pos) * passo; } else if (i > a) { x = ca + wa / 2 + ga + (i - a - 1) * passo + w / 2; } else { x = ca - wa / 2 - ga - (a - i - 1) * passo - w / 2; } /* the strip in the row: it rises from its foot, lifts a little when it is next */ const piede = cy + h / 2 - su * lift; let su0 = piede - h * entra; let giu0 = piede; /* stretching to the full height (alto may dip under 0 for the bounce: the strip gets a little shorter) */ const top = tra(su0, 0, alto); const bottom = tra(giu0, H, alto); const left = x - lw / 2; const right = x + lw / 2; const r = tra(raggio, 0, Math.min(1, Math.max(alto, largo, 0))); const visto = entra > 0.001 && right > -2 && left < W + 2 && bottom - top > 0.5; c.el.style.visibility = visto ? 'visible' : 'hidden'; c.el.style.zIndex = largo > 0.001 || alto > 0.02 ? 3 : 1; /* the big name and its hairline only exist once the chip is wide: in a strip they would show through */ const pieno = largo > 0.02 ? 'visible' : 'hidden'; c.grande.style.visibility = pieno; c.dati.style.visibility = pieno; if (!visto) return; c.el.style.clipPath = `inset(${top.toFixed(2)}px ${(W - right).toFixed(2)}px ${(H - bottom).toFixed(2)}px ${left.toFixed(2)}px round ${r.toFixed(2)}px)`; /* the small name sits at the foot of the strip, reading upwards; it goes as soon as the chip grows */ const via = Math.max(0, Math.min(1, 1 - Math.max(alto, largo) * 4)); c.piccolo.style.opacity = (via * Math.min(1, entra * 1.4)).toFixed(3); c.piccolo.style.transform = `translate(${(x - (c.alto || 11) / 2).toFixed(2)}px, ${(bottom - 14).toFixed(2)}px) rotate(-90deg)`; }); } /* the big name moves its width through a CSS variable; the timeline tweens a number and writes it */ function larghezza(c) { return { get wd() { return c.wd ?? NARROW; }, set wd(v) { c.wd = v; c.grande.style.setProperty('--wd', v.toFixed(2)); }, }; } /* ---------------------------------------------------------------- the story */ if (document.fonts) document.fonts.ready.then(() => ScrollTrigger.refresh()); ScrollTrigger.addEventListener('refresh', misura); misura(); const carta = colore('--carta'); const tintaDi = (c) => mescola(carta, c.tinta, Math.max(0, Math.min(1, TINT))); if (REDUCED) { /* no movement: the row is already in place, every chip opens and closes with a cross-fade, its name already written; the page takes the pale tint the same way */ campioni.forEach((c) => { c.s.entra = 1; c.wd = WIDE; c.grande.style.setProperty('--wd', WIDE); }); riga.pos = (campioni.length - 1) / 2; disegna(); const tl = gsap.timeline({ defaults: { ease: 'none' }, scrollTrigger: { trigger: racconto, start: 'top top', end: 'bottom bottom', scrub: true }, onUpdate: disegna, }); let t = 0.6; campioni.forEach((c) => { tl.fromTo(c.el, { opacity: 1 }, { opacity: 0, duration: 0.3 }, t); tl.fromTo(c.s, { alto: 0, largo: 0 }, { alto: 1, largo: 1, duration: 0.01 }, t + 0.3); tl.fromTo(c.el, { opacity: 0 }, { opacity: 1, immediateRender: false, duration: 0.5 }, t + 0.32); tl.to(palco, { backgroundColor: tintaDi(c), duration: 0.01 }, t + 0.85); t += 2; tl.fromTo(c.el, { opacity: 1 }, { opacity: 0, immediateRender: false, duration: 0.5 }, t); tl.fromTo(c.s, { alto: 1, largo: 1 }, { alto: 0, largo: 0, immediateRender: false, duration: 0.01 }, t + 0.5); tl.fromTo(c.el, { opacity: 0 }, { opacity: 1, immediateRender: false, duration: 0.3 }, t + 0.52); t += 1; }); tl.to({}, { duration: 0.6 }, t); } else { gsap.set(palco, { backgroundColor: carta }); campioni.forEach((c) => { gsap.set(c.lettere, { yPercent: 120 }); gsap.set(c.linea, { scaleX: 0, transformOrigin: '0% 50%' }); gsap.set(c.testi, { yPercent: 130 }); }); /* the chips rise into the row while the stage comes up, one after the other */ gsap.timeline({ defaults: { ease: 'none' }, scrollTrigger: { trigger: racconto, start: 'top 85%', end: 'top 5%', scrub: SCRUB }, onUpdate: disegna, }).fromTo(campioni.map((c) => c.s), { entra: 0 }, { entra: 1, duration: 1, ease: 'back.out(1.5)', stagger: 0.12 }, 0); const tl = gsap.timeline({ defaults: { ease: 'none' }, scrollTrigger: { trigger: racconto, start: 'top top', end: 'bottom bottom', scrub: SCRUB }, onUpdate: disegna, }); let t = 0.4; campioni.forEach((c, i) => { const ultimo = i === campioni.length - 1; const wd = larghezza(c); /* the row slides until this chip is in the middle; the chip lifts a little as it arrives */ if (i > 0) { tl.fromTo(riga, { pos: i - 1 }, { pos: i, immediateRender: false, duration: 1.3, ease: 'power3.inOut' }, t); t += 0.8; } tl.fromTo(c.s, { su: 0 }, { su: 1, duration: 0.7, ease: 'back.out(2.6)' }, t); t += 0.55; /* it stretches to the full height, then widens until it fills the screen */ tl.fromTo(c.s, { alto: 0 }, { alto: 1, duration: 0.8, ease: 'power3.inOut' }, t); tl.fromTo(c.s, { largo: 0 }, { largo: 1, duration: 1.3, ease: 'expo.inOut' }, t + 0.45); t += 1.5; /* the page takes the pale tint while the paint covers it */ tl.fromTo(palco, { backgroundColor: i ? tintaDi(campioni[i - 1]) : carta }, { backgroundColor: tintaDi(c), immediateRender: false, duration: 0.2 }, t - 0.2); /* the name writes itself: the letters rise into their windows, the word goes from narrow to wide */ tl.fromTo(c.lettere, { yPercent: 120 }, { yPercent: 0, duration: 0.9, ease: 'power3.out', stagger: 0.06 }, t); tl.fromTo(wd, { wd: NARROW }, { wd: WIDE, duration: 1.6, ease: 'elastic.out(1, 0.55)' }, t + 0.15); tl.fromTo(c.linea, { scaleX: 0 }, { scaleX: 1, duration: 1, ease: 'expo.out' }, t + 0.5); tl.fromTo(c.testi, { yPercent: 130 }, { yPercent: 0, duration: 0.8, ease: 'power3.out', stagger: 0.12 }, t + 0.7); t += 1.8; /* a pause to read it */ t += 1.1; if (!ultimo) { /* the name leaves upwards and narrows, the hairline runs out to the right */ tl.fromTo(c.lettere, { yPercent: 0 }, { yPercent: -120, immediateRender: false, duration: 0.6, ease: 'power2.in', stagger: 0.035 }, t); tl.fromTo(wd, { wd: WIDE }, { wd: NARROW, immediateRender: false, duration: 0.8, ease: 'power2.in' }, t); tl.fromTo(c.testi, { yPercent: 0 }, { yPercent: -130, immediateRender: false, duration: 0.5, ease: 'power2.in', stagger: 0.06 }, t); tl.set(c.linea, { transformOrigin: '100% 50%' }, t); tl.fromTo(c.linea, { scaleX: 1 }, { scaleX: 0, immediateRender: false, duration: 0.6, ease: 'power3.in' }, t + 0.05); t += 0.6; /* the chip folds back into the row: first the width, then the height, with a small bounce */ tl.fromTo(c.s, { largo: 1 }, { largo: 0, immediateRender: false, duration: 1.2, ease: 'expo.inOut' }, t); tl.fromTo(c.s, { alto: 1 }, { alto: 0, immediateRender: false, duration: 1, ease: SETTLE }, t + 0.85); tl.fromTo(c.s, { su: 1 }, { su: 0, immediateRender: false, duration: 0.8, ease: 'back.out(2)' }, t + 1.2); t += 1.5; } }); /* the last colour stays a little longer before the page moves on */ tl.to({}, { duration: 1.4 }, t); }