# react-tween-state

> React animation.

Latest version **0.1.5** (published 2016-04-28) · BSD license · 0 weekly downloads

## Install

```sh
npm install react-tween-state
pnpm add react-tween-state
yarn add react-tween-state
bun add react-tween-state
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2016-04-28 |
| First published | 2014-07-15 |
| Weekly downloads | 0 |
| License | BSD |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1733 |
| Author | Cheng Lou |
| Maintainers | chenglou |
| Keywords | react, animation, tween, transition, state, interactive, mixin, interpolation |

## Links

- npm: https://www.npmjs.com/package/react-tween-state
- Repository: https://github.com/chenglou/react-tween-state
- Issues: https://github.com/chenglou/react-tween-state/issues
- npm.io page: https://npm.io/package/react-tween-state

## Dependencies (2)

- [raf](https://npm.io/package/raf.md) ^3.1.0
- [tween-functions](https://npm.io/package/tween-functions.md) ^1.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.5 (latest) — 2016-04-28
- 0.1.4 — 2015-11-21
- 0.1.3 — 2015-07-04
- 0.1.2 — 2015-07-04
- 0.1.1 — 2015-06-22
- 0.1.0 — 2015-06-22
- 0.0.5 — 2015-03-17
- 0.0.4 — 2014-11-14
- 0.0.3 — 2014-09-03
- 0.0.2 — 2014-07-26
- 0.0.1 — 2014-07-15
- 0.0.0 — 2014-07-15

## README

# [React](http://facebook.github.io/react/) Tween State

The equivalent of React's `this.setState`, but for animated tweens: `this.tweenState`.

[Live demo](https://rawgit.com/chenglou/react-tween-state/master/examples/index.html) and [source](https://github.com/chenglou/react-tween-state/tree/master/examples).

Npm:
```sh
npm install react-tween-state
```

Bower:
```sh
bower install react-tween-state
```

## API

Example usage:

```js
var tweenState = require('react-tween-state');
var React = require('react');

var App = React.createClass({
  mixins: [tweenState.Mixin],
  getInitialState: function() {
    return {left: 0};
  },
  handleClick: function() {
    this.tweenState('left', {
      easing: tweenState.easingTypes.easeInOutQuad,
      duration: 500,
      endValue: this.state.left === 0 ? 400 : 0
    });
  },
  render: function() {
    var style = {
      position: 'absolute',
      width: 50,
      height: 50,
      backgroundColor: 'lightblue',
      left: this.getTweeningValue('left')
    };
    return <div style={style} onClick={this.handleClick} />;
  }
});
```

The library exports `Mixin`, `easingTypes` and `stackBehavior`.

#### `this.tweenState(path: String | Array<String>, configuration: Object)`

This first calls `setState` **and puts your fields straight to their final value**. Under the hood, it creates a layer that interpolates from the old value to the new. You can retrieve that tweening value using `getTweeningValue` below.

`path` is the name of the state field you want to tween. If it's deeply nested, e.g. to animate `c` in {a: {b: {c: 1}}}, provide the path as `['a', 'b', 'c']`

`configuration` is of the following format:

```js
{
  easing: easingFunction,
  duration: timeInMilliseconds,
  delay: timeInMilliseconds,
  beginValue: aNumber,
  endValue: aNumber,
  onEnd: endCallback,
  stackBehavior: behaviorOption
}
```

  - `easing` (default: `easingTypes.easeInOutQuad`): the interpolation function used. react-tween-state provides [frequently used interpolation](https://github.com/chenglou/tween-functions/blob/master/index.js) (exposed under `easingTypes`). To plug in your own, the function signature is: `(currentTime: Number, beginValue: Number, endValue: Number, totalDuration: Number): Number`.
  - `duration` (default: `300`).
  - `delay` (default: `0`). *
  - `beginValue` (default: the current value of the state field).
  - `endValue`.
  - `onEnd`: the callback to trigger when the animation's done. **
  - `stackBehavior` (default: `stackBehavior.ADDITIVE`). Subsequent tween to the same state value will be stacked (added together). This gives a smooth tween effect that is iOS 8's new default. [This blog post](http://ronnqvi.st/multiple-animations/) describes it well. The other option is `stackBehavior.DESTRUCTIVE`, which replaces all current animations of that state value by this new one.

\* For a destructive animation, starting the next one with a delay still immediately kills the previous tween. If that's not your intention, try `setTimeout` or additive animation. `DESTRUCTIVE` + `duration` 0 effectively cancels all in-flight animations, **skipping the easing function**.

\*\* For an additive animation, since the tweens stack and never get destroyed, the end callback is effectively fired at the end of `duration`.

#### `this.getTweeningValue(path: String | Array<String>)`
Get the current tweening value of the state field. Typically used in `render`.

## License
BSD.

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