/* The to-do list A list of tasks with real checkboxes. Ticking one, its box pops and turns coral, a tick draws itself, a line is drawn through the words from the left, and a moment later the task slides down among the ones done, lifted a little as if carried, while the others move up to close the gap; the count rolls and the bar on top fills. When they are all done the title says so and the tasks give a little wave. Unticked, a task goes back up to its place. A task can be added at the top, and taken away with its cross. The moves are worked out by hand: where each task is before, where it goes after, and the difference slides. */ /* ---- values to change ---- */ const TASKS = ['Air the rooms', 'Make the beds', 'Fresh flowers on the tables', 'Check the wine order', 'Bake the morning cake', 'Light the fireplace']; /* the tasks when the page opens */ const START_DONE = 1; /* how many of them are already done */ const SETTLE = 0.35; /* the pause between the tick and the task sliding to its place, in seconds */ const MOVE = 0.6; /* the seconds a task takes to slide to its place */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const todo = document.querySelector('[data-todo]'); const list = todo.querySelector('[data-list]'); const title = todo.querySelector('[data-title]'); const doneEl = todo.querySelector('[data-done]'); const allEl = todo.querySelector('[data-all]'); const bar = todo.querySelector('[data-bar]'); const add = todo.querySelector('[data-add]'); const field = todo.querySelector('[data-field]'); const TITLE = title.textContent; const TICK = ''; const CROSS = ''; let tasks = []; let made = 0; let doneClock = 0; /* ---------------------------------------------------------------- a task */ function make(text, done = false) { const id = ++made; const li = document.createElement('li'); li.className = 'task'; li.innerHTML = `${TICK}`; const t = { id, li, done: false, doneAt: 0, order: id, input: li.querySelector('input'), box: li.querySelector('.task__box'), tick: li.querySelector('.task__box path'), strike: li.querySelector('.task__strike'), x: li.querySelector('.task__x'), }; li.querySelector('.task__text > span').textContent = text; t.x.setAttribute('aria-label', `Remove “${text}”`); t.input.addEventListener('change', () => toggle(t, t.input.checked)); t.x.addEventListener('click', () => remove(t)); gsap.set(t.tick, { strokeDasharray: 20, strokeDashoffset: 20 }); if (done) toggle(t, true, true); return t; } /* ---------------------------------------------------------------- ticking */ function toggle(t, done, instant = false) { t.done = done; t.doneAt = done ? ++doneClock : 0; t.input.checked = done; t.li.classList.toggle('is-done', done); const quick = instant || REDUCED; if (done) { if (!quick) gsap.fromTo(t.box, { scale: 0.7 }, { scale: 1, duration: 0.6, ease: 'elastic.out(1, 0.42)', overwrite: 'auto' }); gsap.to(t.tick, { strokeDashoffset: 0, duration: quick ? 0 : 0.35, ease: 'power2.out', delay: quick ? 0 : 0.06, overwrite: 'auto' }); gsap.fromTo(t.strike, { scaleX: 0, transformOrigin: '0% 50%' }, { scaleX: 1, duration: quick ? 0 : 0.42, ease: 'power2.inOut', delay: quick ? 0 : 0.1, overwrite: 'auto' }); } else { gsap.to(t.tick, { strokeDashoffset: 20, duration: quick ? 0 : 0.2, overwrite: 'auto' }); gsap.to(t.strike, { scaleX: 0, transformOrigin: '100% 50%', duration: quick ? 0 : 0.3, ease: 'power2.in', overwrite: 'auto' }); } if (instant) return; count(); /* a moment later the task slides to where it belongs */ if (REDUCED) place(t); else gsap.delayedCall(SETTLE, () => place(t)); } /* the order: the tasks to do as they were written, then the ones done, in the order they were done */ function place(mover = null, instant = false) { const want = [...tasks.filter((t) => !t.done).sort((a, b) => a.order - b.order), ...tasks.filter((t) => t.done).sort((a, b) => a.doneAt - b.doneAt)]; /* where each task is now (a slide still going is part of where it is) */ const before = new Map(tasks.map((t) => [t, t.li.getBoundingClientRect().top])); want.forEach((t) => list.append(t.li)); tasks = want; if (REDUCED || instant) return; want.forEach((t) => { const dy = before.get(t) - (t.li.getBoundingClientRect().top - gsap.getProperty(t.li, 'y')); if (Math.abs(dy) < 0.5) return; gsap.fromTo(t.li, { y: dy }, { y: 0, duration: MOVE, ease: 'power3.inOut', overwrite: 'auto' }); }); /* the task that moved is carried: lifted a little, over the others */ if (mover && Math.abs(before.get(mover) - mover.li.getBoundingClientRect().top) > 0.5) { gsap.timeline() .set(mover.li, { zIndex: 2 }) .to(mover.li, { scale: 1.03, boxShadow: '0 14px 30px -12px rgba(0,0,0,0.9)', duration: MOVE * 0.4, ease: 'power2.out' }) .to(mover.li, { scale: 1, boxShadow: '0 0 0 0 rgba(0,0,0,0)', duration: MOVE * 0.6, ease: 'power2.inOut' }) .set(mover.li, { zIndex: 'auto', clearProps: 'boxShadow' }); } } /* ---------------------------------------------------------------- the count, the bar and the title */ let shownDone = -1; let allDone = false; function count() { const n = tasks.filter((t) => t.done).length; const all = tasks.length; allEl.textContent = all; if (n !== shownDone) { const first = shownDone < 0; shownDone = n; doneEl.textContent = n; if (!first && !REDUCED) gsap.fromTo(doneEl, { yPercent: -60, opacity: 0 }, { yPercent: 0, opacity: 1, duration: 0.4, ease: 'back.out(2.5)', display: 'inline-block' }); } gsap.to(bar, { scaleX: all ? n / all : 0, duration: REDUCED ? 0 : 0.7, ease: 'power3.out', overwrite: 'auto' }); const now = all > 0 && n === all; if (now !== allDone) { allDone = now; retitle(now ? 'All done' : TITLE); /* all done: a little wave down the list */ if (now && !REDUCED) gsap.to(tasks.map((t) => t.li), { y: -6, duration: 0.18, ease: 'power2.out', stagger: 0.05, yoyo: true, repeat: 1, delay: SETTLE + MOVE }); } } function retitle(text) { if (REDUCED) { title.textContent = text; return; } gsap.timeline() .to(title, { yPercent: -100, opacity: 0, duration: 0.2, ease: 'power2.in', overwrite: 'auto' }) .call(() => (title.textContent = text)) .fromTo(title, { yPercent: 100, opacity: 0 }, { yPercent: 0, opacity: 1, duration: 0.45, ease: 'back.out(2)', immediateRender: false }); } /* ---------------------------------------------------------------- adding and taking away */ add.addEventListener('submit', (e) => { e.preventDefault(); const text = field.value.trim(); if (!text) return; field.value = ''; const t = make(text); t.order = Math.min(0, ...tasks.map((x) => x.order)) - 1; /* it goes in at the top straight away, and opens up from nothing */ list.prepend(t.li); tasks.unshift(t); place(); count(); if (!REDUCED) { gsap.from(t.li, { height: 0, minHeight: 0, opacity: 0, x: -24, duration: 0.5, ease: 'power3.out', clearProps: 'height,minHeight,opacity,transform' }); gsap.from(t.li.querySelector('label'), { minHeight: 0, duration: 0.5, ease: 'power3.out', clearProps: 'minHeight' }); } }); function remove(t) { const next = tasks[tasks.indexOf(t) + 1] || tasks[tasks.indexOf(t) - 1]; tasks = tasks.filter((x) => x !== t); count(); (next ? next.x : field).focus({ preventScroll: true }); if (REDUCED) { t.li.remove(); return; } gsap.timeline({ onComplete: () => t.li.remove() }) .to(t.li, { x: 36, opacity: 0, duration: 0.22, ease: 'power2.in' }) .to([t.li, t.li.querySelector('label')], { height: 0, minHeight: 0, duration: 0.3, ease: 'power2.inOut' }); } /* ---------------------------------------------------------------- the library's preview */ /* a click from a script (detail 0) ticks the next task; with them all done, it unticks them all */ todo.addEventListener('click', (e) => { if (e.detail !== 0 || e.target !== todo) return; const next = tasks.find((t) => !t.done); if (next) toggle(next, true); else tasks.slice().reverse().forEach((t, i) => gsap.delayedCall(i * 0.08, () => toggle(t, false))); }); /* ---------------------------------------------------------------- it comes in */ tasks = TASKS.map((text, i) => make(text, i < START_DONE)); place(null, true); count(); if (!REDUCED) { gsap.from(todo, { y: 16, opacity: 0, duration: 0.7, ease: 'power3.out', clearProps: 'transform,opacity' }); gsap.from(tasks.map((t) => t.li), { y: 12, opacity: 0, duration: 0.5, ease: 'power3.out', stagger: 0.06, delay: 0.2, clearProps: 'opacity' }); }