block by mbostock 10342273

Accelerate, Then Coast

Full Screen

This diagram demonstrates an easing function that first applies constant acceleration and then “coasts” at constant speed. This is useful to constrain the maximum speed of long slow-in transitions.

The constant acceleration curve is shown in brown, while the constant speed line is shown in blue. The combined curve is shown in black. The lines intersect at the point their derivatives are equal, providing C1 continuity.

With acceleration a = 1, this easing function is equivalent to quadratic easing: constant acceleration is applied continuously from t = 0 to t = 1. With infinite acceleration, this easing function is equivalent to linear easing: the acceleration is instantaneous at t = 0.

This easing function can be combined with reflection to incorporate slow-out decceleration.

index.html