/* The swipe deck A deck of plans for the weekend. The top card follows the hand and turns around the point it is held by (held by the top it leans the way it goes, held by the bottom the other way), and a stamp says what letting go would do. Let go far enough, or with enough speed, and the card flies on with the speed it had, spinning and dropping a little; otherwise it springs back. The cards underneath come up as the top one leaves, the buttons fill with their colour as a card is dragged their way, and Undo brings the last card back from where it went. */ /* ---- values to change ---- */ const THROW = 110; /* how far, in pixels, a card must be dragged for letting go to throw it */ const FLICK = 650; /* how fast, in pixels a second, a shorter drag must go to throw the card all the same */ const TILT = 0.07; /* how many degrees a card turns for every pixel it is dragged sideways */ const SPRING = [260, 0.62]; /* the spring that brings a card back: how stiff it is and how much it is held back */ const DEPTH = [0.05, 16]; /* how much smaller, and how many pixels lower, each card down the deck sits */ const PLANS = [ ['Sunrise hike', 'Outdoors', 'Sat 6:10 am · 2 h', 'sun'], ['Pottery class', 'Workshop', 'Sat 11 am · €35', 'vase'], ['Night market', 'Food', 'Sat 7 pm · free', 'bowl'], ['Jazz in the park', 'Music', 'Sun 5 pm · free', 'record'], ['Lake swim', 'Outdoors', 'Sun 9 am · 1 h', 'waves'], ['Old town walk', 'Culture', 'Sun 3 pm · €12', 'arches'], ]; /* the plans: name, kind, when, and the drawing */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const plans = document.querySelector('[data-plans]'); const deckEl = plans.querySelector('[data-deck]'); const doneEl = plans.querySelector('[data-done]'); const keptEl = plans.querySelector('[data-kept]'); const listEl = plans.querySelector('[data-list]'); const againBtn = plans.querySelector('[data-again]'); const countEl = plans.querySelector('[data-count]'); const live = plans.querySelector('[data-live]'); const skipBtn = plans.querySelector('[data-skip]'); const keepBtn = plans.querySelector('[data-keep]'); const undoBtn = plans.querySelector('[data-undo]'); /* the drawings, each with its card's colours */ const ART = { sun: ['#ffdcc6', '#3d1608', ''], vase: ['#f0dfd1', '#3b2014', ''], bowl: ['#222a5c', '#ffffff', ''], record: ['#d0eacf', '#14321b', ''], waves: ['#c8ecf2', '#0c3640', ''], arches: ['#e4dbfd', '#271a63', ''], }; /* ---------------------------------------------------------------- the cards */ const cards = PLANS.map(([title, tag, meta, art], i) => { const [bg, ink, svg] = ART[art] || ART.sun; const el = document.createElement('article'); el.className = 'card'; el.style.setProperty('--bg', bg); el.style.setProperty('--ink-card', ink); el.setAttribute('aria-roledescription', 'card'); el.setAttribute('aria-describedby', 'plans-hint'); el.innerHTML = `

`; el.querySelector('.card__tag').textContent = tag; el.querySelector('.card__title').textContent = title; el.querySelector('.card__meta').textContent = meta; el.setAttribute('aria-label', `${title}, ${tag}, ${meta}`); deckEl.append(el); const keep = el.querySelector('.card__stamp--keep'); const skip = el.querySelector('.card__stamp--skip'); /* the stamps' tilt is given to GSAP, which also scales them: a transform in the CSS would be lost */ gsap.set(keep, { rotation: -12 }); gsap.set(skip, { rotation: 12 }); return { el, i, title, art, bg, ink, x: 0, y: 0, r: 0, vx: 0, vy: 0, vr: 0, d: i, dv: 0, grab: 1, mode: 'rest', ambient: null, setX: gsap.quickSetter(el, 'x', 'px'), setY: gsap.quickSetter(el, 'y', 'px'), setR: gsap.quickSetter(el, 'rotation', 'deg'), setSX: gsap.quickSetter(el, 'scaleX'), setSY: gsap.quickSetter(el, 'scaleY'), setO: gsap.quickSetter(el, 'opacity'), keepO: gsap.quickSetter(keep, 'opacity'), skipO: gsap.quickSetter(skip, 'opacity'), keepSX: gsap.quickSetter(keep, 'scaleX'), keepSY: gsap.quickSetter(keep, 'scaleY'), skipSX: gsap.quickSetter(skip, 'scaleX'), skipSY: gsap.quickSetter(skip, 'scaleY'), }; }); let deck = [...cards]; /* the cards still to choose, the top one first */ let thrown = []; /* the cards gone, the last one last, each with where it went */ let kept = []; /* ---------------------------------------------------------------- the drawings' own small motion */ function ambient(c, on) { if (c.ambient) { c.ambient.kill(); c.ambient = null; } if (!on || REDUCED) return; const q = (s) => c.el.querySelectorAll(s); const tl = gsap.timeline(); if (c.art === 'sun') tl.fromTo(q('.a-sun'), { y: 18 }, { y: -4, duration: 2.6, ease: 'sine.inOut', repeat: -1, yoyo: true }); if (c.art === 'vase') tl.fromTo(q('.a-shine'), { x: 0 }, { x: 110, duration: 1.6, ease: 'sine.inOut', repeat: -1, yoyo: true }); if (c.art === 'bowl') tl.to(q('.a-steam'), { keyframes: { '0%': { y: 10, opacity: 0 }, '40%': { opacity: 1 }, '100%': { y: -14, opacity: 0 } }, duration: 2.1, ease: 'none', stagger: { each: 0.6, repeat: -1 } }); if (c.art === 'record') tl.to(q('.a-record'), { rotation: 360, svgOrigin: '160 104', duration: 4.5, ease: 'none', repeat: -1 }); if (c.art === 'waves') q('.a-wave').forEach((w, k) => tl.fromTo(w, { x: 0 }, { x: -80, duration: 2.8 - k * 0.5, ease: 'none', repeat: -1 }, 0)); if (c.art === 'arches') { q('.a-arch').forEach((a) => gsap.set(a, { strokeDasharray: a.getTotalLength(), strokeDashoffset: a.getTotalLength() })); tl.to(q('.a-arch'), { strokeDashoffset: 0, duration: 0.9, ease: 'power2.inOut', stagger: 0.09 }); } c.ambient = tl; } /* ---------------------------------------------------------------- the physics */ const topCard = () => deck[0] || null; const progress = () => { const c = topCard(); return c && (c.mode === 'drag' || (c.mode === 'back' && c.fromDrag)) ? Math.min(1, Math.hypot(c.x, c.y) / THROW) : 0; }; function step(dt) { const p = progress(); /* where each card sits in the deck: one step down for every card on top of it (the ones still to be dealt do not count), and the ones under the top come up as it is dragged away */ let above = 0; deck.forEach((c, k) => { const target = k === 0 ? 0 : above - p; if (c.mode !== 'wait') above++; if (REDUCED) { c.d = target; c.dv = 0; return; } c.dv += (-340 * (c.d - target) - 2 * 0.82 * Math.sqrt(340) * c.dv) * dt; c.d += c.dv * dt; }); cards.forEach((c) => { if (c.mode === 'back') { /* a card let go springs back as set; one coming back by itself (dealt, or brought back) lands softer */ const k = SPRING[0]; const damp = 2 * (c.fromDrag ? SPRING[1] : Math.max(SPRING[1], 0.78)) * Math.sqrt(k); c.vx += (-k * c.x - damp * c.vx) * dt; c.vy += (-k * c.y - damp * c.vy) * dt; c.vr += (-k * c.r - damp * c.vr) * dt; c.x += c.vx * dt; c.y += c.vy * dt; c.r += c.vr * dt; } else if (c.mode === 'fly') { c.vy += 1400 * dt; c.x += c.vx * dt; c.y += c.vy * dt; c.r += c.vr * dt; } }); } function render() { const t = topCard(); const p = t && (t.mode === 'drag' || t.fromDrag) ? t.x / THROW : 0; keepBtn.style.setProperty('--p', Math.min(1, Math.max(0, p)).toFixed(3)); skipBtn.style.setProperty('--p', Math.min(1, Math.max(0, -p)).toFixed(3)); cards.forEach((c) => { if (c.mode === 'gone') return; const k = deck.indexOf(c); const d = k < 0 ? 0 : c.d; c.setX(c.x); c.setY(c.y + DEPTH[1] * d); c.setR(c.r); /* (scale needs its two halves: a quickSetter for scale alone does nothing) */ c.setSX(1 - DEPTH[0] * d); c.setSY(1 - DEPTH[0] * d); const o = k < 0 ? 1 : Math.min(1, Math.max(0, 3 - d)); c.setO(o); c.el.style.visibility = o < 0.01 ? 'hidden' : ''; /* only the top card can be taken: the others, and the ones flying away, let the clicks through */ c.el.style.pointerEvents = k === 0 ? '' : 'none'; c.el.style.zIndex = k < 0 ? 200 : 100 - k; /* the stamps say what letting go would do: only for a card in the hand, or thrown, or let go */ const said = c.mode === 'drag' || c.mode === 'fly' || c.fromDrag ? c.x / THROW : 0; const keepO = Math.min(1, Math.max(0, said)); const skipO = Math.min(1, Math.max(0, -said)); c.keepO(keepO); c.skipO(skipO); c.keepSX(1.35 - 0.35 * keepO); c.keepSY(1.35 - 0.35 * keepO); c.skipSX(1.35 - 0.35 * skipO); c.skipSY(1.35 - 0.35 * skipO); }); } function settled() { return cards.every((c) => { if (c.mode === 'drag' || c.mode === 'fly' || c.mode === 'wait') return false; if (c.mode === 'back' && (Math.abs(c.x) > 0.3 || Math.abs(c.y) > 0.3 || Math.abs(c.r) > 0.05 || Math.hypot(c.vx, c.vy) > 4)) return false; const k = deck.indexOf(c); return k < 0 || (Math.abs(c.d - k) < 0.002 && Math.abs(c.dv) < 0.01); }); } let awake = false; function tick(time, deltaMs) { const dt = Math.min(0.05, deltaMs / 1000); const n = Math.max(1, Math.ceil(dt / 0.004)); for (let s = 0; s < n; s++) step(dt / n); /* a card thrown out of sight is done with */ const box = deckEl.getBoundingClientRect(); cards.forEach((c) => { if (c.mode !== 'fly') return; const cx = box.left + box.width / 2 + c.x; const cy = box.top + box.height / 2 + c.y; if (Math.abs(cx - innerWidth / 2) > innerWidth / 2 + box.width || cy > innerHeight + box.height) { c.mode = 'gone'; c.el.style.visibility = 'hidden'; } }); if (settled()) { cards.forEach((c) => { if (c.mode === 'back') { c.mode = 'rest'; c.x = c.y = c.r = c.vx = c.vy = c.vr = 0; } const k = deck.indexOf(c); if (k >= 0) { c.d = k; c.dv = 0; } }); render(); gsap.ticker.remove(tick); awake = false; return; } render(); } function wake() { if (awake) return; awake = true; gsap.ticker.add(tick); } /* ---------------------------------------------------------------- choosing */ function throwTop(dir, vx, vy, vr) { const c = topCard(); if (!c) return; deck.shift(); c.mode = 'fly'; c.fromDrag = false; c.vx = dir * Math.max(Math.abs(vx), 1100); c.vy = Math.max(-700, Math.min(700, vy)); c.vr = vr; c.el.classList.remove('is-held'); thrown.push({ c, dir }); if (dir > 0) kept.push(c); ambient(c, false); live.textContent = `${dir > 0 ? 'Kept' : 'Skipped'} ${c.title}`; if (REDUCED) { c.mode = 'gone'; c.el.style.visibility = 'hidden'; } settle(); wake(); } /* after every change: the new top card can be taken, the count, and the end */ function settle() { cards.forEach((c) => { const k = deck.indexOf(c); c.el.tabIndex = k === 0 ? 0 : -1; if (k === 0) c.el.removeAttribute('aria-hidden'); else c.el.setAttribute('aria-hidden', 'true'); }); if (topCard()) ambient(topCard(), true); undoBtn.disabled = !thrown.length; skipBtn.disabled = keepBtn.disabled = !deck.length; countEl.textContent = deck.length ? `${cards.length - deck.length + 1} of ${cards.length}` : 'All done'; if (!deck.length) showDone(); else if (!doneEl.hidden) hideDone(); } function showDone() { keptEl.textContent = String(kept.length); listEl.textContent = ''; kept.forEach((c) => { const li = document.createElement('li'); li.textContent = c.title; li.style.setProperty('--bg', c.bg); li.style.setProperty('--ink-card', c.ink); listEl.append(li); }); if (!kept.length) { const li = document.createElement('li'); li.textContent = 'Nothing this time'; li.style.setProperty('--bg', '#f1efea'); li.style.setProperty('--ink-card', '#6f6b62'); listEl.append(li); } doneEl.hidden = false; live.textContent = `All done: you kept ${kept.length}`; if (REDUCED) return; gsap.fromTo(doneEl.children, { y: 16, opacity: 0 }, { y: 0, opacity: 1, duration: 0.55, ease: 'power3.out', stagger: 0.07, delay: 0.25, clearProps: 'transform,opacity' }); gsap.fromTo(listEl.children, { scale: 0.6 }, { scale: 1, duration: 0.5, ease: 'back.out(2.4)', stagger: 0.06, delay: 0.45, clearProps: 'transform' }); } function hideDone() { doneEl.hidden = true; } function undo() { const last = thrown.pop(); if (!last) return; const { c, dir } = last; if (dir > 0) kept = kept.filter((k) => k !== c); deck.unshift(c); c.el.style.visibility = ''; c.d = 0; c.dv = 0; if (REDUCED) { c.mode = 'rest'; c.x = c.y = c.r = 0; } else { /* it comes back from where it went: the spring brings it in */ if (c.mode === 'gone') { c.x = dir * (innerWidth / 2 + 220); c.y = Math.min(c.y, 260); c.r = dir * 28; } c.mode = 'back'; c.fromDrag = false; c.vx = c.vy = c.vr = 0; } live.textContent = `${c.title} is back`; settle(); wake(); } /* the buttons throw the top card as a flick would */ function flick(dir) { const c = topCard(); if (!c || c.mode === 'drag' || c.mode === 'wait') return; if (REDUCED) { throwTop(dir, 0, 0, 0); return; } /* a short swing the way it goes, then away */ c.mode = 'drag'; c.busy = true; const s = { x: c.x }; gsap.to(s, { x: dir * THROW * 0.9, duration: 0.16, ease: 'power2.in', onUpdate: () => { c.x = s.x; c.y = -Math.abs(s.x) * 0.12; c.r = s.x * TILT; wake(); }, onComplete: () => { c.busy = false; throwTop(dir, 1500, -160, dir * 240); }, }); wake(); } skipBtn.addEventListener('click', () => flick(-1)); keepBtn.addEventListener('click', () => flick(1)); undoBtn.addEventListener('click', undo); againBtn.addEventListener('click', () => startOver(true)); function startOver(byHand) { thrown = []; kept = []; deck = [...cards]; hideDone(); deal(); live.textContent = 'Back to the first plan'; settle(); render(); wake(); /* the button that was pressed goes away with the end: the focus goes to the first card */ if (byHand) topCard().el.focus({ preventScroll: true }); } /* the deck is dealt: the cards rise from below one after another, each landing on the pile, the top one last */ let dealing = []; function deal() { dealing.forEach((d) => d.kill()); dealing = []; cards.forEach((c, k) => { c.el.style.visibility = ''; c.vx = c.vy = c.vr = 0; c.dv = 0; c.fromDrag = false; if (REDUCED) { c.mode = 'rest'; c.x = c.y = c.r = 0; c.d = k; return; } c.mode = 'wait'; c.x = 0; c.y = 340; c.r = (k % 2 ? 1 : -1) * 8; c.d = 0; dealing.push(gsap.delayedCall(0.15 + (cards.length - 1 - k) * 0.08, () => { c.mode = 'back'; wake(); })); }); } /* ---------------------------------------------------------------- hands */ let hold = null; deckEl.addEventListener('pointerdown', (e) => { const c = topCard(); if (!c || e.button !== 0 || !c.el.contains(e.target) || c.busy || c.mode === 'wait') return; e.preventDefault(); c.el.setPointerCapture(e.pointerId); const box = c.el.getBoundingClientRect(); /* held by the top half it leans the way it goes, held by the bottom half the other way */ c.grab = e.clientY < box.top + box.height / 2 ? 1 : -1; c.mode = 'drag'; c.el.classList.add('is-held'); hold = { c, id: e.pointerId, x0: e.clientX - c.x, y0: e.clientY - c.y, samples: [] }; wake(); }); deckEl.addEventListener('pointermove', (e) => { if (!hold || e.pointerId !== hold.id) return; const c = hold.c; c.x = e.clientX - hold.x0; c.y = e.clientY - hold.y0; c.r = c.x * TILT * c.grab; const now = performance.now(); hold.samples.push([now, c.x, c.y]); /* the speed of the last moment counts: a flick speeds up at the end */ while (hold.samples.length > 2 && now - hold.samples[0][0] > 70) hold.samples.shift(); wake(); }); const letGo = (e) => { if (!hold || e.pointerId !== hold.id) return; const { c, samples } = hold; hold = null; c.el.classList.remove('is-held'); let vx = 0; let vy = 0; if (samples.length > 1) { const [t0, x0, y0] = samples[0]; const [t1, x1, y1] = samples[samples.length - 1]; const dt = Math.max(16, t1 - t0) / 1000; vx = (x1 - x0) / dt; vy = (y1 - y0) / dt; } const far = Math.abs(c.x) > THROW; const fast = Math.abs(vx) > FLICK && Math.sign(vx) === Math.sign(c.x) && Math.abs(c.x) > 24; if (e.type === 'pointerup' && (far || fast)) { const dir = Math.sign(c.x) || 1; throwTop(dir, vx, vy, dir * (160 + Math.abs(vx) * 0.12) * c.grab); } else { c.mode = REDUCED ? 'rest' : 'back'; c.fromDrag = true; c.vx = vx; c.vy = vy; c.vr = 0; if (REDUCED) c.x = c.y = c.r = 0; render(); wake(); } }; deckEl.addEventListener('pointerup', letGo); deckEl.addEventListener('pointercancel', letGo); deckEl.addEventListener('contextmenu', (e) => e.preventDefault()); /* the keys: on the top card the arrows choose, and the focus goes to the next one */ deckEl.addEventListener('keydown', (e) => { const c = topCard(); if (!c || e.target !== c.el) return; if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return; e.preventDefault(); flick(e.key === 'ArrowRight' ? 1 : -1); const next = deck[1]; if (next) next.el.focus({ preventScroll: true }); else againBtn.focus({ preventScroll: true }); }); /* how the page is being used: the rings of the focus show 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); /* ---------------------------------------------------------------- the library's preview */ /* a click from a script (detail 0) is a pretend hand: it drags the top card along a curve and lets it fly, takes one back now and then, and deals the deck again at the end */ const MOVES = [1, -1, 0, -1, 1, 1, -1, 1]; let move = 0; plans.addEventListener('click', (e) => { if (e.detail !== 0 || e.target !== plans) return; if (!deck.length) { move = 0; startOver(false); return; } const c = topCard(); if (c.mode === 'drag' || c.mode === 'wait' || c.busy) return; const dir = MOVES[move % MOVES.length]; move++; if (dir === 0) { if (thrown.length) undo(); return; } if (REDUCED) { throwTop(dir, 0, 0, 0); return; } c.mode = 'drag'; c.busy = true; c.grab = 1; const h = { t: 0 }; gsap.to(h, { t: 1, duration: 0.6, ease: 'power2.in', onUpdate: () => { c.x = dir * 150 * h.t; c.y = -34 * Math.sin(Math.PI * 0.8 * h.t); c.r = c.x * TILT; wake(); }, onComplete: () => { c.busy = false; throwTop(dir, 1400, -120, dir * 230); }, }); wake(); }); /* ---------------------------------------------------------------- it comes in */ deal(); settle(); if (!REDUCED) { gsap.from(['.plans__head', '.actions', '.plans__hint'], { y: 12, opacity: 0, duration: 0.6, ease: 'power3.out', stagger: 0.08, delay: 0.2, clearProps: 'transform,opacity' }); } render(); wake();