<commit_before># React-Motion

[![npm version](https://badge.fury.io/js/react-motion.svg)](https://www.npmjs.com/package/react-motion)
[![Bower version](https://badge.fury.io/bo/react-motion.svg)](http://badge.fury.io/bo/react-motion)
[![react-motion channel on slack](https://img.shields.io/badge/slack-react--motion%40reactiflux-61DAAA.svg?style=flat)](https://reactiflux.slack.com/messages/react-motion/)

```js
<Spring defaultValue={{val: 0}} endValue={{val: 10}}>
  {interpolated => <div>{interpolated.val}</div>}
</Spring>
```

Animate a counter from `0` `10`. For more advanced usage, see [below](#presets).

Npm:
`npm install react-motion`

Bower:
`bower install react-motion`

1998 Script Tag:
`<script src="path/to/react-motion/build/react-motion.js"></script>`
(Module exposed as `ReactMotion`)

Or build it yourself from the repo: `git clone https://github.com/chenglou/react-motion.git && npm i && npm run prerelease`

**For React-native**, instead of `require('react-motion')`, do `require('react-motion/native')`.

[Check](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo0/index.html) [Out](https://cdn.rawgit.com/chenglou/react-motion/6d4379f7d3a4677f298c64f85794b422a53c916c/demos/demo1/index.html) [All](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo2/index.html) [The](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo3/index.html) [Cool](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo4/index.html) [Demos](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo5/index.html) [Here](https://cdn.rawgit.com/chenglou/react-motion/932d7b2fc0797d4ca8251e8fc4ef3457cd33ff37/demos/demo7/index.html)!

## What does this library try to solve?

[My React-Europe talk](https://www.youtube.com/watch?v=1tavDv5hXpo)

For 95% of use-cases of animating components, we don't have to resort to using hard-coded easing curves and duration. Set up a stiffness and damping for your UI element, and let the magic of physics take care of the rest. This way, you don't have to worry about the more petty questions such as "what if the item's currently animating and is a position `x`? How do I adjust my time and curve?". It also greatly simplifies an animation API since there's really not that much to set up.

This library also provides an alternative, more powerful API for React's `TransitionGroup`.

## API

### Sample Usage<commit_msg>Put demo 8 (framer cards) in readme<commit_after># React-Motion

[![npm version](https://badge.fury.io/js/react-motion.svg)](https://www.npmjs.com/package/react-motion)
[![Bower version](https://badge.fury.io/bo/react-motion.svg)](http://badge.fury.io/bo/react-motion)
[![react-motion channel on slack](https://img.shields.io/badge/slack-react--motion%40reactiflux-61DAAA.svg?style=flat)](https://reactiflux.slack.com/messages/react-motion/)

```js
<Spring defaultValue={{val: 0}} endValue={{val: 10}}>
  {interpolated => <div>{interpolated.val}</div>}
</Spring>
```

Animate a counter from `0` `10`. For more advanced usage, see [below](#presets).

Npm:
`npm install react-motion`

Bower:
`bower install react-motion`

1998 Script Tag:
`<script src="path/to/react-motion/build/react-motion.js"></script>`
(Module exposed as `ReactMotion`)

Or build it yourself from the repo: `git clone https://github.com/chenglou/react-motion.git && npm i && npm run prerelease`

**For React-native**, instead of `require('react-motion')`, do `require('react-motion/native')`.

[Go](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo0/index.html) [Check](https://cdn.rawgit.com/chenglou/react-motion/6d4379f7d3a4677f298c64f85794b422a53c916c/demos/demo1/index.html) [Out](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo2/index.html) [All](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo3/index.html) [The](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo4/index.html) [Cool](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo5/index.html) [Demos](https://cdn.rawgit.com/chenglou/react-motion/932d7b2fc0797d4ca8251e8fc4ef3457cd33ff37/demos/demo7/index.html) [Here](https://cdn.rawgit.com/chenglou/react-motion/46d43c86f647d0daa1fb24df095c83e1b4a61fc8/demos/demo8/index.html)!

## What does this library try to solve?

[My React-Europe talk](https://www.youtube.com/watch?v=1tavDv5hXpo)

For 95% of use-cases of animating components, we don't have to resort to using hard-coded easing curves and duration. Set up a stiffness and damping for your UI element, and let the magic of physics take care of the rest. This way, you don't have to worry about the more petty questions such as "what if the item's currently animating and is a position `x`? How do I adjust my time and curve?". It also greatly simplifies an animation API since there's really not that much to set up.

This library also provides an alternative, more powerful API for React's `TransitionGroup`.

## API

### Sample Usage
{'fraction_non_alphanumeric': 0.14431624739928126, 'fraction_numerical': 0.08341214299224513, 'mean_word_length': 5.6265664160401005, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 17, 'https://': 29, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5023289', 'n_tokens_mistral': 2281, 'n_tokens_neox': 1971, 'n_words': 388}