d3-ease

Easing is a method of distorting time to control apparent motion in animation. It is most commonly used for slow-in, slow-out. By easing time, animated transitions are smoother and exhibit more plausible motion.

The easing types in this module implement the ease method, which takes a normalized time t and returns the corresponding “eased” time tʹ. Both the normalized time and the eased time are typically in the range [0,1], where 0 represents the start of the animation and 1 represents the end; some easing types, such as elastic, may return eased times slightly outside this range. A good easing type should return 0 if t = 0 and 1 if t = 1. See the easing explorer for a visual demonstration.

These easing types are largely based on work by Robert Penner.

Installing

If you use NPM, `npm install d3-ease`. Otherwise, download the latest release. You can also load directly from d3js.org, either as a standalone library or as part of D3. AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported:

<script src="https://d3js.org/d3-ease.v1.min.js"></script>
<script>

var ease = d3.easeCubic;

</script>

Try d3-ease in your browser.

API Reference

<a name="_ease" href="#_ease">#</a> ease(t)

Given the specified normalized time t, typically in the range [0,1], returns the “eased” time tʹ, also typically in [0,1]. 0 represents the start of the animation and 1 represents the end. A good implementation returns 0 if t = 0 and 1 if t = 1. See the easing explorer for a visual demonstration. For example, to apply cubic easing:

var te = d3.easeCubic(t);

Similarly, to apply custom elastic easing:

// Before the animation starts, create your easing function.
var customElastic = d3.easeElastic.period(0.4);

// During the animation, apply the easing function.
var te = customElastic(t);

<a name="easeLinear" href="#easeLinear">#</a> d3.easeLinear(t) [<>](https://github.com/d3/d3-ease/blob/master/src/linear.js "Source")

Linear easing; the identity function; *linear*(t) returns t.

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/linear.png" alt="linear" width="100%" height="240">](https://observablehq.com/@d3/easing#linear)

<a name="easePolyIn" href="#easePolyIn">#</a> d3.easePolyIn(t) [<>](https://github.com/d3/d3-ease/blob/master/src/poly.js#L3 "Source")

Polynomial easing; raises t to the specified exponent. If the exponent is not specified, it defaults to 3, equivalent to cubicIn.

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/polyIn.png" alt="polyIn" width="100%" height="240">](https://observablehq.com/@d3/easing#polyIn)

<a name="easePolyOut" href="#easePolyOut">#</a> d3.easePolyOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/poly.js#L15 "Source")

Reverse polynomial easing; equivalent to 1 - polyIn(1 - t). If the exponent is not specified, it defaults to 3, equivalent to cubicOut.

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/polyOut.png" alt="polyOut" width="100%" height="240">](https://observablehq.com/@d3/easing#polyOut)

<a name="easePoly" href="#easePoly">#</a> d3.easePoly(t) [<>](https://github.com/d3/d3-ease/blob/master/src/poly.js "Source") <a name="easePolyInOut" href="#easePolyInOut">#</a> d3.easePolyInOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/poly.js#L27 "Source")

