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.