Easing


A collection of animation easing functions in Javascript's ES6 module format. Easing functions specify the rate of change of a parameter over time. Learn more about easing here.

Install

Easing is an ES module. If your runtime environment does not support ES modules, you'll need a transpiler (Babel is a nice one).

If you're using NPM, you can install Easing with the following command:

``
$ npm install @degjs/easing
`

Usage


`js
import { easeInOutCubic } from '@degjs/easing';

// animate a value from 100 to 300 with ease-in-out easing over the course of 1 second
let currentIteration = 0,
totalIterations = 60,
startValue = 100,
changeInValue = 200,
easedValue;

window.requestAnimationFrame(onAnimationFrame);

function onAnimationFrame() {
if(currentIteration < totalIterations) {
currentIteration++;
easedValue = easeInOutCubic(currentIteration, startValue, changeInValue, totalIterations);
}
}

`

Methods


All methods take the same four parameters, defined below:
#### currentIteration
Type: Number
The current iteration. Think of this in terms of animation frames or seconds/milliseconds.

#### startValue
Type: Number
The start value. This is the initial state of the value that will be animated.

#### changeInValue
Type: Number`
The amount of change in the value over the duration of the animation.

#### totalIterations
The duration of the animation. Think of this in terms of animation frames or seconds/milliseconds.

$3

A linear rate of change with no easing.

$3

Starts quickly and ends slowly.

$3

Starts slowly and ends quickly.

$3

Starts and ends slowly.