easing-coordinates

Easing Coordinates

Utility to turn steps and cubic-bezier single-transition-timing-functions into an array of "low-poly" xy-coordinates.

Usage

import { easingCoordinates } from 'easing-coordinates'

easingCoordinates('cubic-bezier(0.5, 0, 0.5, 1)')
/* =>
[
  { x: 0, y: 0 },
  { x: 0.136, y: 0.028 },
  { x: 0.248, y: 0.104 },
  { x: 0.342, y: 0.216 },
  { x: 0.424, y: 0.352 },
  { x: 0.5, y: 0.5 },
  { x: 0.576, y: 0.648 },
  { x: 0.658, y: 0.784 },
  { x: 0.752, y: 0.896 },
  { x: 0.864, y: 0.972 },
  { x: 1, y: 1 },
]
*/

easingCoordinates('steps(4)')
/* =>
[
  { x: 0, y: 0 },
  { x: 0.25, y: 0 },
  { x: 0.25, y: 0.25 },
  { x: 0.5, y: 0.25 },
  { x: 0.5, y: 0.5 },
  { x: 0.75, y: 0.5 },
  { x: 0.75, y: 0.75 },
  { x: 1, y: 0.75 },
]
*/

Use stepsCoordinates and cubicCoordinates methods directly depending on your data:

import { cubicCoordinates, easingCoordinates, stepsCoordinates } from 'easing-coordinates'

cubicCoordinates(0.42, 0, 1, 1) === easingCoordinates('cubic-bezier(0.42, 0, 1, 1)')
stepsCoordinates(4, 'skip-end') === easingCoordinates('steps(4, skip-end)')

Increase polySteps (default = 10, min = 2) to get a "higer-poly" version of your cubic-bezier functions.

interface ICoordinate {
  x: number
  y: number
}

function easingCoordinates(easingFunction: string, polySteps?: number): ICoordinate[]

function stepsCoordinates(steps: number, skip = 'skip-end'): ICoordinate[]

function cubicCoordinates(
  x1: number,
  y1: number,
  x2: number,
  y2: number,
  polySteps = 10
): ICoordinate[]

Build

(See package.json for more scripts)

# Checkout and then
npm install

# Compile and watch the .ts files
npm run watch

# Run test
npm run test