Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
web
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

SplitEase.js Logo
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.

SplitEase.js Logo

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.