transition-timing

Transition Timing Functions

This library provides convenient methods that generating a transition timing function such as easing or steps.

Installation

npm install transition-timing

import { easing } from 'transition-timing';

const ease = easing('ease');

Usage

TimingFunction

/**
 * 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;

cubicBezier

This is method that renamed from the bezier-easing.

function cubicBezier(mX1: number, mY1: number, mX2: number, mY2: number): TimingFunction;

easing

This is helper method for cubicBezier.

function easing(arg: string|number|[number, number, number, number], ...args: number[]): TimingFunction;

Examples

Please see information for keywords for common timing functions

// 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');

steps

Please see information for the steps timing functions

function steps(num: number, direction: 'start'|'end'): TimingFunction;

References

• transition-timing-function
• cubic bezier curves
• step function
• bezier-easing
• timing-functions

License

The MIT License