30:T4e3,function chart(ease, invalidation) { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", `${width}px`) .style("overflow", "visible") .style("cursor", "pointer") .on("click", () => animate(0)); const circle = svg.append("circle") .attr("cx", x(0)) .attr("cy", (height - margin.bottom + margin.top) / 2) .attr("r", 12); svg.append("g") .call(xAxis); function animate(delay) { circle.transition() .ease(ease) .delay(delay) .duration(1500) .attrTween("r", () => (circle.attr("r", 12), null)) .attrTween("cx", () => x) .transition() .delay(1500) .duration(250) .ease(d3.easeCubicIn) .attr("r", 0) .transition() .attr("cx", x(0)) .transition() .ease(d3.easeCubicOut) .attr("r", 12); } const observer = new IntersectionObserver(entries => { const entry = entries.pop(); if (entry.intersectionRatio >= 0.9) animate(500); else if (entry.intersectionRatio <= 0) circle.interrupt(); }, { threshold: [0, 0.9] }); observer.observe(svg.node()); invalidation.then(() => observer.disconnect()); return svg.node(); }31:[] 2e:{"title":"Easing Animations","cells":[{"id":0,"value":"md`# Easing Animations\n\nEased transitions exhibit more plausible motion. [d3-ease](https://github.com/d3/d3-ease) implements various easing methods, demonstrated below, which take a normalized time ${tex`t \\in [0,1]`} and return an “eased” time ${tex`t'`}. Click to restart the animation. See also [easing graphs](/@d3/easing).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"md`---\n\n## Linear`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"linear = md`### easeLinear(*t*)\n\nThe identity function; no easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"chart(d3.easeLinear, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"md`---\n\n## Quadratic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"quadIn = md`### easeQuadIn(*t*)\n\nQuadratic easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"chart(d3.easeQuadIn, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"quadOut = md`### easeQuadOut(*t*)\n\nReversed quadratic easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"chart(d3.easeQuadOut, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"quad = md`### easeQuad(*t*)\n\nAn alias for easeQuadInOut.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"quadInOut = md`### easeQuadInOut(*t*)\n\nMirrored quadratic easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"chart(d3.easeQuadInOut, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"md`---\n\n## Cubic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"cubicIn = md`### easeCubicIn(*t*)\n\nCubic easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"chart(d3.easeCubicIn, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"cubicOut = md`### easeCubicOut(*t*)\n\nReversed cubic easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"chart(d3.easeCubicOut, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"cubic = md`### easeCubic(*t*)\n\nAn alias for [easeCubicInOut](#cubicInOut).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"cubicInOut = md`### easeCubicInOut(*t*)\n\nMirrored cubic easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"chart(d3.easeCubicInOut, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"md`---\n\n## Polynomial\n\nThe default exponent is 3, equivalent to cubic easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"viewof exponent = {\n const form = html`

\n \n poly.exponent()`;\n form.i.oninput = () => {\n form.value = +Math.pow(2, form.i.valueAsNumber).toPrecision(3);\n form.o.value = form.value;\n };\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"polyIn = md`### easePolyIn.exponent(${exponent})(*t*)\n\nPolynomial easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"chart(d3.easePolyIn.exponent(exponent), invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"polyOut = md`### easePolyOut.exponent(${exponent})(*t*)\n\nReversed polynomial easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"chart(d3.easePolyOut.exponent(exponent), invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"polyInOut = md`### easePolyInOut.exponent(${exponent})(*t*)\n\nMirrored polynomial easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"chart(d3.easePolyInOut.exponent(exponent), invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"md`---\n\n## Exponential`","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"expIn = md`### easeExpIn(*t*)\n\nExponential easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"chart(d3.easeExpIn, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"expOut = md`### easeExpOut(*t*)\n\nReversed exponential easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"chart(d3.easeExpOut, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"exp = md`### easeExp(*t*)\n\nAn alias for easeExpInOut.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"expInOut = md`### easeExpInOut(*t*)\n\nMirrored exponential easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"chart(d3.easeExpInOut, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"md`---\n\n## Sinusoidal`","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"sinIn = md`### easeSinIn(*t*)\n\nSinusoidal easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"chart(d3.easeSinIn, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"sinOut = md`### easeSinOut(*t*)\n\nReversed sinusoidal easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"chart(d3.easeSinOut, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"sin = md`### easeSin(*t*)\n\nAn alias for easeSinInOut.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"sinInOut = md`### easeSinInOut(*t*)\n\nMirrored sinusoidal easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"chart(d3.easeSinInOut, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"md`---\n\n## Circle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"circleIn = md`### easeCircleIn(*t*)\n\nCircular easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"chart(d3.easeCircleIn, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"circleOut = md`### easeCircleOut(*t*)\n\nReversed circular easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"chart(d3.easeCircleOut, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"circle = md`### easeCircle(*t*)\n\nAn alias for easeCircleInOut.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"circleInOut = md`### easeCircleInOut(*t*)\n\nMirrored circular easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"chart(d3.easeCircleInOut, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"md`---\n\n## Elastic\n\nThe default amplitude is 1.0 and the default period is 0.3.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"viewof amplitude = {\n const form = html`\n \n elastic.amplitude()`;\n form.i.oninput = () => {\n form.value = +form.i.valueAsNumber.toPrecision(3);\n form.o.value = form.value.toFixed(2);\n };\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"viewof period = {\n const form = html`\n \n elastic.period()`;\n form.i.oninput = () => {\n form.value = +form.i.valueAsNumber.toPrecision(3);\n form.o.value = form.value.toFixed(2);\n };\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"elasticIn = md`### easeElasticIn.amplitude(${amplitude}).period(${period})(*t*)\n\nElastic easing, like a rubber band.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"chart(d3.easeElasticIn.amplitude(amplitude).period(period), invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"elastic = md`### easeElastic(*t*)\n\nAn alias for easeElasticOut.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"elasticOut = md`### easeElasticOut.amplitude(${amplitude}).period(${period})(*t*)\n\nReversed elastic easing, like a rubber band.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"chart(d3.easeElasticOut.amplitude(amplitude).period(period), invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"elasticInOut = md`### easeElasticInOut.amplitude(${amplitude}).period(${period})(*t*)\n\nMirrored elastic easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"chart(d3.easeElasticInOut.amplitude(amplitude).period(period), invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"md`---\n\n## Back\n\nThe default overshoot is 1.70158.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"viewof overshoot = {\n const form = html`\n \n back.overshoot()`;\n form.i.oninput = () => {\n form.value = +form.i.valueAsNumber.toPrecision(3);\n form.o.value = form.value.toFixed(2);\n };\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"backIn = md`### easeBackIn.overshoot(${overshoot})(*t*)\n\nAnticipatory easing, like a dancer bending his knees before jumping.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"chart(d3.easeBackIn.overshoot(overshoot), invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"backOut = md`### easeBackOut.overshoot(${overshoot})(*t*)\n\nReversed anticipatory easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"chart(d3.easeBackOut.overshoot(overshoot), invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"back = md`### easeBack(*t*)\n\nAn alias for easeBackInOut.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"backInOut = md`### easeBackInOut.overshoot(${overshoot})(*t*)\n\nMirrored anticipatory easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"chart(d3.easeBackInOut.overshoot(overshoot), invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"md`---\n\n## Bounce`","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"bounceIn = md`### easeBounceIn(*t*)\n\nBounce easing, like a rubber ball.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"chart(d3.easeBounceIn, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"bounce = md`### easeBounce(*t*)\n\nAn alias for easeBounceOut.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"bounceOut = md`### easeBounceOut(*t*)\n\nBounce easing, like a rubber ball.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"chart(d3.easeBounceOut, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"bounceInOut = md`### easeBounceInOut(*t*)\n\nMirrored bounce easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"chart(d3.easeBounceInOut, invalidation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"x = d3.scaleLinear().range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom + 6})`)\n .call(d3.axisBottom(x.copy().interpolate(d3.interpolateRound)).ticks(width / 60))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"stroke-opacity\", 0.1)\n .attr(\"y1\", margin.bottom + margin.top - height - 12))","pinned":true,"hidden":false,"mode":"ojs"},{"id":850,"value":"width = 640","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"height = 48","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"margin = ({top: 10, right: 20, bottom: 20, left: 30})","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}