0.0.6 • Published 4 years ago
@juliendargelos/easings v0.0.6
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