Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-motion

Package Overview
Dependencies
Maintainers
1
Versions
27
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-motion - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

lib/presets.js

4

HISTORY.md

@@ -7,3 +7,3 @@ Legend:

### 0.2.3 (July 29th 2015)
### 0.2.4 (July 29th 2015)
- [I] React-native support!

@@ -13,3 +13,3 @@ - [I] Allow returning `null` from children function. #101

- [I] `TransitionSpring`'s `willLeave` API got simplified and now asks for an object as a return value instead of `null`. `null` is still supported, but is deprecated and will be removed in the next version. See the new docs on it [here](https://github.com/chenglou/react-motion/blob/24d6a7284ef61268c0ead67fe43d7e40bf45d381/README.md#transitionspring-).
- [I] Exposed a few tasteful default spring constants under the new exported `constants`.
- [I] Exposed a few tasteful default spring configurations under the new exported `presets`.

@@ -16,0 +16,0 @@ ### 0.2.2 (July 24th 2015)

@@ -16,7 +16,7 @@ 'use strict';

var _constants2 = require('./constants');
var _presets2 = require('./presets');
var _constants3 = _interopRequireDefault(_constants2);
var _presets3 = _interopRequireDefault(_presets2);
exports.constants = _constants3['default'];
exports.presets = _presets3['default'];
var utils = {

@@ -23,0 +23,0 @@ reorderKeys: _reorderKeys2['default']

@@ -14,3 +14,3 @@ "use strict";

// Damping constant, in kg / s
// Damping, in kg / s
var Fdamper = -b * v;

@@ -17,0 +17,0 @@

@@ -26,7 +26,7 @@ 'use strict';

var _constants = require('./constants');
var _presets = require('./presets');
// TODO: refactor common logic with updateCurrValue and updateCurrVelocity
var _constants2 = _interopRequireDefault(_constants);
var _presets2 = _interopRequireDefault(_presets);

@@ -87,3 +87,3 @@ function interpolateValue(alpha, nextValue, prevValue) {

if (endValue.val != null) {
var _ref = endValue.config || _constants2['default'].noWobble;
var _ref = endValue.config || _presets2['default'].noWobble;

@@ -130,3 +130,3 @@ var _k = _ref[0];

if (endValue.val != null) {
var _ref2 = endValue.config || _constants2['default'].noWobble;
var _ref2 = endValue.config || _presets2['default'].noWobble;

@@ -133,0 +133,0 @@ var _k = _ref2[0];

{
"name": "react-motion",
"version": "0.2.3",
"version": "0.2.4",
"description": "A spring that solves your animation problems.",

@@ -5,0 +5,0 @@ "main": "lib/react-motion.js",

@@ -13,3 +13,3 @@ # React-Motion

Animate a counter to `10`, from whatever value it currently is. For more advanced usage, see [below](#constants).
Animate a counter to `10`, from whatever value it currently is. For more advanced usage, see [below](#presets).

@@ -28,3 +28,3 @@ Npm:

[Check](https://cdn.rawgit.com/chenglou/react-motion/3b5be548cd08630a836562a053576ff91f94b93f/demo0/index.html) [Out](https://cdn.rawgit.com/chenglou/react-motion/3b5be548cd08630a836562a053576ff91f94b93f/demo1/index.html) [The](https://cdn.rawgit.com/chenglou/react-motion/3b5be548cd08630a836562a053576ff91f94b93f/demo2/index.html) [Cool](https://cdn.rawgit.com/chenglou/react-motion/3b5be548cd08630a836562a053576ff91f94b93f/demo3/index.html) [Demos](https://cdn.rawgit.com/chenglou/react-motion/3b5be548cd08630a836562a053576ff91f94b93f/demo4/index.html) [Here](https://cdn.rawgit.com/chenglou/react-motion/2a5f89bee700c6bbb0560eee0c8f9ad66d111bdd/demos/demo5/index.html).
[Check](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo0/index.html) [Out](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo1/index.html) [The](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo2/index.html) [Cool](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo3/index.html) [Demos](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo4/index.html) [Here](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo5/index.html).

@@ -35,3 +35,3 @@ ## What does this library try to solve?

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 constant 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.
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.

@@ -71,3 +71,3 @@ This library also provides an alternative, more powerful API for React's `TransitionGroup`.

The library exports a `Spring`, a `TransitionSpring`, `constants` `utils`.
The library exports `Spring`, `TransitionSpring`, `presets` and `utils`.

@@ -122,3 +122,3 @@ ### <Spring />

A stiffness of `120` and damping of `17` gives the spring a slight bounce effect. The library exports a `constants` object that contains the commonly used stiffness and damping. See the `constants` section below.
A stiffness of `120` and damping of `17` gives the spring a slight bounce effect. The library exports a `presets` object that contains the commonly used stiffness and damping. See the `presets` section below.

@@ -286,4 +286,4 @@ You can nest `val` wrappers; the innermost takes priority:

### `constants`
Some tasteful, commonly used spring constants you can plug into your `endValue` like so: `{val: 10, config: constants.wobbly}`. [See here](https://github.com/chenglou/react-motion/blob/372446fc8679dcdbf4de2e983d53709ab40ce88c/src/constants.js).
### `presets`
Some tasteful, commonly used spring presets you can plug into your `endValue` like so: `{val: 10, config: presets.wobbly}`. [See here](https://github.com/chenglou/react-motion/blob/bae579994bb9090847776f449ba38494a730ebc9/src/presets.js).

@@ -304,3 +304,3 @@ ### Little Extras

- How do I do staggering/chained animation where items animate in one after another?
In most cases, what you want to express here is a relationship between animations, e.g. item 2 appears after item 1. Staggering/chained animation have hard-coded values and go against the spirit of a physics system. Check out [demo 1](https://cdn.rawgit.com/chenglou/react-motion/3b5be548cd08630a836562a053576ff91f94b93f/demo1/index.html); each ball follows the one in front of it, creating a natural staggering animation. The code in `endValue` looks roughly so:
In most cases, what you want to express here is a relationship between animations, e.g. item 2 appears after item 1. Staggering/chained animation have hard-coded values and go against the spirit of a physics system. Check out [demo 1](https://cdn.rawgit.com/chenglou/react-motion/c3c5403b6821b7a8954e3c379057ae7d9bbc39d5/demos/demo1/index.html); each ball follows the one in front of it, creating a natural staggering animation. The code in `endValue` looks roughly so:

@@ -307,0 +307,0 @@ ```jsx

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc