react-easing-animation v0.0.6

React Easing Animation

npm i react-easing-animation

This is a React HOC implementation of Easing Animation Frames library, which offers CPU-friendly easing animations with requestAnimationFrame API and Robert Penner's easing equations. Suggestions and pull requests for optimization are welcome.

How to use

Pass a component to be wrapped, along with animation options as a prop. The wrapped component receives currentValue prop during set period of time (4,000 milliseconds by default). You can use this changing value to do whatever animation you want to create.

If the value prop changes, it pauses the current animation and immediately resumes animation with new ending value to be used. Please check out the example by npm start (Node v10.15.1+).

Minimum settings

<EasingAnimation
  component={Bar} // Wrapped component
  value={300} // Ending value
/>

With optional settings

<EasingAnimation
  component={Bar} // Wrapped component
  value={300} // Ending value
  start={20} // Starting value
  props={{
    color: 'green' // Passed to the wrapped component as a prop
  }}
  options={{
    easingType: "quadInOut", // Easing function name
    duration: 3000 // Animation duration in milliseconds
  }}
/>

Browser Support

It uses requestAnimationFrame, which should be supported for most of the modern browsers.