react+rebound
(bring your family and friends)
npm install react-springs react rebound --save
Dynamic animations for react/react-native, powered by rebound.
(if you're looking for something more conventional, consider react-ease)
// output floats gradually from 0 to 10
<Spring to={10}>
{val => <div>{val}</div>} // yes, children is a function.
</Spring>
// you can compose multiple springs
<Springs to={{left: 20, top: 30}} tension={30} overshootClamping={true}>
{val => <div style={val}></div>}
</Springs>
// alternately, if you want control on each spring
<Spring to={20} friction={1.5}> {x =>
<Spring to={30} friction={7}> {y =>
<div style={{left: x, top: y}}/>}
</Spring>}
</Spring>
// and if you'd rather not use the child-function pattern
<div>
<Spring to={20} onSpringUpdate={spring => this.setState({ value: spring.getCurrentValue() })} />
<div style={{left: this.state.value}}>moving box</div>
</div>
atRest
is true
, then the spring immediately snaps to to
.Spring
, but accepts a map of key-values.from
, and continue to to
Spring
, but 'returns' key, spring
npm install
npm start