Skip to content

Instantly share code, notes, and snippets.

@erikjung
Created April 4, 2016 04:04
Show Gist options
  • Save erikjung/ca2206a272f7d956ca3fb7a8e6389738 to your computer and use it in GitHub Desktop.
Save erikjung/ca2206a272f7d956ca3fb7a8e6389738 to your computer and use it in GitHub Desktop.
/**
* Tweens a number from `startValue` to `endValue` over the `duration` time period,
* calling `onAnimationFrame` on each animation frame.
*
* @example
* // Tween to 100 from 0 over 2 seconds
* tweenNumber(n => console.log(`step value: ${n}`), 100, 0, 2000);
*/
function tweenNumber (
onAnimationFrame,
endValue,
startValue = 0,
duration = 500
) {
var start;
var elapsed;
var progress;
var stepValue;
/**
* 1. Math.ceil() because rounding of microsecond timestamp vs. duration
* 2. Math.max() because elapsed time could be greater than stupidly short duration
*/
function iterate (timestamp) {
start = start || timestamp;
elapsed = Math.ceil(timestamp - start); // 1
progress = elapsed / Math.max(elapsed, duration); // 2
stepValue = startValue + (endValue - startValue) * progress;
onAnimationFrame(stepValue, progress);
if (progress < 1) {
window.requestAnimationFrame(iterate);
}
}
// Force positive duration of at least 1ms
duration = Math.max(duration, 1);
window.requestAnimationFrame(iterate);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment