You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

d3-ease

Package Overview
Dependencies
4
Maintainers
2
Versions
32
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

d3-ease

Easing functions for smooth animation.


Version published
Maintainers
2
Created

Package description

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

Readme

Source

d3-ease

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

The easing types in this module implement the ease method, which takes a normalized time t and returns the corresponding “eased” time . Both the normalized time and the eased time are typically in the range [0,1], where 0 represents the start of the animation and 1 represents the end; some easing types, such as elastic, may return eased times slightly outside this range. A good easing type should return 0 if t = 0 and 1 if t = 1. See the easing explorer for a visual demonstration.

These easing types are largely based on work by Robert Penner.

Installing

If you use npm, npm install d3-ease. You can also download the latest release on GitHub. For vanilla HTML in modern browsers, import d3-ease from Skypack:

<script type="module">

import {easeCubic} from "https://cdn.skypack.dev/d3-ease@3";

const e = easeCubic(0.25);

</script>

For legacy environments, you can load d3-ease’s UMD bundle from an npm-based CDN such as jsDelivr; a d3 global is exported:

<script src="https://cdn.jsdelivr.net/npm/d3-ease@3"></script>
<script>

const e = d3.easeCubic(0.25);

</script>

Try d3-ease in your browser.

API Reference

# ease(t)

Given the specified normalized time t, typically in the range [0,1], returns the “eased” time , also typically in [0,1]. 0 represents the start of the animation and 1 represents the end. A good implementation returns 0 if t = 0 and 1 if t = 1. See the easing explorer for a visual demonstration. For example, to apply cubic easing:

const te = d3.easeCubic(t);

Similarly, to apply custom elastic easing:

// Before the animation starts, create your easing function.
const customElastic = d3.easeElastic.period(0.4);

// During the animation, apply the easing function.
const te = customElastic(t);

# d3.easeLinear(t) <>

Linear easing; the identity function; linear(t) returns t.

linear

# d3.easePolyIn(t) <>

Polynomial easing; raises t to the specified exponent. If the exponent is not specified, it defaults to 3, equivalent to cubicIn.

polyIn

# d3.easePolyOut(t) <>

Reverse polynomial easing; equivalent to 1 - polyIn(1 - t). If the exponent is not specified, it defaults to 3, equivalent to cubicOut.

polyOut

# d3.easePoly(t) <>
# d3.easePolyInOut(t) <>

Symmetric polynomial easing; scales polyIn for t in [0, 0.5] and polyOut for t in [0.5, 1]. If the exponent is not specified, it defaults to 3, equivalent to cubic.

polyInOut

# poly.exponent(e) <>

Returns a new polynomial easing with the specified exponent e. For example, to create equivalents of linear, quad, and cubic:

const linear = d3.easePoly.exponent(1);
const quad = d3.easePoly.exponent(2);
const cubic = d3.easePoly.exponent(3);

# d3.easeQuadIn(t) <>

Quadratic easing; equivalent to polyIn.exponent(2).

quadIn

# d3.easeQuadOut(t) <>

Reverse quadratic easing; equivalent to 1 - quadIn(1 - t). Also equivalent to polyOut.exponent(2).

quadOut

# d3.easeQuad(t) <>
# d3.easeQuadInOut(t) <>

Symmetric quadratic easing; scales quadIn for t in [0, 0.5] and quadOut for t in [0.5, 1]. Also equivalent to poly.exponent(2).

quadInOut

# d3.easeCubicIn(t) <>

Cubic easing; equivalent to polyIn.exponent(3).

cubicIn

# d3.easeCubicOut(t) <>

Reverse cubic easing; equivalent to 1 - cubicIn(1 - t). Also equivalent to polyOut.exponent(3).

cubicOut

# d3.easeCubic(t) <>
# d3.easeCubicInOut(t) <>

Symmetric cubic easing; scales cubicIn for t in [0, 0.5] and cubicOut for t in [0.5, 1]. Also equivalent to poly.exponent(3).

cubicInOut

# d3.easeSinIn(t) <>

Sinusoidal easing; returns sin(t).

sinIn

# d3.easeSinOut(t) <>

Reverse sinusoidal easing; equivalent to 1 - sinIn(1 - t).

sinOut

# d3.easeSin(t) <>
# d3.easeSinInOut(t) <>

Symmetric sinusoidal easing; scales sinIn for t in [0, 0.5] and sinOut for t in [0.5, 1].

sinInOut

# d3.easeExpIn(t) <>

Exponential easing; raises 2 to the exponent 10 * (t - 1).

expIn

# d3.easeExpOut(t) <>

Reverse exponential easing; equivalent to 1 - expIn(1 - t).

expOut

# d3.easeExp(t) <>
# d3.easeExpInOut(t) <>

Symmetric exponential easing; scales expIn for t in [0, 0.5] and expOut for t in [0.5, 1].

expInOut

# d3.easeCircleIn(t) <>

Circular easing.

circleIn

# d3.easeCircleOut(t) <>

Reverse circular easing; equivalent to 1 - circleIn(1 - t).

circleOut

# d3.easeCircle(t) <>
# d3.easeCircleInOut(t) <>

Symmetric circular easing; scales circleIn for t in [0, 0.5] and circleOut for t in [0.5, 1].

circleInOut

# d3.easeElasticIn(t) <>

Elastic easing, like a rubber band. The amplitude and period of the oscillation are configurable; if not specified, they default to 1 and 0.3, respectively.

elasticIn

# d3.easeElastic(t) <>
# d3.easeElasticOut(t) <>

Reverse elastic easing; equivalent to 1 - elasticIn(1 - t).

elasticOut

# d3.easeElasticInOut(t) <>

Symmetric elastic easing; scales elasticIn for t in [0, 0.5] and elasticOut for t in [0.5, 1].

elasticInOut

# elastic.amplitude(a) <>

Returns a new elastic easing with the specified amplitude a.

# elastic.period(p) <>

Returns a new elastic easing with the specified period p.

# d3.easeBackIn(t) <>

Anticipatory easing, like a dancer bending his knees before jumping off the floor. The degree of overshoot is configurable; if not specified, it defaults to 1.70158.

backIn

# d3.easeBackOut(t) <>

Reverse anticipatory easing; equivalent to 1 - backIn(1 - t).

backOut

# d3.easeBack(t) <>
# d3.easeBackInOut(t) <>

Symmetric anticipatory easing; scales backIn for t in [0, 0.5] and backOut for t in [0.5, 1].

backInOut

# back.overshoot(s) <>

Returns a new back easing with the specified overshoot s.

# d3.easeBounceIn(t) <>

Bounce easing, like a rubber ball.

bounceIn

# d3.easeBounce(t) <>
# d3.easeBounceOut(t) <>

Reverse bounce easing; equivalent to 1 - bounceIn(1 - t).

bounceOut

# d3.easeBounceInOut(t) <>

Symmetric bounce easing; scales bounceIn for t in [0, 0.5] and bounceOut for t in [0.5, 1].

bounceInOut

Keywords

FAQs

Package last updated on 05 Jun 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc