npm i easing-animation-frames

This is a tiny library for creating CPU-friendly easing animations with requestAnimationFrame API and Robert Penner's easing equations. Suggestions and pull requests for optimization are welcome.

Select an easing type (cubicInOut by default) and pass a callback function to run for every animation frame which manipulates target DOM elements.

// Template function
const updateBarWidth = ({ progress }) => {
  // Update the DOM with the progress value
}

easingAnimationFrames({
  template: updateBarWidth // Callback function to run for every frame, which receives progress from 0 to 1
});

// Template function
const updateBarWidth = ({
  progress,
  stopFrames, // Stops the animation
  resumeFrames, // Resumes the animation
  restartFrames, // Restarts the animation
}) => {
  // Update the DOM with the progress value
}

easingAnimationFrames({
  easingType: "quadInOut", // Easing function name
  duration: 3000, // Animation duration in milliseconds
  template: updateBarWidth, // Callback function to run for every frame, which receives progress from 0 to 1
  complete: animationComplete, // Callback funciton to run on completion
});

Duration is set to be 4,000 milliseconds by default, which you can change. Once the animation starts, the callback function (template) receives the progress value (from 0 to 1) that you can use to render the animation. The example above uses (progress * 75)% for the width of the bar, based on the time passed.

npm start to see the example (Node v10.15.1+).

The template function also provides stop and resume functions, if you want to stop the animation before it completes and resume it.

React Easing Animation is a React HOC implementation of this library.

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