SplitEase.js
The curve with a beginning, middle and end.
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
;
or require
in your CommonJS code
const SplitEase =
<script>
tag
Include via get in on unpkg
or download and include a script link to the UMD version.
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.