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.

For an interactive visualisation of its simple numeric API see the homepage.

Getting started

Install via NPM

$ npm install split-ease --save

import in your ES6 code

import SplitEase from 'split-ease';

or require in your CommonJS code

const SplitEase = require('split-ease);

Include via <script> tag

get in on unpkg

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

or download and include a script link to the UMD version.

<script src="split-ease/dist/split-ease.umd.js"></script>

Backstory

Most strictly-timed (i.e. not simulation-based) animation on the web makes use of interpolation (easing) functions originally popularized by Robert Penner in his 2002 book on programming Flash MX. 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.

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.

Acknowledgements

Robert Penner