CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-d3-ease

Easing functions for smooth animation.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

d3-ease

d3-ease provides easing functions for smooth animation that distort time to control apparent motion. It implements mathematical easing methods for creating natural-looking transitions by converting normalized time values into "eased" time values, making animated transitions smoother and more visually appealing.

Package Information

  • Package Name: d3-ease
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install d3-ease

Core Imports

import { easeLinear, easeCubic, easeElastic } from "d3-ease";

For CommonJS:

const { easeLinear, easeCubic, easeElastic } = require("d3-ease");

Browser (UMD):

<script src="https://d3js.org/d3-ease.v2.min.js"></script>
<script>
  var ease = d3.easeCubic;
</script>

Basic Usage

import { easeCubic, easeElastic } from "d3-ease";

// Basic easing - transforms normalized time (0-1) to eased time
const t = 0.5; // halfway through animation
const easedTime = easeCubic(t); // returns smooth cubic-eased time

// Custom elastic easing with period configuration
const customElastic = easeElastic.period(0.4);
const elasticTime = customElastic(t);

// Use in animation loop
function animate(progress) {
  const easedProgress = easeCubic(progress);
  element.style.left = (startX + (endX - startX) * easedProgress) + 'px';
}

Architecture

d3-ease is organized around the core easing function signature: (t: number) => number. All easing functions:

  • Accept normalized time t (typically 0-1 range) representing animation progress
  • Return "eased" time value (typically 0-1, some may exceed slightly)
  • Are pure functions with no side effects
  • Follow Robert Penner's easing equations
  • Support configurable parameters for polynomial, elastic, and back easings

Capabilities

Linear Easing

Identity function that returns input unchanged, providing uniform motion.

/**
 * Linear easing; the identity function
 * @param t - normalized time value (0-1)
 * @returns t unchanged
 */
function easeLinear(t);

Quadratic Easing

Quadratic polynomial easing (t²) for gentle acceleration/deceleration curves.

/**
 * Quadratic ease-in (accelerating from zero velocity)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeQuadIn(t);

/**
 * Quadratic ease-out (decelerating to zero velocity)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeQuadOut(t);

/**
 * Symmetric quadratic easing (alias for easeQuadInOut)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeQuad(t);

/**
 * Symmetric quadratic ease-in-out
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeQuadInOut(t);

Cubic Easing

Cubic polynomial easing (t³) for more pronounced acceleration/deceleration.

/**
 * Cubic ease-in (accelerating from zero velocity)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeCubicIn(t);

/**
 * Cubic ease-out (decelerating to zero velocity)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeCubicOut(t);

/**
 * Symmetric cubic easing (alias for easeCubicInOut)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeCubic(t);

/**
 * Symmetric cubic ease-in-out
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeCubicInOut(t);

Polynomial Easing

Configurable polynomial easing with custom exponents for flexible curve control.

/**
 * Polynomial ease-in with configurable exponent (default: 3)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easePolyIn(t);

/**
 * Configure polynomial ease-in with custom exponent
 * @param e - exponent value
 * @returns new easing function with specified exponent
 */
easePolyIn.exponent = function(e) { return easePolyIn; };

/**
 * Polynomial ease-out with configurable exponent (default: 3)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easePolyOut(t);

/**
 * Configure polynomial ease-out with custom exponent
 * @param e - exponent value
 * @returns new easing function with specified exponent
 */
easePolyOut.exponent = function(e) { return easePolyOut; };

/**
 * Symmetric polynomial easing (alias for easePolyInOut)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easePoly(t);

/**
 * Symmetric polynomial ease-in-out with configurable exponent (default: 3)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easePolyInOut(t);

/**
 * Configure polynomial ease-in-out with custom exponent
 * @param e - exponent value
 * @returns new easing function with specified exponent
 */
easePolyInOut.exponent = function(e) { return easePolyInOut; };

Sinusoidal Easing

Trigonometric easing using sine functions for smooth, natural curves.

/**
 * Sinusoidal ease-in
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeSinIn(t);

/**
 * Sinusoidal ease-out
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeSinOut(t);

/**
 * Symmetric sinusoidal easing (alias for easeSinInOut)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeSin(t);

/**
 * Symmetric sinusoidal ease-in-out
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeSinInOut(t);

Exponential Easing

Exponential easing using powers of 2 for dramatic acceleration/deceleration.

/**
 * Exponential ease-in (2^(10*(t-1)))
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeExpIn(t);

/**
 * Exponential ease-out
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeExpOut(t);

/**
 * Symmetric exponential easing (alias for easeExpInOut)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeExp(t);

/**
 * Symmetric exponential ease-in-out
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeExpInOut(t);

Circular Easing

Circular easing based on quarter-circle curves for smooth, rounded transitions.

/**
 * Circular ease-in
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeCircleIn(t);

/**
 * Circular ease-out
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeCircleOut(t);

/**
 * Symmetric circular easing (alias for easeCircleInOut)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeCircle(t);

/**
 * Symmetric circular ease-in-out
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeCircleInOut(t);

Bounce Easing

Bounce easing simulating a rubber ball for playful, bouncing effects.

/**
 * Bounce ease-in
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeBounceIn(t);

/**
 * Bounce ease-out (alias for easeBounce)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeBounceOut(t);

/**
 * Bounce ease-out (primary bounce easing)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeBounce(t);

/**
 * Symmetric bounce ease-in-out
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeBounceInOut(t);

Back/Anticipatory Easing

Back easing with overshoot for anticipatory motion like a dancer bending before jumping.

/**
 * Anticipatory ease-in with configurable overshoot (default: 1.70158)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeBackIn(t);

/**
 * Configure back ease-in with custom overshoot
 * @param s - overshoot amount
 * @returns new easing function with specified overshoot
 */
