# rx-ease

> a spring animation operator for rxjs

Latest version **2.0.0** (published 2020-05-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install rx-ease
pnpm add rx-ease
yarn add rx-ease
bun add rx-ease
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2020-05-03 |
| First published | 2018-05-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 21 |
| Author | Gabriel Vergnaud |
| Maintainers | gabrielvergnaud |

## Links

- npm: https://www.npmjs.com/package/rx-ease
- Repository: https://github.com/gvergnaud/rx-ease
- Homepage: https://github.com/gvergnaud/rx-ease#readme
- Issues: https://github.com/gvergnaud/rx-ease/issues
- npm.io page: https://npm.io/package/rx-ease

## Recent versions

- 2.0.0 (latest) — 2020-05-03
- 1.1.1 — 2019-02-19
- 1.1.0 — 2019-02-19
- 0.5.0 — 2019-02-15
- 0.4.0 — 2019-02-15
- 0.3.0 — 2018-11-01
- 0.2.1 — 2018-05-22
- 0.2.0 — 2018-05-16
- 0.1.1 — 2018-05-13
- 0.1.0 — 2018-05-13

## README

# rx-ease

An operator to interpolate the values of your rxjs streams!

- Performant, in most case it should run at **60fps**.
- Emits on **requestAnimationFrame**.
- Works with any kind of data structures (Object, arrays, single values).

## Install

```
npm install rxjs rx-ease
```

## The gist

#### Interpolate a single value
```js
import { interval } from 'rxjs'
import { take, map, startWith } from 'rxjs/operators'
import ease from 'rx-ease'

const draw = x =>
  Array(Math.floor(x))
    .fill('#')
    .join('')

const progress$ = interval(1000).pipe(
  take(1),
  map(() => 100),
  startWith(0),
  ease(120, 18),
  map(draw)
)

progress$.subscribe(progress => console.log(progress))
// will log =>
// #
// ####
// ########
// #############
// #################
// ######################
// ##########################
// ##############################
// ##################################
// ######################################
// #########################################
// ############################################
// ##############################################
// ################################################
// ##################################################
// ####################################################
// #####################################################
// ######################################################
// #######################################################
// ########################################################
// #########################################################
// ##########################################################
// ##########################################################
// ##########################################################
// ##########################################################
```

#### Interpolate several values of an object
```js
import { fromEvent } from 'rxjs'
import { map } from 'rxjs/operators'
import ease from 'rx-ease'

const circle = document.querySelector('.circle')

const position$ = fromEvent(document, 'click').pipe(
  map(e => ({ x: e.clientX, y: e.clientY })),
  ease({
    x: [120, 18],
    y: [120, 18]
  })
)

position$.subscribe(({ x, y }) => {
  circle.style.transform = `translate(${x}px, ${y}px)`
})
```

## Api


#### type Config = [number, number]
Similarly to [react-motion](https://github.com/chenglou/react-motion), rx-ease is a **spring animation** operator. To configure the animation you need to pass a stiffness and a damping value in an array like `[stiffness, damping]` (for example `[120, 18]`).

#### ease :: Config -> number -> Observable number

```js
import { interval } from 'rxjs'
import ease from 'rx-ease'

const easedInterval$ = interval(1000).pipe(
  map(x => x * 100),
  ease([170, 26])
)
```

#### ease :: [Config] -> [number] -> Observable [number]

```js
import { fromEvent } from 'rxjs'
import ease from 'rx-ease'

const easedMousePosition$ = fromEvent(window, 'mousemove').pipe(
  map(e => [e.clientX, e.clientY]),
  ease([
    [170, 26],
    [170, 26],
  ])
)
```

#### ease :: { key: Config } -> { key: number } -> Observable { key: number }

```js
import { fromEvent } from 'rxjs'
import ease from 'rx-ease'

const easedMousePosition$ = fromEvent(window, 'mousemove').pipe(
  map(e => ({
    x: e.clientX,
    y: e.clientY]
  }),
  ease({
    x: [170, 26],
    y: [170, 26],
  })
)
```

#### presets
- **noWobble**: equivalent to passing `[170, 26]`
- **gentle**: equivalent to passing `[120, 14]`
- **wobbly**: equivalent to passing `[180, 12]`
- **stiff**: equivalent to passing `[210, 20]`

```js
import ease, { presets } from 'rx-ease'

interval(1000).pipe(
  map(x * 100),
  ease(...presets.stiff)
)
```

## Credits

This was heavily inspired by @chenglou's [react-motion](https://github.com/chenglou/react-motion).

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