https://github.com/lunelson/split-ease

The JavaScript Easing function with a beginning, middle and end
https://github.com/lunelson/split-ease

algorithm animation ease easing equation interpolation javascript penner

Last synced: 2 months ago
JSON representation

The JavaScript Easing function with a beginning, middle and end

• Host: GitHub
• URL: https://github.com/lunelson/split-ease
• Owner: lunelson
• License: bsd-3-clause
• Created: 2017-12-21T09:39:37.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2021-12-23T13:36:01.000Z (about 3 years ago)
• Last Synced: 2024-11-20T05:30:35.990Z (2 months ago)
• Topics: algorithm, animation, ease, easing, equation, interpolation, javascript, penner
• Language: JavaScript
• Homepage: https://split-ease.js.org
• Size: 29.9 MB
• Stars: 62
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  

  


  SplitEase.js



The curve with a beginning, middle and end.




  Getting started | 

  Backstory



SplitEase.js is a JavaScript function which offers animators and creative coders a means to compose separately timed variable __acceleration__, __constant-speed__ and __deceleration__ segments in a single continous interpolation. It weighs less than 1k.

To try the following __interactive visualisation__ of its simple numeric API [see the homepage](https://split-ease.js.org).



  

    

  



## Getting started

### Install via NPM

```bash

$ npm install split-ease --save

```

`import` in your ES6 code

```js

import SplitEase from 'split-ease';

```

or `require` in your CommonJS code

```js

const SplitEase = require('split-ease);

```

### Include via `` tag

get in on unpkg

```html

<script src="//unpkg.com/split-ease" charset="utf-8">

```

or [download](releases/latest) and include a script link to the UMD version.

```html

```

## Backstory

Most strictly-timed (i.e. not simulation-based) animation on the web makes use of interpolation (easing) functions originally popularized by [Robert Penner](http://robertpenner.com/easing/) in his [2002 book on programming Flash MX](http://robertpenner.com/profmx/). This book proposed 10 curve-types (Sine, Quad, Cubic, Quart, Quint, Exp, Back, Circ, Elastic, Bounce) times 3 variations (easeIn, easeOut and easeInOut), to offer [30 different patterns of movement](https://easings.net/en).

SplitEase takes the most common of these functions—the Sine and Power (Quad, Cubic, Quart, Quint) curves—and composes their underlying maths in a way that makes their ease-in/-out/-in-out proportions and their power curvature continuously independently variable.

Feedback or questions? [Ping me](https://twitter.com/lunelson).

## Acknowledgements

[Robert Penner](http://robertpenner.com/easing/).