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
Setup for bundling
npm install just-curves --save
Curve creators
CSS Function
Creates a curve from a css easing function
Browser
;;
Bundled
; ;;
Cubic Bezier
Creates a cubic-bezier curve using 4 numbers
Follows cubic-bezier CSS spec
Browser
;
Bundled
; ;
Steps
Creates a curve that advances in steps
Follows step CSS timing spec
Browser
;;
Bundled
; ;;
Curves made for JavaScript
Browser
just.curves./* curve name here */
Bundled
;
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
;
Bundled
; ;
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 |