		@@ -5,5 +5,5 @@ npm install react-spring

		Proof of concept, for now. Trying to bridge react-motion and animated. React-motion is great, but doesn't interpolate well, non-binary (as in shifting from one state to another instead of toggling between 0 and 1) [get very hard to do](https://github.com/chenglou/react-motion/issues/526) as it can't deal with colors, gradients, paths, etc. Animated is awesome and it can interpolate everything, but the downside is manually having to manage animation-handles, doing the stopping/cleaning chores.
		React-spring is a wrapper around a cooked down fork of [Facebooks animated](http://animatedjs.github.io/interactive-docs/). It is trying to bridge react-motion and animated in fact. React-motion is great but doesn't interpolate well, shifting from one state to another is [hard](https://github.com/chenglou/react-motion/issues/526) as it can't deal with colors, gradients, paths, etc. Animated does that well, but the downside is manually having to manage animation-handles, doing stopping/cleaning chores.

		So, this lib has more or less the same api as react-motion (Spring -> Motion, from -> defaultStyles, to -> styles) while you can feed it everything animated can take in (which is used underneath).
		This lib has a similar api as react-motion (Spring -> Motion, from -> defaultStyles, to -> styles) while you can feed it everything animated can take in.

		@@ -66,4 +66,6 @@ ```jsx

		React-spring will re-render the receiving component on every frame. It is usually fine and give you more freedom to animate whatever you like. If you need more performance supply the `native` flag. Now your component will only render once and all updates will efficiently be applied to it outside of Reacts render loop.
		Demo: https://codesandbox.io/s/882njxpz29

		React-spring will re-render the receiving component on every frame. It is usually fine and gives you more freedom to animate whatever you like. If you need more performance supply the `native` flag. Now your component will only render once and all updates will efficiently be applied to it outside of Reacts render loop.

		This has a few gotchas:
		@@ -73,3 +75,3 @@
		2. The components that receive your styles have to be special, animated components. The styles are opaque objects, not regular styles!
		3. If you use transforms, make sure it's an array
		3. If you use transforms, make sure it's an array

		@@ -79,2 +81,15 @@ ```jsx

		const DIV = animated.div
		const SVG = animated.createAnimatedComponent('svg')

		const Content = ({ toggle, color, backgroundColor, transform }) => (
		<DIV style={{ backgroundColor }}>
		<SVG style={{ transform }} version="1.1" viewBox="0 0 400 400">
		<g style={{ color }} fillRule="evenodd" onClick={toggle}>
		<path id="path-1" d="M20,380 L380,380 L380,380 L200,20 L20,380 Z" />
		</g>
		</SVG>
		</DIV>
		)

		class App extends React.Component {
		@@ -88,10 +103,11 @@ state = { toggle: true }
		native
		from={{ color: 'white', opacity: 0, transform: [{ scale: 0 }] }}
		to={{ color: 'red', opacity: 1, transform: [{ scale: this.state.toggle ? 2 : 1 }] }}>
		{style => (
		<animated.div style={{ ...style, transformOrigin: 'left' }}>
		{this.state.toggle ? 'open' : 'closed'}
		</animated.div>
		)}
		</Spring>
		from={{ color: 'black' }}
		to={{
		color: toggle ? '#247BA0' : '#70C1B3',
		backgroundColor: toggle ? '#B2DBBF' : '#F3FFBD',
		transform: [{ rotate: toggle ? '0deg' : '180deg' }, { scale: toggle ? 0.6 : 1.5 }],
		}}
		toggle={this.toggle}
		children={Content}
		/>
		)
		@@ -103,3 +119,1 @@ }
		By default you can use `animated.div`, `animated.span` and `animated.img`, you can create your own by calling: `animated.createAnimatedComponent('h1')` or whatever element you need.

src/index.js

		import React from 'react'
		import PropTypes from 'prop-types'
		import Animated from './animated'
		import Animated from './animated/index'

		@@ -5,0 +5,0 @@ function createInterpolator(interpolator) {

src/animated.js

react-spring - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics