This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
d3-ease with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
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.
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>
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);
Linear easing; the identity function; linear(t) returns t.
var linear = d3.easePoly.exponent(1), quad = d3.easePoly.exponent(2), cubic = d3.easePoly.exponent(3);
Sinusoidal easing; returns sin(t).
Reverse sinusoidal easing; equivalent to 1 - sinIn(1 - t).
Exponential easing; raises 2 to the exponent 10 * (t - 1).
Reverse exponential easing; equivalent to 1 - expIn(1 - t).
Reverse circular easing; equivalent to 1 - circleIn(1 - t).
Reverse elastic easing; equivalent to 1 - elasticIn(1 - t).
Returns a new elastic easing with the specified amplitude a.
Returns a new elastic easing with the specified period p.
Reverse anticipatory easing; equivalent to 1 - backIn(1 - t).
Returns a new back easing with the specified overshoot s.
Bounce easing, like a rubber ball.
Reverse bounce easing; equivalent to 1 - bounceIn(1 - t).