0.2.0 • Published 7 years ago
just-curves v0.2.0
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 |