Skip to content
The JavaScript Easing function with a beginning, middle and end
JavaScript CSS Vue HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

SplitEase.js Logo

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="//" 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>


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.


Robert Penner.

You can’t perform that action at this time.