https://github.com/just-animate/just-curves
A library of reusable easing functions
https://github.com/just-animate/just-curves
animation css css-easing-functions curve easing-functions javascript typescript
Last synced: 4 months ago
JSON representation
A library of reusable easing functions
- Host: GitHub
- URL: https://github.com/just-animate/just-curves
- Owner: just-animate
- Created: 2017-01-07T19:55:11.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T18:32:31.000Z (over 3 years ago)
- Last Synced: 2025-08-09T09:27:14.996Z (10 months ago)
- Topics: animation, css, css-easing-functions, curve, easing-functions, javascript, typescript
- Language: TypeScript
- Homepage:
- Size: 106 KB
- Stars: 55
- Watchers: 1
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Just Curves
*Just Curves is a math library for animation and tweening!*
[](https://badge.fury.io/js/just-curves)
[](https://travis-ci.org/just-animate/just-curves)
[](https://www.npmjs.com/package/just-curves)
## 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](https://github.com/just-animate/just-animate), [TweenRex](https://github.com/tweenrex/tweenrex), [nm8](https://github.com/davidkpiano/nm8), [Popmotion](https://github.com/Popmotion/popmotion), [AnimeJS](https://github.com/juliangarnier/anime), [MoJS](https://github.com/legomushroom/mojs), and other animation engines that accept easings in form of ```(offset: number) => number```
> Power this project up with 🌟s, [^ star it please](https://github.com/just-animate/just-curves/stargazers).
## Getting Started
### Setup from CDN
Include this script
```html
```
### Setup for bundling
```bash
npm install just-curves --save
```
## Curve creators
### CSS Function
Creates a curve from a css easing function
**Browser**
```ts
const linear = just.curves.cssFunction('linear');
const ease = just.curves.cssFunction('cubic-bezier(0.25, 0.1, 0.25 0.1)');
```
**Bundled**
```ts
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](https://drafts.csswg.org/css-timing/#cubic-bezier-timing-functions) CSS spec
**Browser**
```ts
const ease = just.curves.cubicBezier(.25, .1, .25, 1);
```
**Bundled**
```ts
import { cubicBezier } from 'just-curves';
const ease = cubicBezier(.25, .1, .25, 1);
```
### Steps
Creates a curve that advances in steps
> Follows [step](https://drafts.csswg.org/css-timing/#step-timing-functions) CSS timing spec
**Browser**
```ts
const stepStart = just.curves.steps(1, 'start');
const stepEnd = just.curves.steps(1, 'end');
```
**Bundled**
```ts
import { steps } from 'just-curves';
const stepStart = steps(1, 'start');
const stepEnd = steps(1, 'end');
```
## Curves made for JavaScript
**Browser**
```ts
just.curves./* curve name here */
```
**Bundled**
```ts
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**
```ts
const curve = just.curves.css./* curve name here */;
```
**Bundled**
```ts
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 |