easeBackIn.overshoot = function(s) { return easeBackIn; };

/**
 * Anticipatory ease-out with configurable overshoot (default: 1.70158)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeBackOut(t);

/**
 * Configure back ease-out with custom overshoot
 * @param s - overshoot amount
 * @returns new easing function with specified overshoot
 */
easeBackOut.overshoot = function(s) { return easeBackOut; };

/**
 * Symmetric anticipatory easing (alias for easeBackInOut)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeBack(t);

/**
 * Symmetric anticipatory ease-in-out with configurable overshoot (default: 1.70158)
 * @param t - normalized time value (0-1)
 * @returns eased time value
 */
function easeBackInOut(t);

/**
 * Configure back ease-in-out with custom overshoot
 * @param s - overshoot amount
 * @returns new easing function with specified overshoot
 */
easeBackInOut.overshoot = function(s) { return easeBackInOut; };

Elastic Easing

Elastic easing like a rubber band with configurable amplitude and period for oscillating effects.

/**
 * Elastic ease-in with configurable amplitude and period (defaults: 1, 0.3)
 * @param t - normalized time value (0-1)
 * @returns eased time value (may exceed [0,1] range)
 */
function easeElasticIn(t);

/**
 * Configure elastic ease-in with custom amplitude
 * @param a - amplitude value (minimum 1)
 * @returns new easing function with specified amplitude
 */
easeElasticIn.amplitude = function(a) { return easeElasticIn; };

/**
 * Configure elastic ease-in with custom period
 * @param p - period value
 * @returns new easing function with specified period
 */
easeElasticIn.period = function(p) { return easeElasticIn; };

/**
 * Elastic ease-out with configurable amplitude and period (defaults: 1, 0.3)
 * @param t - normalized time value (0-1)
 * @returns eased time value (may exceed [0,1] range)
 */
function easeElasticOut(t);

/**
 * Configure elastic ease-out with custom amplitude
 * @param a - amplitude value (minimum 1)
 * @returns new easing function with specified amplitude
 */
easeElasticOut.amplitude = function(a) { return easeElasticOut; };

/**
 * Configure elastic ease-out with custom period
 * @param p - period value
 * @returns new easing function with specified period
 */
easeElasticOut.period = function(p) { return easeElasticOut; };

/**
 * Elastic ease-out (alias for easeElasticOut)
 * @param t - normalized time value (0-1)
 * @returns eased time value (may exceed [0,1] range)
 */
function easeElastic(t);

/**
 * Symmetric elastic ease-in-out with configurable amplitude and period (defaults: 1, 0.3)
 * @param t - normalized time value (0-1)
 * @returns eased time value (may exceed [0,1] range)
 */
function easeElasticInOut(t);

/**
 * Configure elastic ease-in-out with custom amplitude
 * @param a - amplitude value (minimum 1)
 * @returns new easing function with specified amplitude
 */
easeElasticInOut.amplitude = function(a) { return easeElasticInOut; };

/**
 * Configure elastic ease-in-out with custom period
 * @param p - period value
 * @returns new easing function with specified period
 */
easeElasticInOut.period = function(p) { return easeElasticInOut; };

Usage Examples

Custom Polynomial Easing

import { easePoly } from "d3-ease";

// Create equivalent of linear, quad, and cubic
const linear = easePoly.exponent(1);
const quad = easePoly.exponent(2);
const cubic = easePoly.exponent(3);

// Use in animation
const t = 0.5;
console.log(linear(t)); // 0.5
console.log(quad(t));   // 0.25
console.log(cubic(t));  // 0.125

Custom Elastic Animation

import { easeElastic } from "d3-ease";

// Create custom elastic with specific period
const customElastic = easeElastic.period(0.4);

// Use in animation frame
function animateElement(progress) {
  const easedProgress = customElastic(progress);
  element.style.transform = `translateX(${100 * easedProgress}px)`;
}

Animation Integration

import { easeCubicInOut } from "d3-ease";

function animate(element, startValue, endValue, duration) {
  const startTime = Date.now();
  
  function frame() {
    const elapsed = Date.now() - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const easedProgress = easeCubicInOut(progress);
    
    const currentValue = startValue + (endValue - startValue) * easedProgress;
    element.style.left = currentValue + 'px';
    
    if (progress < 1) {
      requestAnimationFrame(frame);
    }
  }
  
  requestAnimationFrame(frame);
}

docs

index.md

tile.json