TypeScript Easing Functions

0.2.0 · active · verified Sun Apr 19

ts-easing is a lightweight, zero-dependency collection of standard easing functions written entirely in TypeScript. Currently at version 0.2.0, it provides common easing curves like quadratic, cubic, sinusoidal, exponential, and circular, among others. The library is designed for simplicity, accepting a single normalized input `t` in the range `[0, 1]` and returning an eased value also in `[0, 1]`. Due to its stable and self-contained nature, it likely has a very slow or infrequent release cadence, primarily for bug fixes or minor additions rather than frequent feature releases. Its key differentiator is its minimal footprint, strong TypeScript typing, and adherence to the standard easing function interface, making it suitable for animations and transitions in both browser and Node.js environments without external dependencies. It aims to be a straightforward utility for developers needing reliable easing logic for animation or UI interactions.

Common errors

```
TypeError: easing.quadratic is not a function
```
cause Attempting to access an easing function (e.g., `quadratic`) directly when the library exports them as properties of a single `easing` object.

fix Ensure you are destructuring the `easing` object correctly, or accessing functions as properties: `import { easing } from 'ts-easing'; console.log(easing.quadratic(0.5));`
```
Cannot find module 'ts-easing'
```
cause The package has not been installed or there is a typo in the import path.

fix Install the package using `npm install ts-easing` or `yarn add ts-easing`. Verify the import path is exactly `ts-easing`.

Warnings

gotcha Easing functions are designed for input values `t` strictly within the `[0, 1]` range. Providing values outside this range may lead to undefined or unexpected mathematical results, though typically still a number.
Fix: Ensure that the input parameter `t` is always normalized to a value between 0 and 1 before passing it to any easing function.

Install

npm install ts-easing npm
yarn add ts-easing yarn
pnpm add ts-easing pnpm

Imports

easing
wrong:
```
import easing from 'ts-easing';
// OR
import { quadratic } from 'ts-easing';
```
correct:
```
import { easing } from 'ts-easing';
```
The library exports a single named object `easing` which contains all the individual easing functions (e.g., `easing.quadratic`). Individual functions are not directly exported from the top-level module.
easing (CommonJS)
```
const { easing } = require('ts-easing');
```
For CommonJS environments, destructure the `easing` object from the module export.
EasingFunction type
```
type EasingFunction = (t: number) => number;
```
While `ts-easing` ships types, the basic type for its functions is a simple `(t: number) => number`, which can be defined directly or inferred. No specific named type like `EasingFunction` is explicitly exported from the library.

Quickstart

Demonstrates importing the `easing` object and using several common easing functions (quadratic, cubic, exponential, sine) at various input `t` values from 0 to 1, showing their output.

import { easing } from 'ts-easing';

// Demonstrating various easing functions at different progress points
const testPoints = [0, 0.25, 0.5, 0.75, 1];

console.log("--- Easing Function Outputs ---");

console.log("\nQuadratic Ease (ease.quadratic):");
testPoints.forEach(t => {
  const easedValue = easing.quadratic(t);
  console.log(`t=${t.toFixed(2)} -> ${easedValue.toFixed(4)}`);
});

console.log("\nCubic Ease (ease.cubic): ");
testPoints.forEach(t => {
  const easedValue = easing.cubic(t);
  console.log(`t=${t.toFixed(2)} -> ${easedValue.toFixed(4)}`);
});

console.log("\nExponential Ease (ease.exponential): ");
testPoints.forEach(t => {
  const easedValue = easing.exponential(t);
  console.log(`t=${t.toFixed(2)} -> ${easedValue.toFixed(4)}`);
});

console.log("\nSine Ease (ease.sine): ");
testPoints.forEach(t => {
  const easedValue = easing.sine(t);
  console.log(`t=${t.toFixed(2)} -> ${easedValue.toFixed(4)}`);
});

// In a real application, these functions would be used inside an animation loop
// For example, to calculate an animated property based on time progress `t`.

view raw JSON →