2c:null 2d:["$","title",null,{"children":"Endless Progress | Fabian Iwand | Observable"}] 32:T4db,viewof options = Inputs.form({ showPercentage: Inputs.toggle({label: 'Show percentage', value: false}), replace: Inputs.radio(new Map([['replace', true], ['append', false]]), {label: 'Mode', value: true}), eases: Inputs.checkbox(new Map([ ['linear', t => t], ...['Poly'].flatMap(n => [ [`${n.toLowerCase()} in`, d3[`ease${n}In`]], [`${n.toLowerCase()} out`, d3[`ease${n}Out`]], [`${n.toLowerCase()} in-out`, d3[`ease${n}InOut`]], [`${n.toLowerCase()} out-in`, t => t < .5 ? d3[`ease${n}Out`](t * 2) * .5 : d3[`ease${n}In`](t * 2 - 1) * .5 + .5], ]), ]), { label: 'Eases', }), count: Inputs.range([1, 40], {step: 1, value: 20, label: 'Count'}), waitBefore: Inputs.range([0, 5000], {step: 100, value: 1500, label: 'Pause before'}), waitAfter: Inputs.range([0, 5000], {step: 100, value: 500, label: 'Pause after'}), minDuration: Inputs.range([1000, 30000], {step: 500, value: 1000, label: 'Min duration'}), maxDuration: Inputs.range([1000, 30000], {step: 500, value: 5000, label: 'Max duration'}), }, { template: inputs => htl.html`

Options

${Object.values(inputs)} `})33:T6f0,{ const { waitBefore = 1500, waitAfter = 500, minDuration = 1000, maxDuration = 8000, maxWidth = '500px', showPercentage = false, replace = true, count = 8, eases = [], rng = Math.random, } = options; let stopped = false; const mix = (a, b, t) => a * (1 - t) + b * t; const clamp = (a, b, v) => v <= a ? a : v >= b ? b : v; const min = Math.min(minDuration, maxDuration); const max = Math.max(minDuration, maxDuration); const timeouts = new Map(); invalidation.then(() => { stopped = true; for(const id of timeouts) clearTimeout(id); }); const html = htl.html; const list = html`

`; const add = (tOffset = 0) => { const o = html`0%`; const p = html``; const n = list.appendChild(html`

${showPercentage ? o : ''}${p}`) const duration = mix(min, max, rng()); const delay = tOffset ? 0 : waitBefore; const start = Date.now() + delay; const ease = eases[rng() * eases.length | 0] || (t => t); const animate = () => { if(stopped) return; const t = clamp(0, 1, (Date.now() - start) / duration + tOffset); const _t = ease(t); p.value = _t; o.value = `${(_t*100).toFixed(0)}%`; if(t >= 1) return timeouts.set(n, setTimeout(() => { replace ? n.replaceWith(add()) : (n.remove(), add()); timeouts.delete(n); }, waitAfter)); requestAnimationFrame(animate); }; timeouts.set(n, setTimeout(animate, delay)); return n; }; for(let i = 0; i < count; i++) add(rng()); return list; }34:[] 30:{"id":"4698d8fda05c2a0c","slug":"gen-endless-progress","title":"Endless Progress","thumbnail":"b8c1d24f318421b8e9eb456a037c252addb1e5420117a60a4fbc7d8359f0b18f","access_level":"public","create_time":"$D2022-03-12T12:13:07.023Z","update_time":"$D2022-03-12T17:20:04.909Z","view_time":null,"first_public_time":"$D2022-03-12T14:56:28.102Z","fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":152,"publish_version":152,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"414312a67ea30ac3","slug":"generative","title":"Generative","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"Endless Progress","cells":[{"id":0,"value":"# Endless Progress\n\nFeel productive without lifting a finger.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":78,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"