js-easing-functions
v1.0.3
Published
Javascript easing functions based upon jQuery's easing functions, using Robert Penner's easing equations
Downloads
9,898
Readme
JS Easing Functions
Easing functions based upon jQuery's easing functions, using Robert Penner's easing equations.
Install
You can install via npm or yarn
npm
npm install --save js-easing-functions
yarn
yarn add js-easing-functions
Usage
Available easing functions
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInSine
- easeOutSine
- easeInOutSine
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInElastic
- easeOutElastic
- easeInOutElastic
- easeInBack
- easeOutBack
- easeInOutBack
- easeInBounce
- easeOutBounce
- easeInOutBounce
These functions can be visualised at http://easings.net
Importing
You can import the easing functions you want using ES6 imports
import { easeInOutBack } from 'js-easing-functions';
Example use
Note: this is a rough function to give you an idea of how to use an easing function. Your implementation will probably need more checks to ensure the final value at the end of the animation is the one you specified.
import { easeInOutBack } from 'js-easing-functions';
const elemToAnimate = document.querySelector('.MyElem');
const duration = 2000;
const startPosition = 0;
const endPosition = 100;
let startTime;
function tick() {
const elapsed = Date.now() - startTime;
this.elemToAnimate.transform = `translateY(${easeInOutBack(elapsed, startPosition, endPosition, duration)}px)`;
if (elapsed < duration)
requestAnimationFrame(tick);
}
}
function animate() {
startTime = Date.now();
tick();
}
animate();
Notes
More info on easing can be found at Robert Penner's website: http://robertpenner.com/easing
If anyone can tell me what the s parameter in the easeInBack, easeOutBack, and easeInOutBack functions represent please let me know and I'll rename the symbols.