/* The type scale The specimen of a made-up type foundry, Norrow, while the stage stays still. Scrolling, one word climbs the classical scale of type sizes, from 6 to 144 points: it waits on each size, then clicks to the next one with a small overshoot and settles. Its optical size follows the size, so the letters are drawn again at every step: wide, open and loose when small, tight and fine when large. Three guides (baseline, x-height, cap height) ride with it; a ruler on the left has one mark per size, set at that size's cap height, and the vermilion measure on the right of the word counts the points. At 144 the word lands with a small squash. Everything follows the scroll, forwards and backwards. */ /* ---- values to change ---- */ const WORD = 'Margin'; /* the word being set */ const SIZES = [6, 8, 9, 10, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96, 120, 144]; /* the scale, in points, smallest first */ const WEIGHT = 400; /* the weight of the word (100 to 1000) */ const OPTICAL = true; /* the optical size follows the size (false: always drawn for 14 points) */ const SNAP = 'back.out(1.4)'; /* the curve of every click (the number in brackets is how far it overshoots) */ const HOLD = 0.45; /* the part of every step the size waits before it clicks, from 0 to 0.9 */ const SCRUB = 0.6; /* 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 NS = 'http://www.w3.org/2000/svg'; const racconto = $('[data-racconto]'); const palco = $('[data-palco]'); const tavola = $('[data-tavola]'); const dida = $$('[data-dida]'); const clamp = (v, a = 0, b = 1) => (v < a ? a : v > b ? b : v); const tratto = (u, a, b) => clamp((u - a) / (b - a)); /* ---------------------------------------------------------------- the data */ const SCALA = (Array.isArray(SIZES) ? SIZES : []).map(Number).filter((v) => v > 0).sort((a, b) => a - b); if (SCALA.length < 2) SCALA.splice(0, SCALA.length, 12, 144); const N = SCALA.length; const PAROLA = String(WORD || 'Margin').trim() || 'Margin'; const PESO = clamp(Number(WEIGHT) || 400, 100, 1000); const ATTESA = clamp(Number(HOLD) || 0, 0, 0.9); const scatto = gsap.parseEase(SNAP) || gsap.parseEase('back.out(1.4)'); /* Roboto Flex: the cap height as a part of the size, and the x-height, which is taller in the small optical sizes (measured on the font, optical size: x-height) */ const ALTA = 0.708; const OCCHI = [[8, 0.53], [12, 0.517], [24, 0.497], [48, 0.47], [96, 0.448], [144, 0.445]]; const opsz = (pt) => (OPTICAL ? clamp(pt, 8, 144) : 14); function bassa(pt) { const o = opsz(pt); for (let j = 1; j < OCCHI.length; j++) { const [o1, v1] = OCCHI[j]; const [o0, v0] = OCCHI[j - 1]; if (o <= o1) return v0 + ((v1 - v0) * (o - o0)) / (o1 - o0); } return OCCHI[OCCHI.length - 1][1]; } const assi = (pt) => `'wght' ${PESO}, 'opsz' ${opsz(pt).toFixed(1)}`; $('[data-nome]').textContent = `${PAROLA}, from ${SCALA[0]} to ${SCALA[N - 1]} points`; /* ---------------------------------------------------------------- the drawing */ const crea = (tag, cls, padre = tavola) => { const e = document.createElementNS(NS, tag); if (cls) e.setAttribute('class', cls); padre.appendChild(e); return e; }; const linea = (e, x1, y1, x2, y2) => { e.setAttribute('x1', x1.toFixed(2)); e.setAttribute('y1', y1.toFixed(2)); e.setAttribute('x2', x2.toFixed(2)); e.setAttribute('y2', y2.toFixed(2)); }; const guide = ['base', 'bassa', 'alta'].map((k) => ({ riga: crea('line', 'guida' + (k === 'base' ? ' guida--base' : '')), nome: crea('text', 'etichetta'), })); guide[0].nome.textContent = 'baseline'; guide[1].nome.textContent = 'x-height'; guide[2].nome.textContent = 'cap height'; guide.forEach((g) => g.nome.setAttribute('text-anchor', 'end')); const righello = crea('line', 'righello'); const tacche = SCALA.map((pt) => { const t = crea('line', 'tacca'); const n = crea('text', 'etichetta'); n.setAttribute('text-anchor', 'end'); n.textContent = pt; return { pt, t, n, y: 0, scritta: false }; }); const parola = crea('text', 'parola'); parola.textContent = PAROLA; const misura = crea('path', 'misura'); const lettura = crea('text', 'lettura'); const segno = crea('line', 'misura'); /* a hidden copy of the word, to measure it at any size and optical size */ const metro = crea('text', 'parola'); metro.textContent = PAROLA; metro.setAttribute('visibility', 'hidden'); let W = 0; let H = 0; let g = 16; let xR = 0; let xP = 0; let yB = 0; let k = 1; let telefono = false; function larghezza(pt, px) { metro.style.fontVariationSettings = assi(pt); metro.setAttribute('font-size', px); return metro.getComputedTextLength(); } function misuraTutto() { const r = palco.getBoundingClientRect(); W = r.width; H = r.height; tavola.setAttribute('viewBox', `0 0 ${W} ${H}`); telefono = W < 640; g = telefono ? 16 : clamp(W * 0.05, 16, 72); xR = g + (telefono ? 24 : 34); xP = xR + (telefono ? 14 : 40); yB = Math.round(H * (telefono ? 0.56 : 0.64)) + 0.5; /* how many pixels a point is: the word at 144 must fit beside the ruler with room for the measure, and its cap height must stay under the header */ const largo = larghezza(SCALA[N - 1], 100) / 100; const spazio = W - xP - g - (telefono ? 22 : 200); k = Math.max(0.2, Math.min(spazio / (largo * SCALA[N - 1]), (yB - (telefono ? 120 : 130)) / (ALTA * SCALA[N - 1]))); /* the ruler and its marks, each at the cap height of its size; a label only where there is room */ linea(righello, xR, yB, xR, yB - ALTA * SCALA[N - 1] * k - 10); let ultima = -Infinity; for (let i = N - 1; i >= 0; i--) { const tk = tacche[i]; tk.y = yB - ALTA * tk.pt * k; tk.scritta = tk.y - ultima >= 15 && yB - tk.y >= 12; if (tk.scritta) ultima = tk.y; tk.n.setAttribute('x', (xR - 9).toFixed(1)); tk.n.setAttribute('y', (tk.y + 3.5).toFixed(1)); } let giu = Infinity; tacche.forEach((tk, i) => { tk.fitta = i > 0 && i < N - 1 && giu - tk.y < 3; if (!tk.fitta) giu = tk.y; }); sporco = true; } /* ---------------------------------------------------------------- one frame */ /* s goes from 0 to N - 1: the whole part is the size reached, the rest how far into the next step */ const stato = { s: 0, colpo: 0 }; let sporco = true; const segna = () => { sporco = true; }; function disegna() { sporco = false; if (!W) return; const s = clamp(stato.s, 0, N - 1); const i = Math.min(N - 2, Math.floor(s)); const u = s - i; const da = SCALA[i]; const a = SCALA[i + 1]; const loc = tratto(u, ATTESA, 1); /* the size: still while it waits, then the click with its overshoot. With reduced motion it changes at once, and the drawing dips to hide the cut */ let pt; let velo = 1; if (REDUCED) { pt = loc < 0.5 ? da : a; velo = loc > 0 && loc < 1 ? Math.abs(2 * loc - 1) : 1; } else { pt = da + (a - da) * scatto(loc); } const px = pt * k; /* the landing at the top of the scale: a small squash from the baseline */ const c = REDUCED ? 0 : stato.colpo; parola.setAttribute('transform', c ? `translate(${xP} ${yB}) scale(${1 + 0.012 * c} ${1 - 0.035 * c}) translate(${-xP} ${-yB})` : ''); parola.style.fontVariationSettings = assi(pt); parola.setAttribute('font-size', px.toFixed(2)); parola.setAttribute('x', xP); parola.setAttribute('y', yB); parola.style.opacity = velo; const fine = xP + parola.getComputedTextLength(); /* the guides, from the ruler to the right margin; the labels of the two moving ones give way when they crowd */ const yA = yB - ALTA * px; const yX = yB - bassa(pt) * px; const destra = W - g; /* (and they give way to the measure when the word reaches them, on a phone) */ const xm = fine + (telefono ? 12 : 22); const libero = telefono ? clamp((destra - 62 - (xm + 6)) / 16) : clamp((destra - 62 - (xm + 46)) / 16); [[yB, libero], [yX, clamp((yB - yX - 12) / 8) * clamp((yX - yA - 18) / 8) * libero], [yA, clamp((yA < yX ? yX - yA - 12 : 0) / 8) * libero]].forEach(([y, vis], j) => { const gd = guide[j]; const yy = Math.round(y) + 0.5; linea(gd.riga, xR, yy, destra, yy); gd.riga.style.opacity = j ? velo : 1; gd.nome.setAttribute('x', destra.toFixed(1)); gd.nome.setAttribute('y', (yy - 6).toFixed(1)); gd.nome.style.opacity = (vis * (j ? velo : 1)).toFixed(3); }); /* the marks: the ones already passed go grey; the one just reached kicks out and back as the word lands on it */ tacche.forEach((tk, j) => { let lungo = telefono ? 6 : 8; if (!REDUCED && j === i + 1 && loc > 0) lungo += 7 * Math.sin(Math.PI * Math.min(1, loc * 1.25)); linea(tk.t, xR, Math.round(tk.y) + 0.5, xR + lungo, Math.round(tk.y) + 0.5); /* marks closer than three pixels to the one below are left out (the small sizes, on a phone) */ tk.t.style.display = tk.fitta ? 'none' : ''; const passata = tk.pt < pt - 0.01; tk.t.classList.toggle('tacca--fatta', passata); tk.n.style.opacity = tk.scritta ? (passata ? 0.55 : 1) : 0; }); /* the measure: a vertical hairline from the baseline to the cap height, with a tick at each end, beside the word; the vermilion mark on the ruler stands at the same height */ misura.setAttribute('d', `M${xm - 4} ${yB}H${xm + 4}M${xm} ${yB}V${yA.toFixed(2)}M${xm - 4} ${yA.toFixed(2)}H${xm + 4}`); misura.style.opacity = velo; linea(segno, xR - 4, Math.round(yA) + 0.5, xR + 14, Math.round(yA) + 0.5); segno.style.opacity = velo; /* the points, counted between the two sizes (never past them) */ const letto = Math.round(clamp(pt, Math.min(da, a), Math.max(da, a))); const testo = `${letto} pt`; if (lettura.textContent !== testo) lettura.textContent = testo; lettura.style.fontVariationSettings = `'wght' ${letto === SCALA[N - 1] ? 640 : 480}, 'opsz' 13`; /* beside the top of the measure; on a phone above it, where there is room */ lettura.setAttribute('text-anchor', telefono ? 'end' : 'start'); lettura.setAttribute('x', (telefono ? xm + 5 : xm + 8).toFixed(1)); lettura.setAttribute('y', (telefono ? yA - 9 : Math.min(yB - 4, yA + 10)).toFixed(1)); lettura.style.opacity = velo; } gsap.ticker.add(() => { if (sporco) disegna(); }); /* ---------------------------------------------------------------- the story */ ScrollTrigger.addEventListener('refresh', misuraTutto); misuraTutto(); if (document.fonts && document.fonts.load) { document.fonts.load(`${PESO} 100px "Roboto Flex Variable"`, PAROLA).then(() => ScrollTrigger.refresh()).catch(() => {}); } addEventListener('resize', segna); const tl = gsap.timeline({ defaults: { ease: 'none' }, scrollTrigger: { trigger: racconto, start: 'top top', end: 'bottom bottom', scrub: REDUCED ? true : SCRUB }, }); /* one caption leaves, the next one comes in */ function cambia(da, a, t) { if (REDUCED) { tl.fromTo(dida[da], { autoAlpha: 1 }, { autoAlpha: 0, immediateRender: false, duration: 0.3 }, t); tl.fromTo(dida[a], { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.4 }, t + 0.25); return; } tl.fromTo(dida[da], { yPercent: 0, '--wd': 100 }, { yPercent: -135, '--wd': 125, immediateRender: false, duration: 0.5, ease: 'power2.in' }, t); tl.fromTo(dida[a], { yPercent: 135, '--wd': 75 }, { yPercent: 0, '--wd': 100, duration: 0.9, ease: 'power3.out' }, t + 0.3); } if (REDUCED) gsap.set(dida.slice(1), { autoAlpha: 0 }); else gsap.set(dida.slice(1), { yPercent: 135, '--wd': 75 }); const T0 = 0.6; tl.fromTo(stato, { s: 0 }, { s: N - 1, duration: N - 1, onUpdate: segna }, T0); /* the captions change where the sizes change family: text from 10 points, headings from 18, display from 48 */ const soglie = [10, 18, 48].map((pt) => SCALA.findIndex((v) => v >= pt)); let prima = 0; soglie.forEach((idx, j) => { if (idx <= 0 || j + 1 >= dida.length) return; cambia(prima, j + 1, T0 + idx - 1 + ATTESA); prima = j + 1; }); /* the word lands at the top of the scale: a small squash and an elastic return */ const T1 = T0 + N - 1; if (!REDUCED) { tl.fromTo(stato, { colpo: 0 }, { colpo: 1, duration: 0.25, ease: 'power2.in', onUpdate: segna }, T1 - 0.22); tl.fromTo(stato, { colpo: 1 }, { colpo: 0, immediateRender: false, duration: 1.4, ease: 'elastic.out(1, 0.32)', onUpdate: segna }, T1 + 0.03); } tl.to({}, { duration: 1 }, T1 + 1.5);