/* The tip button Every press throws a coin from the button into the glass jar. The coin leaves the button's own coin, flies in an arc turning over and over, drops through the mouth of the jar and lands on the pile with a little bounce, the jar rocks under it and the total goes up. Pressed many times, many coins fly at once. */ /* ---- values to change ---- */ const TOSS = 110; /* how high the coin flies over the jar's mouth, in pixels */ const SPINS = 2; /* how many times the coin turns over in the air */ const FLIGHT = 0.7; /* the seconds from the button to the jar's mouth */ const START = 6; /* the coins already in the jar */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const root = document.querySelector('[data-tip]'); const art = root.querySelector('[data-art]'); const jarBox = root.querySelector('.tip__jar'); const btn = root.querySelector('[data-btn]'); const coinIcon = root.querySelector('[data-coin]'); const totalEl = root.querySelector('[data-total]'); const live = root.querySelector('[data-live]'); const NS = 'http://www.w3.org/2000/svg'; const MAX = 26; /* the coins the jar shows; past that they settle into the pile out of sight */ const GRAVITY = 2600; /* the pull on a coin falling inside the jar, in pixels a second each second */ let coins = 0; /* the coins on the pile */ let total = START; /* the dollars counted */ let jx = 0; /* the jar's place in the drawing */ let jy = 0; let rollTl = null; const slots = []; art.innerHTML = ``; const back = art.querySelector('[data-back]'); const pile = art.querySelector('[data-pile]'); const front = art.querySelector('[data-front]'); const air = art.querySelector('[data-air]'); const el = (name, attrs, parent) => { const e = document.createElementNS(NS, name); Object.entries(attrs).forEach(([k, val]) => e.setAttribute(k, val)); if (parent) parent.appendChild(e); return e; }; /* ---------------------------------------------------------------- the jar */ function build() { const W = root.offsetWidth; const H = root.offsetHeight; art.setAttribute('viewBox', `-60 -60 ${W + 120} ${H + 120}`); jx = jarBox.offsetLeft; jy = jarBox.offsetTop; const body = `M${jx + 30} ${jy + 14}C${jx + 30} ${jy + 34} ${jx + 8} ${jy + 34} ${jx + 8} ${jy + 58}L${jx + 8} ${jy + 170}Q${jx + 8} ${jy + 194} ${jx + 32} ${jy + 194}L${jx + 136} ${jy + 194}Q${jx + 160} ${jy + 194} ${jx + 160} ${jy + 170}L${jx + 160} ${jy + 58}C${jx + 160} ${jy + 34} ${jx + 138} ${jy + 34} ${jx + 138} ${jy + 14}`; /* the glass behind the coins, then the coins, then the front of the glass with its rim, its gleam and its label */ back.innerHTML = ``; front.innerHTML = ` TIPS`; /* the places on the pile, layer by layer: four coins, then three in the gaps, then four again */ slots.length = 0; const bottom = jy + 186; for (let layer = 0; slots.length < MAX; layer++) { const row = layer % 2 ? [-32, 0, 32] : [-48, -16, 16, 48]; row.forEach((dx, k) => { if (slots.length < MAX) slots.push([jx + 84 + dx + ((layer * 7 + k * 5) % 9) - 4, bottom - layer * 6]); }); } /* the pile again, for the coins already in */ pile.innerHTML = ''; for (let k = 0; k < coins; k++) pileCoin(k); } /* a coin lying on the pile, seen from the side: its edge, then its face. Its place is on the outer group; GSAP moves only the inner one (moving the outer one, it would take the place over) */ function pileCoin(k, at) { const [x, y] = at || slots[Math.min(k, MAX - 1)]; const g = el('g', { transform: `translate(${x.toFixed(1)} ${y.toFixed(1)})` }, pile); const inner = el('g', {}, g); el('path', { class: 'tip__edge', d: 'M-16 0V4A16 5.5 0 0 0 16 4V0Z' }, inner); el('ellipse', { class: 'tip__face', rx: 16, ry: 5.5 }, inner); return inner; } /* a coin in the air, seen from the front: its face and its ring */ function airCoin() { const g = el('g', {}, air); el('circle', { class: 'tip__face', r: 13 }, g); el('circle', { r: 8.5, fill: 'none', stroke: 'var(--gold-dark)', 'stroke-width': 1.4, opacity: 0.7 }, g); return g; } /* ---------------------------------------------------------------- the total */ function roll(text) { if (rollTl) rollTl.kill(); if (REDUCED) { totalEl.textContent = text; return; } rollTl = gsap.timeline() .to(totalEl, { yPercent: -100, duration: 0.14, ease: 'power2.in' }) .add(() => (totalEl.textContent = text)) .fromTo(totalEl, { yPercent: 100 }, { yPercent: 0, duration: 0.32, ease: 'back.out(2)' }); } function landed() { total += 1; roll(`$${total}`); live.textContent = `$${total} tipped`; } /* ---------------------------------------------------------------- a tip */ function tip() { const k = coins++; const [sx2, sy2] = slots[Math.min(k, MAX - 1)]; const r = root.getBoundingClientRect(); const c = coinIcon.getBoundingClientRect(); const sx = c.left + c.width / 2 - r.left; const sy = c.top + c.height / 2 - r.top; if (!REDUCED) { gsap.fromTo(coinIcon, { scale: 0.7 }, { scale: 1, duration: 0.5, ease: 'elastic.out(1, 0.4)' }); gsap.fromTo(btn, { scale: 0.95 }, { scale: 1, duration: 0.45, ease: 'elastic.out(1, 0.45)' }); } if (REDUCED) { const g = pileCoin(k); gsap.from(g, { opacity: 0, duration: 0.2 }); if (k >= MAX) g.parentNode.remove(); landed(); return; } /* the arc: from the button's coin up over the jar and into its mouth, above the place it will land on */ const mx = sx2; const my = jy + 6; const cx = (sx + mx) / 2; const cy = Math.min(sy, my) - TOSS; const coin = airCoin(); const turn = (Math.random() < 0.5 ? -1 : 1) * (8 + Math.random() * 10); const fly = { t: 0 }; const place = (x, y, t) => { /* turning over end over end: the face is a circle seen more and more edge-on, and back */ const flip = Math.max(0.1, Math.abs(Math.cos(t * SPINS * Math.PI))); coin.setAttribute('transform', `translate(${x.toFixed(1)} ${y.toFixed(1)}) rotate(${(turn * t).toFixed(1)}) scale(1 ${flip.toFixed(3)})`); }; gsap.timeline() .to(fly, { t: 1, duration: FLIGHT, ease: 'none', onUpdate: () => { const t = fly.t; const u = 1 - t; place(u * u * sx + 2 * u * t * cx + t * t * mx, u * u * sy + 2 * u * t * cy + t * t * my, t); }, }) .add(() => { /* in through the mouth: from here on it is inside the jar, behind the glass */ pile.appendChild(coin); plus(jx + 152, jy + 30); }) .to(fly, { t: 1.6, duration: Math.sqrt((2 * Math.max(10, sy2 - my)) / GRAVITY), ease: 'power2.in', onUpdate: () => { const f = (fly.t - 1) / 0.6; place(mx, my + (sy2 - my) * f, 1 + f * 0.25); }, }) .add(() => { coin.remove(); const g = pileCoin(k); gsap.fromTo(g, { y: -5 }, { y: 0, duration: 0.3, ease: 'bounce.out' }); /* past the jar's room the coin sinks into the pile */ if (k >= MAX) gsap.to(g, { opacity: 0, duration: 0.3, delay: 0.25, onComplete: () => g.parentNode.remove() }); gsap.fromTo(jarGroups(), { rotation: 1.6, svgOrigin: `${jx + 84} ${jy + 194}` }, { rotation: 0, duration: 0.6, ease: 'elastic.out(1, 0.3)' }); landed(); }); } const jarGroups = () => [back, pile, front]; /* a little +$1 rises beside the jar's mouth */ function plus(x, y) { const t = el('text', { class: 'tip__plus', x: x.toFixed(1), y: (y - 6).toFixed(1), 'text-anchor': 'middle' }, air); t.textContent = '+$1'; gsap.fromTo(t, { y: 0, opacity: 1 }, { y: -22, opacity: 0, duration: 0.9, ease: 'power2.out', onComplete: () => t.remove() }); } /* ---------------------------------------------------------------- hands and keys */ btn.addEventListener('click', tip); /* how the page is being used: the ring of the focus shows for the keys, not after a finger or the mouse */ addEventListener('keydown', () => (document.documentElement.dataset.using = 'keys'), true); addEventListener('pointerdown', () => (document.documentElement.dataset.using = 'pointer'), true); addEventListener('resize', build); /* ---------------------------------------------------------------- the library's preview */ /* a click from a script (detail 0) tips twice, one coin just after the other */ root.addEventListener('click', (e) => { if (e.detail !== 0 || e.target !== root) return; tip(); gsap.delayedCall(0.32, tip); }); /* ---------------------------------------------------------------- it comes in */ coins = START; totalEl.textContent = `$${total}`; build(); document.fonts.ready.then(() => { build(); if (REDUCED) return; gsap.from(btn, { y: 16, opacity: 0, duration: 0.7, delay: 0.15, ease: 'power3.out', clearProps: 'transform,opacity' }); gsap.from([...pile.children].map((g) => g.firstChild), { y: -40, opacity: 0, duration: 0.6, stagger: 0.05, ease: 'bounce.out' }); });