This library provides convenient methods that generating a transition timing function such as easing or steps.
npm install transition-timingThis library provides convenient methods that generating a transition timing function such as easing or steps.
`` sh`
npm install transition-timing
` js
import { easing } from 'transition-timing';
const ease = easing('ease');
`
` ts`
/**
* Timing function type.
*
* @param {number} t time ratio. from 0 to 1.
* @returns {number} output ratio. from 0 to 1.
*/
type TimingFunction = (t: number) => number;
> This is method that renamed from the bezier-easing.
` ts`
function cubicBezier(mX1: number, mY1: number, mX2: number, mY2: number): TimingFunction;
> This is helper method for cubicBezier.
` ts`
function easing(arg: string|number|[number, number, number, number], ...args: number[]): TimingFunction;
#### Examples
Please see information for keywords for common timing functions
` js
// using same as cubicBezier.
let ease = easing(0.25, 0.1, 0.25, 1);
let easeIn = easing([0.42, 0, 1, 1]);
// also can using by common keywords.
// common keywords: 'linear', 'ease', 'easeIn', 'easeOut' and 'easeInOut'.
let easeOut = easing('easeOut');
`
Please see information for the steps timing functions_class_of_timing_functions)
` ts``
function steps(num: number, direction: 'start'|'end'): TimingFunction;
- transition-timing-function
- cubic bezier curves
- step function
- bezier-easing
- timing-functions