https://github.com/jaxgeller/ez.js

Importable easing functions in es6 for tweening
https://github.com/jaxgeller/ez.js

Last synced: 16 days ago
JSON representation

Importable easing functions in es6 for tweening

• Host: GitHub
• URL: https://github.com/jaxgeller/ez.js
• Owner: jaxgeller
• Created: 2015-09-22T02:05:15.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-10-20T15:50:09.000Z (about 9 years ago)
• Last Synced: 2024-04-26T13:02:59.320Z (8 months ago)
• Language: JavaScript
• Homepage:
• Size: 148 KB
• Stars: 47
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### ez.js

Importable easing functions in ES6

[![Build Status](https://travis-ci.org/jaxgeller/ez.js.svg?branch=master)](https://travis-ci.org/jaxgeller/ez.js)

### Install

`npm install ez.js --save`

### Use

Import singular

```javascript

import {easeInCubic} from 'ez.js';

let timeStart;

let diff = 1;

(function ticker(currTime) {

  if (!timeStart) timeStart = currTime;

  let elapsed = currTime - timeStart;

  let tick = easeInCubic(elapsed, timeStart, diff, 1000);

  console.log(tick);

  requestAnimationFrame(ticker);

})();

```

Import all

```javascript

import * as ez from "./ez.js"

for (let key of Object.keys(ez)) {

  alert(ez[key](100, 0, 10, 1000));

}

```

Use as non-ES6

```javascript

// download minified dist file and add it as a script

```

### Using easing functions

Takes four parameters, `t: current time, b: beginning value, c: change in value, d: duration`.

This will output a single number depending on how long the function has been running, this is great in conjunction with `requestAnimationFrame` to produce buttery animations.

Easings from [Robert Penner](http://robertpenner.com/easing_terms_of_use.html)