https://github.com/gre/ipo
easing library allowing to describe complex easings in JSON
https://github.com/gre/ipo
Last synced: 9 months ago
JSON representation
easing library allowing to describe complex easings in JSON
- Host: GitHub
- URL: https://github.com/gre/ipo
- Owner: gre
- Created: 2015-08-03T01:23:18.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2016-07-02T09:28:20.000Z (almost 10 years ago)
- Last Synced: 2025-06-28T12:44:33.645Z (12 months ago)
- Language: JavaScript
- Size: 48.8 KB
- Stars: 56
- Watchers: 4
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
IPO
===
*IPO*, short for *InterPOlation*, is an easing library allowing to describe complex easings in JSON (multiple point over time can be placed).
> Inspired from Blender's IPO idea, it is made for animating a value in many ways over time.
Screenshot running [example.js](./example.js):
```json
[
{ "p": [100, 100], "upper": [10, 20] },
{ "p": [200, 190], "lower": [-10, 0], "upper": [10, 0] },
{ "p": [250, 100], "upper": [30, 0] },
{ "p": [280, 140] },
{ "p": [350, 160] },
{ "p": [400, 50], "lower": [-50, 40], "upper": [100, 0] },
{ "p": [600, 250], "lower": [-140, 0], "upper": [ 40, -40 ] }
]
```
*(the white dots are the interpolated values, the red point are the control points and their handles, the yellow curve is the SVG continuous curve.)*
API
===
```js
var IPO = require("ipo");
var ipo = IPO([ ...points... ]);
ipo(42); // Get the curve Y value at X=42
```
### Format
`points` is:
- an Array of Point, where each Point is an object with
- a position `p` which is a `[x, y]`
- (option) `lower`: relative position of a bezier handle for the lower curve interpolation
- (option) `upper`: same for the upper curve interpolation.
Under the hood
==============
- [`bezier-easing`](https://github.com/gre/bezier-easing) is used to perform bezier interpolation. It provides efficient computation with various optimization techniques.