just-animate / just-curves

A library of reusable easing functions

Just Curves

Just Curves is a math library for animation and tweening!

Why use Just Curves?

• Common easing curves like easeIn, easeOut, easeInQuint for JS and CSS
• Custom eases using cubicBezier(), steps(), and cssFunction()
• Use CSS easing functions from existing code
• Small download size: < 5k minified with no dependencies
• Works with Just Animate, TweenRex, nm8, Popmotion, AnimeJS, MoJS, and other animation engines that accept easings in form of (offset: number) => number

Power this project up with 🌟s, ^ star it please.

Getting Started

Setup from CDN

Include this script

<script src="https://unpkg.com/just-curves/dist/just-curves.min.js"></script>

Setup for bundling

npm install just-curves --save

Curve creators

CSS Function

Creates a curve from a css easing function

Browser

const linear = just.curves.cssFunction('linear');
const ease = just.curves.cssFunction('cubic-bezier(0.25, 0.1, 0.25 0.1)');

Bundled

import { cssFunction } from 'just-curves';

const linear = cssFunction('linear');
const ease = cssFunction('cubic-bezier(0.25, 0.1, 0.25 0.1)');

Cubic Bezier

Creates a cubic-bezier curve using 4 numbers

Follows cubic-bezier CSS spec

Browser

const ease = just.curves.cubicBezier(.25, .1, .25, 1);

Bundled

import { cubicBezier } from 'just-curves';

const ease = cubicBezier(.25, .1, .25, 1);

Steps

Creates a curve that advances in steps

Follows step CSS timing spec

Browser

const stepStart = just.curves.steps(1, 'start');
const stepEnd   = just.curves.steps(1, 'end');

Bundled

import { steps } from 'just-curves';

const stepStart = steps(1, 'start');
const stepEnd   = steps(1, 'end');

Curves made for JavaScript

Browser

just.curves./* curve name here */

Bundled

import { /* curve name here */ } from 'just-curves';

The chart below shows all of the easings ready for use in JavaScript as is except for linear.

Type	In	Out	In-Out
back	easeInBack	easeOutBack	easeInOutBack
bounce	easeInBounce	easeOutBounce	easeInOutBounce
circ	easeInCirc	easeOutCirc	easeInOutCirc
cubic	easeInCubic	easeOutCubic	easeInOutCubic
elastic	easeInElastic	easeOutElastic	easeInOutElastic
expo	easeInExpo	easeOutExpo	easeInOutExpo
quad	easeInQuad	easeOutQuad	easeInOutQuad
quart	easeInQuart	easeOutQuart	easeInOutQuart
quint	easeInQuint	easeOutQuint	easeInOutQuint
sine	easeInSine	easeOutSine	easeInOutSine
step	stepStart	stepEnd

Curves made for in CSS

Browser

const curve = just.curves.css./* curve name here */;

Bundled

import { css } from 'just-curves';

const curve = css./* curve name here */;

The chart below shows all of the easings ready for use in CSS as is except for linear.

Type	In	Out	In-Out
back	easeInBack	easeOutBack	easeInOutBack
bounce	easeInBounce	easeOutBounce	easeInOutBounce
circ	easeInCirc	easeOutCirc	easeInOutCirc
cubic	easeInCubic	easeOutCubic	easeInOutCubic
ease	easeIn	easeOut	easeInOut
expo	easeInExpo	easeOutExpo	easeInOutExpo
quad	easeInQuad	easeOutQuad	easeInOutQuad
quart	easeInQuart	easeOutQuart	easeInOutQuart
quint	easeInQuint	easeOutQuint	easeInOutQuint
sine	easeInSine	easeOutSine	easeInOutSine
special			elegantSlowStartEnd
step	stepStart	stepEnd