easings

Easing functions in TypeScript.

Demo (relies on css paint api so you should use Google Chrome for now).

Install

npm install @juliendargelos/easings --save

Usage

Basic

All easing functions take a number in range [0..1] and return the eased number.

import { cubic } from '@juliendargelos/easings'

cubic(0.1)     // in out
cubic.in(0.2)  // in
cubic.out(0.3) // out

You can access easing functions by their name which follows the same pattern as above.

import { Easings } from '@juliendargelos/easings'

Easings['exponential'](0.1)
Easings['exponential.in'](0.2)
Easings['exponential.out'](0.3)

Parameterized easings

Parameterized easings have an extra with() method that generate a new easing function based on parameters. Other easings do not have the with() method (would be pointless), see Available easings.

import { elastic } from '@juliendargelos/easings'

// Use default parameterss
elastic(0.1)
elastic.in(0.2)
elastic.out(0.3)

// Use custom parameters (creates a new easing function)
const customElastic = elastic.with({ amplitude: 0.8, period: 0.4 })
const customElasticIn = elastic.in.with({ amplitude: 0.8, period: 0.4 })
const customElasticOut = elastic.out.with({ amplitude: 0.8, period: 0.4 })

customElastic(0.1)
customElasticIn(0.2)
customElasticOut(0.3)

Available easings

| Name | Parameters (default values) | |--------------------------|---------------------------------| | linear | | | quadratic[.in\|.out] | | | cubic[.in\|.out] | | | quartic[.in\|.out] | | | quintic[.in\|.out] | | | circular[.in\|.out] | | | sinusoidal[.in\|.out] | | | bounce[.in\|.out] | | | exponential[.in\|.out] | { order: 10 } | | back[.in\|.out] | { overshoot: 1.70158 } | | elastic[.in\|.out] | { amplitude: 1, period: 0.3 } |

Types

The library exports basic types you might find useful if you want to expose easing options in your own library:

import { EasingName, EasingFunction } from '@juliendargelos/easing'

// EasingName represents all string names from the above list ('cubic', 'cubic.in', ...)
// EasingFunction is an alias for (t: number) => number