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 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 |