Custom Easing

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 9, 2013

Four orange squares fall onto a gray canvas, each using a custom parameterized bounce easing function with different heights. The example shows how to implement a custom easing function for D3 v3 transitions, where the function must return 1 when t ≥ 1 to end correctly. Using `d3.select`, `transition`, and `.ease()`, four squares animate sequentially with a delay, demonstrating SVG rendering and animation with `d3.scale.ordinal` for positioning.

AI-generated description

An example of how to implement a custom easing function, here a parameterized bounce. Custom easing functions must return 1 when t ≥ 1, or else transitions will not end on the desired value.

(Warning: many people believe “bounce” easing is gimmicky, and recommend you use the default “cubic-in-out” instead!)

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Transition Easing Comparison in v4

Ten animated steel-blue circles demonstrate ten D3 v4 easing functions, with each circle labeled by its easing type (easeElastic, easeBounce, easeLinear, and so on). Every circle repeatedly transitions horizontally 210 to 720 pixels and back over four seconds using `transition().ease()` with the corresponding default function. The example uses SVG elements rendered in an HTML page loading d3.v4.min.js, and each animation loops indefinitely via the transition’s `"end"` event. The static labels and moving circles highlight the distinct acceleration, deceleration, and overshoot patterns of each easing curve.

Dd3noob

79% match

Loading thumbnail…

Ease

Ten colored circles bounce horizontally across an SVG canvas, each demonstrating a different D3 easing function: elastic, bounce, linear, sine, quadratic, cubic, poly, circle, exponential, and back. The animation repeats continuously, with each circle labeled by its easing type. The visualization uses D3 v6 transitions with the `.ease()` method and `d3.ease*` functions, rendered in an HTML page with JavaScript.

Vvivianaaai@qq.com

78% match

Loading thumbnail…

Easing Test

Nine labeled circles, each corresponding to a named easing function, sit at the left of a dark-orange ruled track. A click triggers a one-second `transition` that animates the circle’s `cx` attribute to the right using the selected easing, then returns after a delay. Built with D3 v3, the SVG uses `transition.ease` to apply functions like `elastic` and `bounce`, with mouseover recoloring the circles. The data is a hardcoded array of easing names.

FFrissAnalytics

78% match

Loading thumbnail…

Transition Easing Comparison in v6

Ten horizontal rows of steel-blue circles move back and forth across an SVG canvas, each demonstrating a different D3 v6 transition easing function. The animation compares `d3.easeElastic`, `d3.easeBounce`, `d3.easeLinear`, and others by applying each to a four-second `transition()` with a repeated `on("end")` loop. A text label identifies each easing type. The code uses D3 selections, `attr` modifications inside transitions, and SVG circles and text elements.

Dd3noob

78% match

Loading thumbnail…

Transition Easing Comparison in v5

This example compares ten D3 v5 easing functions—including easeElastic, easeBounce, easeLinear, and easeBack—by animating steel-blue circles moving horizontally back and forth across an SVG canvas. Each circle loops its transition indefinitely using `.transition()`, `.ease()`, and `.duration()`, with its easing type labeled to its right. The code uses default easing parameters and renders vector graphics via SVG, with repeated transitions chained through the `"end"` event listener.

Dd3noob

77% match

Loading thumbnail…

Transition Easing Comparison in v7

Ten circles, each labeled with an easing function name, animate horizontally across an SVG canvas using D3.js v7. The visualization compares the default behavior of ten easing functions—including `easeElastic`, `easeBounce`, and `easeLinear`—by repeatedly transitioning each circle back and forth over four-second durations. The code assigns each function to a separate `d3.transition` via the `.ease()` method, with circles starting at the same x-position and moving in sync to highlight differences in acceleration and deceleration. The SVG elements are rendered from a static array of function names, and the animation loops continuously using a transition’s `end` event.

Dd3noob

76% match

Loading thumbnail…

Easing Functions II

Easing Functions II displays D3’s built-in easing functions in “out” mode across a grid of small multiples, with each chart plotting the normalized time *t* on the x-axis against the eased time *ease(t)* on the y-axis. The visualization uses d3.svg.axis and d3.svg.line to render axes and curves, with hover interactions highlighting individual functions in red. It embeds pre-release D3 4.0 easing code via a gist, acknowledging a known bug in D3 3.x for elastic and bounce easing. The SVG output is generated with d3.scale.linear for both axes.

Mmbostock

76% match

Loading thumbnail…

Transition Easing Comparison in v4

This example compares the easing functions available in d3.js v4 by animating a series of circles horizontally across the screen, each using a different easing type. It shows how each function affects the speed and acceleration of a transition, with labels identifying each easing type beside its corresponding circle. The code uses the d3.v4 library, specifically the `transition.ease()` method, to apply each easing function over a 4-second duration. Circles repeatedly move forward and backward along the x-axis, and the animation is rendered as SVG elements within a fixed-width canvas.

AAlexDaGr8

76% match