Skip to main content
SimilarExport ZIP
100%

custom-easing.ts - a set of easing functions that generate arrays of tweens/frames; when placed in an animation framework/library they emulate animations using said easing function. Since, the easing frames can be placed are generated on initial run and almost every conventional animation library/framework supports multiple animation frames, you get great performance together with even better support.

✓ Published0🌍 Public
JJastor11
Last edited Jan 20, 2022
Created on Dec 5, 2025

This example shows a suite of customizable easing functions that generate precomputed animation frames, which can be plugged into any animation library for smooth, performant transitions. It implements traditional easings like Quad, Elastic, Spring, and Bounce, alongside a Bézier curve-based easing function adapted from `bezier-easing`. The code precomputes animation frames based on easing parameters, caching optimal durations for spring effects. It also demonstrates cross-environment utilities for server-side rendering, including browser object abstraction and CSS value parsing with unit and color conversion.

AI-generated description

Similar vizzes

Loading thumbnail…

Custom Easing

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.

Mmbostock
72% match
Loading thumbnail…

ease function

This example demonstrates the mathematical behavior of a simple easing function that animates a variable toward a target value. The visualization shows how the variable converges to the target over time, with the easing strength and sensitivity threshold controlling the speed and precision of the approach. The code defines a JavaScript function, `ease`, which iteratively moves the variable by a fraction of the remaining distance, snapping to the target once the difference falls below a threshold. The rendering is driven by this custom logic, with no external animation or easing libraries involved, making it a bare-bones illustration of frame-by-frame interpolation.

MMAKIO135
69% 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
68% 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
68% 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
68% match
Loading thumbnail…

Easing

This interactive chart visualizes the easing functions from the d3-ease library, plotting normalized time *t* on the *x*-axis against the eased time *ease(t)* on the *y*-axis. A dropdown menu lets the viewer select among 28 easing functions, and animated dots trace the progress of a 3-second cycle along the selected curve. The SVG visualization uses `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `d3.axisLeft` for the plot, while a `d3.timer` drives the animation. The chart is built with D3 v4 alpha and rendered as SVG.

Mmbostock
67% 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
67% match
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
67% match