31:[] 2f:{"title":"CSS Staggered Entering Animations","cells":[{"id":0,"value":"md`# CSS Staggered Entering Animations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"itemClassName = \"domain-tree-node\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"containerClassName = \"domain-tree-node-child-container\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"viewof minPerceivableDuration = Range([0, 0.1], {\n label: \"Minimum perceivable duration\",\n value: 0.001\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof itemCount = Range([1, 100], {\n value: 50,\n step: 1,\n label: \"Number of items\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"viewof animationDuration = Range([0, 2], {\n value: 0.2,\n step: 0.05,\n label: \"Item animation duration\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"viewof maxAnimationDelay = Range([0, 10], {\n label: \"Max animation delay\",\n step: 0.1,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"viewof rateScaleFactor = Range([0, 50], {\n value: 10,\n label: \"Expontential rate scale factor\"\n // transform: Math.log\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"viewof easingIndex = Radio(\n Array.from({ length: easings.length }, (_, i) => i),\n {\n label: \"Delay provider\",\n format: i => easings[i].name,\n value: 0\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"{\n const button = html``;\n button.onclick = () => pbcopy(animationDelayStyleRules);\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"md`Click the table to replay the animation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"{\n replay;\n style2;\n\n const table = html`\n \n \n \n \n\n \n \n\n${items.map(({ i }) => {\n let delay = getDelay(i);\n return html`\n \n \n \n`;\n})}\n\n

Index	Animation delay scale factor	Bar chart
${i}	${(100 * delay).toFixed(2)}%	\n \n

`;\n\n table.onclick = () => viewof replay[0].click();\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"animationDelayStyleRules = {\n const rules = [\"/* START OF GENERATED ANIMATION DELAYS */\", settingsPreamble];\n\n delays.forEach((delay, i) =>\n rules.push(\n `.${containerClassName} .${itemClassName}:nth-child(${i +\n 1}) { animation-delay: calc(${delay} * var(--domain-tree-animation-max-delay)); }`\n )\n );\n\n rules.push(\n `.${containerClassName} .${itemClassName} { animation-delay: var(--domain-tree-animation-max-delay); } /* default */`\n );\n\n rules.push(\"/* END OF GENERATED ANIMATION DELAYS */\");\n\n return rules.join(\"\\n\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"delays = {\n settings;\n\n let lastDelay = easing(0);\n let normalizationFactor = 1;\n\n const delays = [lastDelay];\n for (let i = delays.length; i < items.length; i++) {\n const delay = easing(i);\n if ((delay - lastDelay) * maxAnimationDelay < minPerceivableDuration) {\n normalizationFactor = 1 / delay;\n break;\n }\n lastDelay = delay;\n delays.push(delay);\n }\n\n return delays.map(delay => normalizationFactor * delay);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"style2 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"settingsPreamble = `/*\nItem animation delays generated at\nhttps://observablehq.com/@mast4461/css-staggered-entering-animations\non ${new Date()}\nwith settings:\n${JSON.stringify(settings, null, 2)}\n*/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"md`---\n\n## Miscellaneous\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"function getDelay(i) {\n return delays[i] ?? 1;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":438,"value":"settings = ({\n minPerceivableDuration,\n animationDuration,\n itemCount,\n maxAnimationDelay,\n rateScaleFactor,\n easing: easing.name\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"viewof replay = Button(\"Replay animation\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"function isDelayPerceivable(delayFactor) {\n return (1 - delayFactor) * maxAnimationDelay >= minPerceivableDuration;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"easingIndex","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"easings = [\n function exponential(i) {\n const t = i / (viewof itemCount.value - 1);\n const rate = viewof rateScaleFactor.value;\n const f = x => 1 - Math.exp(-rate * x);\n return f(t) / (f(1) + 1e-9);\n },\n function linear(i) {\n return i / (viewof itemCount.value - 1);\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"easing = easings[easingIndex]","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"items = Array(itemCount)\n .fill()\n .map((_, i) => ({ i }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"import { pbcopy } from \"@mbostock/pbcopy\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"import { Range, Radio, Button } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}