import {Motion, spring} from 'react-motion';
// In your render:
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
{value => <div>{value.x}</div>}
</Motion>
This library provides an alternative, more powerful API for React’s
TransitionGroup
. 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 petty situations such as interrupted animation behavior. It also greatly simplifies the API.
Here’s a talk by the author on React Motion: