Accelerate, Then Coast II
This interactive example visualizes a configurable easing function that reflects the "Accelerate, Then Coast" curve to produce slow-out effects. Two sliders adjust the acceleration exponent and the reflection center, allowing comparison between symmetric in-out easing and asymmetric alternatives. The SVG displays the easing curve with axes, while an animated circle traces its path over five seconds, updating reference lines to show progress. The code uses D3 v3 for scales, axes, transitions, and range inputs, with custom easing functions `easeReflect` and `easeAccelerateThenCoast` implemented in JavaScript.
AI-generated descriptionThis diagram takes the Accelerate, Then Coast easing function and reflects it to apply slow-out. The reflection center <i>r</i> is configurable. With <i>r</i> = .5, the reflection is equivalent to the standard “in-out” symmetric easing; with <i>r</i> = 0, only slow-out is applied, and with <i>r</i> = 1, only slow-in is applied.