# just-curves

> A library of reusuable easing functions

Latest version **0.2.0** (published 2017-09-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install just-curves
pnpm add just-curves
yarn add just-curves
bun add just-curves
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2017-09-22 |
| First published | 2017-01-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 55 |
| Author | Christopher Wallis |
| Maintainers | notoriousb1t |

## Links

- npm: https://www.npmjs.com/package/just-curves
- Repository: https://github.com/just-animate/just-curves
- Homepage: https://github.com/just-animate/just-curves#readme
- Issues: https://github.com/just-animate/just-curves/issues
- npm.io page: https://npm.io/package/just-curves

## Recent versions

- 0.2.0 (latest) — 2017-09-22
- 0.1.1 — 2017-06-24
- 0.1.0 — 2017-02-07
- 0.0.8 — 2017-01-29
- 0.0.7 — 2017-01-29
- 0.0.6 — 2017-01-22
- 0.0.5 — 2017-01-14
- 0.0.4 — 2017-01-12
- 0.0.3 — 2017-01-11
- 0.0.2 — 2017-01-11
- 0.0.1 — 2017-01-10
- 0.0.0 — 2017-01-10

## README

# Just Curves

*Just Curves is a math library for animation and tweening!*

[![npm version](https://badge.fury.io/js/just-curves.svg)](https://badge.fury.io/js/just-curves)
[![Build Status](https://travis-ci.org/just-animate/just-curves.svg?branch=master)](https://travis-ci.org/just-animate/just-curves)
[![Downloads](https://img.shields.io/npm/dm/just-curves.svg)](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 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](https://github.com/just-animate/just-curves/stargazers).

## Getting Started

### Setup from CDN
Include this script
```html
<script src="https://unpkg.com/just-curves/dist/just-curves.min.js"></script>
```

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

---
_Source: https://npm.io/package/just-curves · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._