An easing function is a mathematical function such that that precisely describes the rate at which something moves between two states during animation.
🔗Types of Easing Functions
There's only one linear easing function because it's constrained at two points:
Quadratic easing functions can have exactly one critical point (a point on the function such that ). A common choice is to place that point at or .
Cubic easing functions can have up to two critical points. When they are placed at and respectively, the result is a well-known kind of sigmoid function called a smoothstep function. It's used so frequently that the OpenGL Shader Language provides a built-in function for this.
(the good old smoothstep function):
One might notice that the deceleration rate ( ) peaks at the end, which is a little bit unnatural because, when it's thought of as a kinetic motion, it doesn't quite align with Coulomb's friction model. For this reason, one could say that the CSS
ease-in-out function with a profile containing two plateaux would give a more natural feel, although the difference is subtle at best, and there's a huge difference in the computational overhead.
The precise definition of step easing functions varies between contexts. Here we use the round function, which evaluates to the nearest integer of a given real number (with an arbitrary tie-breaking).
This class of easing functions can be derived as an approximation of a second-order linear ordinary differential equation's solution.
We start with the following differential equation, where is the dampening factor and is the spring constant:
Assuming is sufficiently small, the general solution is:
This is inconvenient to use as an easing function because it never completely settles. To work around this problem, we substitute with , which is similarly monotonically-decreasing and convex in the range . After applying the easing function conditions, we arrive at the following function:
converges to the smoothstep function:
🔗Cubic Bézier Curves
Bézier curves are parametric curves that are most commonly used in vector graphics. Turns out, they are also excellent as easing functions owning to their expressiveness and ease of control.
A cubic Bézier curve is formed by two endpoints and two control points. For easing functions, the endpoints are usually (other choices are possible but not really useful). The control points determine the curve's tangents and curvatures at their respective endpoints.
Evaluating a cubic Bézier timing function—finding for a given —requires finding the real roots of a cubic equation. This is done through an analytic method such as Cardano's algorithm or an iterative method such as Newton's method. Modern web browsers use the combination of Newton's method and the bisection method for fallback (Gecko, Blink, Servo).
ease timing function):
ease-in-out timing function):
If any of the X values fall outside the range (which is disallowed in CSS Easing Functions Level 1), the resulting cubic Bézier easing function may be multi-valued: