Skip to content

Instantly share code, notes, and snippets.

@bendc
Created August 28, 2017 13:02
Show Gist options
  • Save bendc/15d9c3c7c4705bfa634941baafd6340e to your computer and use it in GitHub Desktop.
Save bendc/15d9c3c7c4705bfa634941baafd6340e to your computer and use it in GitHub Desktop.
rAF tutorial: advanced time tracking
const trackTime = id => {
const [entry] = performance.getEntriesByName(id);
if (!entry) {
performance.mark(id);
return 0;
}
return performance.now() - entry.startTime;
};
const getProgress = ({duration, id}) => {
const progress = Math.min(trackTime(id) / duration, 1);
if (progress == 1) performance.clearMarks(id);
return progress;
};
const tick = () => {
const progress = getProgress(animation);
if (progress < 1) requestAnimationFrame(tick);
};
const animation = {
duration: 500,
id: requestAnimationFrame(tick)
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment