Run requestAnimationFrame
for the specified duration.
npm install --save runfor
or
yarn add runfor
runFor(progressFn, msDuration);
import runFor from 'runfor';
function moveX(progress) {
// Move right 200px
div.style.transform = `translateX(${progress * 200}px`;
}
// Run moveX for 1sec with a progress between 0 and 1.
runFor(p => moveX(p), 1000);
Check the examples/
folder to see full examples.
Optionally you can stop or start the animation with this functions:
const runner = runFor(fn, 1000);
runner.toggle()
runner.stop()
runner.start()
Stops the animation.
Starts the animation keeping the previous progress.
Toggle start / stop.
Restart animation from the beginning
yarn install
yarn run dev
yarn test