d3-ease

What is d3-ease?

The d3-ease package provides a collection of easing functions for smooth animations. These functions define how the intermediate states of an animation are calculated, allowing for more natural-looking motion in visualizations. It's part of the D3 (Data-Driven Documents) suite of tools, which are widely used for creating interactive data visualizations.

What are d3-ease's main functionalities?

Easing Linear

Produces a linear interpolation between two points, which is the simplest form of easing. This is useful for uniform motion.

d3.easeLinear(t)

Easing Elastic

Creates an elastic easing effect that starts slowly, accelerates in the middle, and then decelerates at the end. This is often used for bouncy transitions.

d3.easeElasticInOut(t)

Easing Bounce

Simulates a bouncing motion at the end of an animation, making the transition feel more dynamic and lively.

d3.easeBounceOut(t)

Custom Easing

Allows for the creation of custom easing functions by adjusting parameters, such as the exponent in a polynomial easing. This provides flexibility in designing unique animations.

d3.easePolyInOut.exponent(4)(t)

Other packages similar to d3-ease

animejs

Anime.js is a lightweight JavaScript animation library that also offers a wide range of easing functions, similar to d3-ease. It provides more comprehensive animation features beyond easing, such as timeline control and CSS manipulations, making it more versatile for complex animations.

velocity-animate

Velocity is another animation library that focuses on performance and feature richness. It includes easing functions and also supports SVG animation, color animation, and scrolling. Compared to d3-ease, Velocity offers a broader scope of animation utilities.

gsap

GSAP (GreenSock Animation Platform) is a robust animation library that includes a variety of easing functions. It's known for its high performance and compatibility with a wide range of browsers. GSAP offers more advanced animation controls and effects than d3-ease, making it suitable for intricate animations.

README

d3-ease

Easing functions for smooth animation, largely based on Robert Penner’s. Easing is a method of distorting time to control apparent motion in animated transitions, most commonly for realistic “slow-in, slow-out”. Easing is typically used in conjunction with interpolation and transitions.

Changes from from D3 3.x:

• The "elastic" and "bounce" easing types have been reversed for consistency with Penner: "in" is now "out", "out" is now "in", and "out-in" is now "in-out".

• The "out-in" easing mode has been removed. It didn’t make sense (except for "elastic" and "bounce", which was a bug).

• The interpretation of optional parameters to the "elastic" and "back" easing functions has been fixed.

• Easing functions no longer clamp the output to 0 and 1 when t is less than or equal to 0 or greater than or equal to 1, respectively. (Note: transitions are still guaranteed to end at t = 1 if not interrupted, regardless of easing.)

• Easing functions have been optimized.

# ease(type[, arguments…])

Returns an easing function of the specified type. Some easing types may also take optional arguments, as described below. Each built-in type may be extended with one of three modes. For example, "cubic-in-out" has the type "cubic" and mode "in-out". If a mode is not specified, it defaults to "in".

• "in" - the identity function.
• "out" - reverses the easing direction to [1,0].
• "in-out" - copies and mirrors the easing function from [0,.5] and [.5,1].

The returned function takes a normalized time t, typically in the range [0,1], and returns an eased time tʹ, also typically in the range [0,1]. Note that some types, such as "elastic" may return eased values substantially outside the range [0,1].

# ease(t)

Given a normalized time t, typically in the range [0,1], returns the eased time tʹ, also typically in the range [0,1]. Note that some easing types, such as "elastic" may return eased values substantially outside the range [0,1].

var e = ease("cubic-in-out");
console.log(e(.2)); // 0.03200000000000001

Note: ease here (in italics) refers to an easing function returned by the ease constructor, not the ease constructor itself.

# ease("linear")
# ease("linear-in")
# ease("linear-out")
# ease("linear-in-out")

The identity function; returns t.

# ease("poly"[, k])
# ease("poly-in"[, k])
# ease("poly-out"[, k])
# ease("poly-in-out"[, k])

Raises t to the specified power k (defaults to 3; which is equivalent to cubic). Note the power k need not be an integer, or positive.

# ease("quad")
# ease("quad-in")
# ease("quad-out")
# ease("quad-in-out")

Equivalent to ease("poly", 2).

# ease("cubic")
# ease("cubic-in")
# ease("cubic-out")
# ease("cubic-in-out")

Equivalent to ease("poly", 3).

# ease("sin")
# ease("sin-in")
# ease("sin-out")
# ease("sin-in-out")

Applies the sine trigonometric function.

# ease("exp")
# ease("exp-in")
# ease("exp-out")
# ease("exp-in-out")

Raises 2 to the power t.

# ease("circle")
# ease("circle-in")
# ease("circle-out")
# ease("circle-in-out")

Produces a quarter circle.

# ease("elastic"[, a[, p]])
# ease("elastic-in"[, a[, p]])
# ease("elastic-out"[, a[, p]])
# ease("elastic-in-out"[, a[, p]])

Simulates an elastic band with parameters a and p (defaults to 1 and .3, respectively).

# ease("back"[, s])
# ease("back-in"[, s])
# ease("back-out"[, s])
# ease("back-in-out"[, s])

Simulates a car backing into a parking space (???) with parameter s (defaults to 1.70158).

# ease("bounce")
# ease("bounce-in")
# ease("bounce-out")
# ease("bounce-in-out")

Simulates a bouncy ball.