The idea was to match animation speed of the gif and JavaScript implementation (which was 24 frames per second)
requestAnimationFrame() (RAF) is more likely to fire approximately 60 times per second than setTimeout(..., 1000 / 60) would. But I needed 1000 / 24, and setTimeout worked very well, so I used it.
If I were doing it all over again, I'd probably use RAF with window.performance, or simple counting variable as a timer. RAF is indeed much smoother than setTimeout and on top of it, RAF saves battery life when a user doesn't have your page open.
> If I were doing it all over again, I'd probably use RAF with window.performance
Since RAF doesn’t give a guaranteed framerate you’d need to use metrics from window.performance to make the animation framerate-independent, or people on different browsers or devices could see the animation at different speeds.
My use case was doing a metaball animation using procedural scribbling[0], because the scribbles are random each frame, I needed a much slower framerate (10 or 15fps, IIRC), otherwise they'd look like a twitchy mess :)
requestAnimationFrame() (RAF) is more likely to fire approximately 60 times per second than setTimeout(..., 1000 / 60) would. But I needed 1000 / 24, and setTimeout worked very well, so I used it.
If I were doing it all over again, I'd probably use RAF with window.performance, or simple counting variable as a timer. RAF is indeed much smoother than setTimeout and on top of it, RAF saves battery life when a user doesn't have your page open.
Good question!