🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-motion

Package Overview
Dependencies
Maintainers
2
Versions
27
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-motion - npm Package Compare versions

Comparing version

0.4.2
to
0.4.3

AUTHORS

2

bower.json
{
"name": "react-motion",
"version": "0.4.2",
"version": "0.4.3",
"homepage": "https://github.com/chenglou/react-motion",

@@ -5,0 +5,0 @@ "authors": [

25

build/react-motion.js

@@ -578,14 +578,14 @@ (function webpackUniversalModuleDefinition(root, factory) {

'use strict';
/* WEBPACK VAR INJECTION */(function(global) {'use strict';
var now = __webpack_require__(5),
global = typeof window === 'undefined' ? {} : window,
root = typeof window === 'undefined' ? global : window,
vendors = ['moz', 'webkit'],
suffix = 'AnimationFrame',
raf = global['request' + suffix],
caf = global['cancel' + suffix] || global['cancelRequest' + suffix];
raf = root['request' + suffix],
caf = root['cancel' + suffix] || root['cancelRequest' + suffix];
for (var i = 0; i < vendors.length && !raf; i++) {
raf = global[vendors[i] + 'Request' + suffix];
caf = global[vendors[i] + 'Cancel' + suffix] || global[vendors[i] + 'CancelRequest' + suffix];
for (var i = 0; !raf && i < vendors.length; i++) {
raf = root[vendors[i] + 'Request' + suffix];
caf = root[vendors[i] + 'Cancel' + suffix] || root[vendors[i] + 'CancelRequest' + suffix];
}

@@ -645,7 +645,12 @@

// to the native rAF function
return raf.call(global, fn);
return raf.call(root, fn);
};
module.exports.cancel = function () {
caf.apply(global, arguments);
caf.apply(root, arguments);
};
module.exports.polyfill = function () {
root.requestAnimationFrame = raf;
root.cancelAnimationFrame = caf;
};
/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))

@@ -1166,3 +1171,3 @@ /***/ },

var destStyles = typeof styles === 'function' ? styles() : styles;
var destStyles = typeof styles === 'function' ? styles(defaultStyles) : styles;

@@ -1169,0 +1174,0 @@ // this is special. for the first time around, we don't have a comparison

4

HISTORY.md

@@ -6,2 +6,6 @@ Legend:

### 0.4.3 (April 19th 2016)
- [F] `TransitionMotion` `styles` function not being passed `defaultStyles` value upon first call. #296
- [I] `onRest` callback for `Motion`!
### 0.4.2 (January 30th 2016)

@@ -8,0 +12,0 @@ - [F] `TransitionMotion` keys merging bug. #264

2

lib/TransitionMotion.js

@@ -202,3 +202,3 @@ 'use strict';

var destStyles = typeof styles === 'function' ? styles() : styles;
var destStyles = typeof styles === 'function' ? styles(defaultStyles) : styles;

@@ -205,0 +205,0 @@ // this is special. for the first time around, we don't have a comparison

9

lib/Types.js
// === basic reused types ===
// type of the second parameter of `spring(val, config)` all fields are optional
"use strict";
'use strict';
// TODO: add onRest. Not public yet
// the object returned by `spring(value, yourConfig)`. For internal usage only!
// the object returned by `spring(value, yourConfig)`. Used internally only!
// TODO: add onRest. Not public yet
// your typical style object given in props. Maps to a number or a spring config

@@ -14,0 +9,0 @@

10

package.json
{
"name": "react-motion",
"version": "0.4.2",
"version": "0.4.3",
"description": "A spring that solves your animation problems.",
"main": "lib/react-motion.js",
"peerDependencies": {
"react": ">=0.13.2 || ^0.14"
"react": ">=0.13.2 || ^0.14 || ^15.0.0"
},

@@ -32,6 +32,6 @@ "devDependencies": {

"phantomjs": "^1.9.17",
"react": ">=0.14.3",
"react-addons-test-utils": "^0.14.6",
"react": ">=15.0.1",
"react-addons-test-utils": "^15.0.1",
"react-codemirror": ">=0.1.2",
"react-dom": ">=0.14.3",
"react-dom": ">=15.0.1",
"react-hot-loader": "^1.2.8",

@@ -38,0 +38,0 @@ "style-loader": "^0.12.4",

49

README.md

@@ -41,18 +41,4 @@ # React-Motion

**For React-native**: previous react-motion v0.3.* supported a dedicated build for RN, which has now been made obsolete since RN v0.18. This library should Just Work under the new React-Native 0.18+.
**Works with React-Native v0.18+**.
### Try things yourself
```sh
git clone https://github.com/chenglou/react-motion.git
cd react-motion
npm install
```
To try the demos locally:
- with hot reloading (**slow, development version**): run `npm start`.
- Without hot reloading (**faster, production version**): run `npm run build-demos` and open the static `demos/demo_name/index.html` file directly. **Don't forget to use production mode when testing your animation's performance**!
To build the repo yourself: `npm run prerelease`.
### Demos

@@ -70,2 +56,14 @@ - [Simple Transition](http://chenglou.github.io/react-motion/demos/demo0-simple-transition)

### Try the Demos Locally
```sh
git clone https://github.com/chenglou/react-motion.git
cd react-motion
npm install
```
- With hot reloading (**slow, development version**): run `npm start`.
- Without hot reloading (**faster, production version**): run `npm run build-demos` and open the static `demos/demo_name/index.html` file directly. **Don't forget to use production mode when testing your animation's performance**!
To build the repo yourself: `npm run prerelease`.
## What does this library try to solve?

@@ -81,6 +79,4 @@

**Coming from 0.3.* to 0.4.0? [Here](https://github.com/chenglou/react-motion/wiki)'s the upgrade guide.**
Exports:
- `spring`.
- `spring`
- `Motion`

@@ -91,4 +87,6 @@ - `StaggeredMotion`

[Here](https://github.com/chenglou/react-motion/blob/026f4d18d3246e14abbf17bef0a9eda536934193/src/Types.js)'s the well-annotated public [Flow type](http://flowtype.org) definition file (you don't have to use Flow with React-motion, but the types help document the API below).
[Here](https://github.com/chenglou/react-motion/blob/9cb90eca20ecf56e77feb816d101a4a9110c7d70/src/Types.js)'s the well-annotated public [Flow type](http://flowtype.org) definition file (you don't have to use Flow with React-motion, but the types help document the API below).
P.S. using TypeScript? [Here](https://github.com/chenglou/react-motion/issues/300#issuecomment-207262071) are the React-motion TypeScript definitions!
---

@@ -110,3 +108,3 @@

##### - Presets for `{stiffness, damping}`
Commonly used spring configurations used like so: `spring(10, presets.wobbly)` or `spring(20, {...presets.gentle, precision: 0.1})`. [See here](https://github.com/chenglou/react-motion/blob/026f4d18d3246e14abbf17bef0a9eda536934193/src/presets.js).
Commonly used spring configurations used like so: `spring(10, presets.wobbly)` or `spring(20, {...presets.gentle, precision: 0.1})`. [See here](https://github.com/chenglou/react-motion/blob/9cb90eca20ecf56e77feb816d101a4a9110c7d70/src/presets.js).

@@ -142,6 +140,9 @@ ---

##### - onRest?: () => void
Optional. The callback that fires when the animation comes to a rest.
---
### &lt;StaggeredMotion />
Animates a collection of items whose values depend on each other, creating a natural, springy, "staggering" effect [like so](http://chenglou.github.io/react-motion/demos/demo1-chat-heads). This is preferred over hard-coding a delay for an array of `Motions` to achieve a similar (but less natural-looking) effect.
Animates a collection of (**fixed length**) items whose values depend on each other, creating a natural, springy, "staggering" effect [like so](http://chenglou.github.io/react-motion/demos/demo1-chat-heads). This is preferred over hard-coding a delay for an array of `Motions` to achieve a similar (but less natural-looking) effect.

@@ -184,2 +185,4 @@ #### Usage

(No `onRest` for StaggeredMotion because we haven't found a good semantics for it yet. Voice your support in the issues section.)
---

@@ -268,3 +271,3 @@

- `styleThatLeft`: the e.g. `{key: ..., data: ..., value: ...}` object from the `styles` array, identified by `key`, that was present during a previous render, and that is now absent, thus triggering the call to `willLeave`.
- `styleThatLeft`: the e.g. `{key: ..., data: ..., style: ...}` object from the `styles` array, identified by `key`, that was present during a previous render, and that is now absent, thus triggering the call to `willLeave`. Note that the style property is exactly what you passed in `styles`, and is not interpolated. For example, if you passed a spring for `x` you will receive an object like `{x: {stiffness, damping, val, precision}}`.

@@ -282,2 +285,4 @@ - Return: `null` to indicate you want the `TransitionStyle` gone immediately. A `Style` object to indicate you want to reach transition to the specified value(s) before killing the `TransitionStyle`.

(No `onRest` for TransitionMotion because we haven't found a good semantics for it yet. Voice your support in the issues section.)
---

@@ -284,0 +289,0 @@

1

src/Motion.js

@@ -10,2 +10,3 @@ /* @flow */

import type {Element as ReactElement} from 'react';
import type {PlainStyle, Style, Velocity, MotionProps} from './Types';

@@ -12,0 +13,0 @@ const msPerFrame = 1000 / 60;

1

src/StaggeredMotion.js

@@ -10,2 +10,3 @@ /* @flow */

import type {Element as ReactElement} from 'react';
import type {PlainStyle, Style, Velocity, StaggeredProps} from './Types';

@@ -12,0 +13,0 @@

3

src/TransitionMotion.js

@@ -11,2 +11,3 @@ /* @flow */

import type {Element as ReactElement} from 'react';
import type {

@@ -220,3 +221,3 @@ PlainStyle,

const {defaultStyles, styles, willEnter, willLeave} = this.props;
const destStyles: Array<TransitionStyle> = typeof styles === 'function' ? styles() : styles;
const destStyles: Array<TransitionStyle> = typeof styles === 'function' ? styles(defaultStyles) : styles;

@@ -223,0 +224,0 @@ // this is special. for the first time around, we don't have a comparison

6

src/Types.js
/* @flow */
import type {Element as ReactElement} from 'react';
// === basic reused types ===

@@ -9,5 +10,4 @@ // type of the second parameter of `spring(val, config)` all fields are optional

precision?: number,
// TODO: add onRest. Not public yet
};
// the object returned by `spring(value, yourConfig)`. Used internally only!
// the object returned by `spring(value, yourConfig)`. For internal usage only!
export type OpaqueConfig = {

@@ -18,3 +18,2 @@ val: number,

precision: number,
// TODO: add onRest. Not public yet
};

@@ -35,2 +34,3 @@ // your typical style object given in props. Maps to a number or a spring config

children: (interpolatedStyle: PlainStyle) => ReactElement,
onRest?: () => void,
};

@@ -37,0 +37,0 @@ 

build/react-motion.map

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet