D3 · all subjects

d3-ease

20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

d3-ease module overview

d3-ease provides easing functions for smooth animation. It includes easing functions for polynomial, quadratic, cubic, sinusoidal, exponential, circular, elastic, back, and bounce effects, each with in, out, and in-out variants where applicable.

easePoly and its variants

easePoly is an alias for easePolyInOut. easePolyIn raises t to the specified exponent (default 3, equivalent to easeCubicIn). easePolyOut is reverse polynomial easing, equivalent to 1 - easePolyIn(1 - t), with default exponent 3 equivalent to easeCubicOut. easePolyInOut scales easePolyIn for t in 0–0.5 and easePolyOut for t in 0.5–1, with default exponent 3 equivalent to easeCubic.

easePoly.exponent(e)

Returns a new polynomial easing with the specified exponent e. Example: d3.easePoly.exponent(1) creates linear easing, d3.easePoly.exponent(2) creates quadratic easing, and d3.easePoly.exponent(3) creates cubic easing.

easeQuad and its variants

easeQuad is an alias for easeQuadInOut. easeQuadIn is quadratic easing, equivalent to easePolyIn.exponent(2). easeQuadOut is reverse quadratic easing, equivalent to 1 - easeQuadIn(1 - t). easeQuadInOut is symmetric quadratic easing, equivalent to easePoly.exponent(2).

easeCubic and its variants

easeCubic is an alias for easeCubicInOut. easeCubicIn is cubic easing, equivalent to easePolyIn.exponent(3). easeCubicOut is reverse cubic easing, equivalent to 1 - easeCubicIn(1 - t). easeCubicInOut is symmetric cubic easing, equivalent to easePoly.exponent(3).

easeSin and its variants

easeSin is an alias for easeSinInOut. easeSinIn is sinusoidal easing that returns sin(t). easeSinOut is reverse sinusoidal easing, equivalent to 1 - easeSinIn(1 - t). easeSinInOut is symmetric sinusoidal easing, scaling easeSinIn for t in 0–0.5 and easeSinOut for t in 0.5–1.

easeExp and its variants

easeExp is an alias for easeExpInOut. easeExpIn is exponential easing that raises 2 to the exponent 10 × (t - 1). easeExpOut is reverse exponential easing, equivalent to 1 - easeExpIn(1 - t). easeExpInOut is symmetric exponential easing, scaling easeExpIn for t in 0–0.5 and easeExpOut for t in 0.5–1.

easeCircle and its variants

easeCircle is an alias for easeCircleInOut. easeCircleIn is circular easing. easeCircleOut is reverse circular easing, equivalent to 1 - easeCircleIn(1 - t). easeCircleInOut is symmetric circular easing, scaling easeCircleIn for t in 0–0.5 and easeCircleOut for t in 0.5–1.

easeElastic and its variants

easeElastic is an alias for easeElasticOut. It provides elastic easing like a rubber band. easeElasticIn uses elastic easing; easeElasticOut is reverse elastic easing, equivalent to 1 - easeElasticIn(1 - t); easeElasticInOut scales easeElasticIn for t in 0–0.5 and easeElasticOut for t in 0.5–1. The amplitude and period of oscillation are configurable.

easeElastic.amplitude(a)

Returns a new elastic easing with the specified amplitude a. The amplitude must be greater than or equal to 1. If not specified, amplitude defaults to 1.

easeElastic.period(p)

Returns a new elastic easing with the specified period p. If not specified, period defaults to 0.3.

easeBack and its variants

easeBack is an alias for easeBackInOut. easeBackIn provides anticipatory easing like a dancer bending her knees before jumping off the floor. easeBackOut is reverse anticipatory easing, equivalent to 1 - easeBackIn(1 - t). easeBackInOut scales easeBackIn for t in 0–0.5 and easeBackOut for t in 0.5–1. The degree of overshoot is configurable.

easeBack.overshoot(s)

Returns a new back easing with the specified overshoot s. If not specified, overshoot defaults to 1.70158.

easeBounce and its variants

easeBounce is an alias for easeBounceOut. easeBounceIn provides bounce easing like a rubber ball. easeBounceOut is reverse bounce easing, equivalent to 1 - easeBounceIn(1 - t). easeBounceInOut scales easeBounceIn for t in 0–0.5 and easeBounceOut for t in 0.5–1.

Ease function signature and behavior

Easing types implement the ease method which takes a normalized time t and returns the corresponding eased time t'. Both normalized and eased time are typically in the range [0,1], where 0 represents the start and 1 represents the end of animation. Some easing types like easeElastic may return eased times slightly outside this range. A good easing type should return 0 when t = 0 and 1 when t = 1.

Custom easing with parameters example

To apply custom elastic easing, create the easing function before animation starts: const ease = d3.easeElastic.period(0.4); Then during animation, apply it: const te = ease(t);

Apply easeCubic example

To apply easeCubic easing: const te = d3.easeCubic(t);

Create polynomial easing variants example

To create polynomial easing equivalents: const linear = d3.easePoly.exponent(1); const quad = d3.easePoly.exponent(2); const cubic = d3.easePoly.exponent(3);

easeLinear

Linear easing function that returns the input value unchanged. The function easeLinear(t) returns t.

Easing purpose in animations

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

Give your agent this brain