# js-easing-functions

> Javascript easing functions based upon jQuery's easing functions, using Robert Penner's easing equations

Latest version **1.0.3** (published 2018-11-23) · BSD license · 0 weekly downloads

## Install

```sh
npm install js-easing-functions
pnpm add js-easing-functions
yarn add js-easing-functions
bun add js-easing-functions
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2018-11-23 |
| First published | 2017-11-19 |
| Weekly downloads | 0 |
| License | BSD |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 46.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 77 |
| Author | Ben Meyrick |
| Maintainers | bameyrick |
| Keywords | easings, animation |

## Links

- npm: https://www.npmjs.com/package/js-easing-functions
- Repository: https://github.com/bameyrick/js-easing-functions
- Homepage: https://github.com/bameyrick/js-easing-functions#readme
- Issues: https://github.com/bameyrick/js-easing-functions/issues
- npm.io page: https://npm.io/package/js-easing-functions

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.0.3 (latest) — 2018-11-23
- 1.0.2 — 2017-11-21
- 1.0.1 — 2017-11-21
- 1.0.0 — 2017-11-19

## 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
```bash
npm install --save js-easing-functions
```

### yarn
```bash
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
```javascript
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._
```javascript
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.

---
_Source: https://npm.io/package/js-easing-functions · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._