Symmetric polynomial easing; scales polyIn for t in 0, 0.5] and [polyOut for t in 0.5, 1]. If the [exponent is not specified, it defaults to 3, equivalent to cubic.

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/polyInOut.png" alt="polyInOut" width="100%" height="240">](https://observablehq.com/@d3/easing#polyInOut)

<a name="poly_exponent" href="#poly_exponent">#</a> poly.exponent(e) [<>](https://github.com/d3/d3-ease/blob/master/src/poly.js#L1 "Source")

Returns a new polynomial easing with the specified exponent e. For example, to create equivalents of linear, quad, and cubic:

var linear = d3.easePoly.exponent(1),
    quad = d3.easePoly.exponent(2),
    cubic = d3.easePoly.exponent(3);

<a name="easeQuadIn" href="#easeQuadIn">#</a> d3.easeQuadIn(t) [<>](https://github.com/d3/d3-ease/blob/master/src/quad.js#L1 "Source")

Quadratic easing; equivalent to polyIn.exponent(2).

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/quadIn.png" alt="quadIn" width="100%" height="240">](https://observablehq.com/@d3/easing#quadIn)

<a name="easeQuadOut" href="#easeQuadOut">#</a> d3.easeQuadOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/quad.js#L5 "Source")

Reverse quadratic easing; equivalent to 1 - quadIn(1 - t). Also equivalent to polyOut.exponent(2).

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/quadOut.png" alt="quadOut" width="100%" height="240">](https://observablehq.com/@d3/easing#quadOut)

<a name="easeQuad" href="#easeQuad">#</a> d3.easeQuad(t) [<>](https://github.com/d3/d3-ease/blob/master/src/quad.js "Source") <a name="easeQuadInOut" href="#easeQuadInOut">#</a> d3.easeQuadInOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/quad.js#L9 "Source")

Symmetric quadratic easing; scales quadIn for t in 0, 0.5] and [quadOut for t in 0.5, 1]. Also equivalent to [poly.exponent(2).

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/quadInOut.png" alt="quadInOut" width="100%" height="240">](https://observablehq.com/@d3/easing#quadInOut)

<a name="easeCubicIn" href="#easeCubicIn">#</a> d3.easeCubicIn(t) [<>](https://github.com/d3/d3-ease/blob/master/src/cubic.js#L1 "Source")

Cubic easing; equivalent to polyIn.exponent(3).

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/cubicIn.png" alt="cubicIn" width="100%" height="240">](https://observablehq.com/@d3/easing#cubicIn)

<a name="easeCubicOut" href="#easeCubicOut">#</a> d3.easeCubicOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/cubic.js#L5 "Source")

Reverse cubic easing; equivalent to 1 - cubicIn(1 - t). Also equivalent to polyOut.exponent(3).

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/cubicOut.png" alt="cubicOut" width="100%" height="240">](https://observablehq.com/@d3/easing#cubicOut)

<a name="easeCubic" href="#easeCubic">#</a> d3.easeCubic(t) [<>](https://github.com/d3/d3-ease/blob/master/src/cubic.js "Source") <a name="easeCubicInOut" href="#easeCubicInOut">#</a> d3.easeCubicInOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/cubic.js#L9 "Source")

Symmetric cubic easing; scales cubicIn for t in 0, 0.5] and [cubicOut for t in 0.5, 1]. Also equivalent to [poly.exponent(3).

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/cubicInOut.png" alt="cubicInOut" width="100%" height="240">](https://observablehq.com/@d3/easing#cubicInOut)

<a name="easeSinIn" href="#easeSinIn">#</a> d3.easeSinIn(t) [<>](https://github.com/d3/d3-ease/blob/master/src/sin.js#L4 "Source")

Sinusoidal easing; returns sin(t).

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/sinIn.png" alt="sinIn" width="100%" height="240">](https://observablehq.com/@d3/easing#sinIn)

<a name="easeSinOut" href="#easeSinOut">#</a> d3.easeSinOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/sin.js#L8 "Source")

Reverse sinusoidal easing; equivalent to 1 - sinIn(1 - t).

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/sinOut.png" alt="sinOut" width="100%" height="240">](https://observablehq.com/@d3/easing#sinOut)

<a name="easeSin" href="#easeSin">#</a> d3.easeSin(t) [<>](https://github.com/d3/d3-ease/blob/master/src/sin.js "Source") <a name="easeSinInOut" href="#easeSinInOut">#</a> d3.easeSinInOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/sin.js#L12 "Source")

Symmetric sinusoidal easing; scales sinIn for t in 0, 0.5] and [sinOut for t in [0.5, 1].

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/sinInOut.png" alt="sinInOut" width="100%" height="240">](https://observablehq.com/@d3/easing#sinInOut)

<a name="easeExpIn" href="#easeExpIn">#</a> d3.easeExpIn(t) [<>](https://github.com/d3/d3-ease/blob/master/src/exp.js#L1 "Source")

Exponential easing; raises 2 to the exponent 10 \* (t - 1).

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/expIn.png" alt="expIn" width="100%" height="240">](https://observablehq.com/@d3/easing#expIn)

<a name="easeExpOut" href="#easeExpOut">#</a> d3.easeExpOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/exp.js#L5 "Source")

Reverse exponential easing; equivalent to 1 - expIn(1 - t).

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/expOut.png" alt="expOut" width="100%" height="240">](https://observablehq.com/@d3/easing#expOut)

<a name="easeExp" href="#easeExp">#</a> d3.easeExp(t) [<>](https://github.com/d3/d3-ease/blob/master/src/exp.js "Source") <a name="easeExpInOut" href="#easeExpInOut">#</a> d3.easeExpInOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/exp.js#L9 "Source")

Symmetric exponential easing; scales expIn for t in 0, 0.5] and [expOut for t in [0.5, 1].

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/expInOut.png" alt="expInOut" width="100%" height="240">](https://observablehq.com/@d3/easing#expInOut)

<a name="easeCircleIn" href="#easeCircleIn">#</a> d3.easeCircleIn(t) [<>](https://github.com/d3/d3-ease/blob/master/src/circle.js#L1 "Source")

Circular easing.

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/circleIn.png" alt="circleIn" width="100%" height="240">](https://observablehq.com/@d3/easing#circleIn)

<a name="easeCircleOut" href="#easeCircleOut">#</a> d3.easeCircleOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/circle.js#L5 "Source")

Reverse circular easing; equivalent to 1 - circleIn(1 - t).

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/circleOut.png" alt="circleOut" width="100%" height="240">](https://observablehq.com/@d3/easing#circleOut)

<a name="easeCircle" href="#easeCircle">#</a> d3.easeCircle(t) [<>](https://github.com/d3/d3-ease/blob/master/src/circle.js "Source") <a name="easeCircleInOut" href="#easeCircleInOut">#</a> d3.easeCircleInOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/circle.js#L9 "Source")

Symmetric circular easing; scales circleIn for t in 0, 0.5] and [circleOut for t in [0.5, 1].

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/circleInOut.png" alt="circleInOut" width="100%" height="240">](https://observablehq.com/@d3/easing#circleInOut)

<a name="easeElasticIn" href="#easeElasticIn">#</a> d3.easeElasticIn(t) [<>](https://github.com/d3/d3-ease/blob/master/src/elastic.js#L5 "Source")

Elastic easing, like a rubber band. The amplitude and period of the oscillation are configurable; if not specified, they default to 1 and 0.3, respectively.

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/elasticIn.png" alt="elasticIn" width="100%" height="360">](https://observablehq.com/@d3/easing#elasticIn)

<a name="easeElastic" href="#easeElastic">#</a> d3.easeElastic(t) [<>](https://github.com/d3/d3-ease/blob/master/src/elastic.js "Source") <a name="easeElasticOut" href="#easeElasticOut">#</a> d3.easeElasticOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/elastic.js#L18 "Source")

Reverse elastic easing; equivalent to 1 - elasticIn(1 - t).

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/elasticOut.png" alt="elasticOut" width="100%" height="360">](https://observablehq.com/@d3/easing#elasticOut)

<a name="easeElasticInOut" href="#easeElasticInOut">#</a> d3.easeElasticInOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/elastic.js#L31 "Source")

Symmetric elastic easing; scales elasticIn for t in 0, 0.5] and [elasticOut for t in [0.5, 1].

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/elasticInOut.png" alt="elasticInOut" width="100%" height="360">](https://observablehq.com/@d3/easing#elasticInOut)

<a name="elastic_amplitude" href="#elastic_amplitude">#</a> elastic.amplitude(a) [<>](https://github.com/d3/d3-ease/blob/master/src/elastic.js#L40 "Source")

Returns a new elastic easing with the specified amplitude a.

<a name="elastic_period" href="#elastic_period">#</a> elastic.period(p) [<>](https://github.com/d3/d3-ease/blob/master/src/elastic.js#L41 "Source")

Returns a new elastic easing with the specified period p.

<a name="easeBackIn" href="#easeBackIn">#</a> d3.easeBackIn(t) [<>](https://github.com/d3/d3-ease/blob/master/src/back.js#L3 "Source")

Anticipatory easing, like a dancer bending his knees before jumping off the floor. The degree of overshoot is configurable; if not specified, it defaults to 1.70158.

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/backIn.png" alt="backIn" width="100%" height="300">](https://observablehq.com/@d3/easing#backIn)

<a name="easeBackOut" href="#easeBackOut">#</a> d3.easeBackOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/back.js#L15 "Source")

Reverse anticipatory easing; equivalent to 1 - backIn(1 - t).

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/backOut.png" alt="backOut" width="100%" height="300">](https://observablehq.com/@d3/easing#backOut)

<a name="easeBack" href="#easeBack">#</a> d3.easeBack(t) [<>](https://github.com/d3/d3-ease/blob/master/src/back.js "Source") <a name="easeBackInOut" href="#easeBackInOut">#</a> d3.easeBackInOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/back.js#L27 "Source")

Symmetric anticipatory easing; scales backIn for t in 0, 0.5] and [backOut for t in [0.5, 1].

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/backInOut.png" alt="backInOut" width="100%" height="300">](https://observablehq.com/@d3/easing#backInOut)

<a name="back_overshoot" href="#back_overshoot">#</a> back.overshoot(s) [<>](https://github.com/d3/d3-ease/blob/master/src/back.js#L1 "Source")

Returns a new back easing with the specified overshoot s.

<a name="easeBounceIn" href="#easeBounceIn">#</a> d3.easeBounceIn(t) [<>](https://github.com/d3/d3-ease/blob/master/src/bounce.js#L12 "Source")

Bounce easing, like a rubber ball.

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/bounceIn.png" alt="bounceIn" width="100%" height="240">](https://observablehq.com/@d3/easing#bounceIn)

<a name="easeBounce" href="#easeBounce">#</a> d3.easeBounce(t) [<>](https://github.com/d3/d3-ease/blob/master/src/bounce.js "Source") <a name="easeBounceOut" href="#easeBounceOut">#</a> d3.easeBounceOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/bounce.js#L16 "Source")

Reverse bounce easing; equivalent to 1 - bounceIn(1 - t).

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/bounceOut.png" alt="bounceOut" width="100%" height="240">](https://observablehq.com/@d3/easing#bounceOut)

<a name="easeBounceInOut" href="#easeBounceInOut">#</a> d3.easeBounceInOut(t) [<>](https://github.com/d3/d3-ease/blob/master/src/bounce.js#L20 "Source")

Symmetric bounce easing; scales bounceIn for t in 0, 0.5] and [bounceOut for t in [0.5, 1].

[<img src="https://raw.githubusercontent.com/d3/d3-ease/master/img/bounceInOut.png" alt="bounceInOut" width="100%" height="240">](https://observablehq.com/@d3/easing#bounceInOut)