Request Animation Frame is your friend

If you are writing anything in JavaScript that animate then you are probably more than familiar with setInterval and setTimeout. These are both useful tools to create timing loops. However, when it comes to creating animations they are both pretty inefficient.

I you use a timer period of less than 16.7ms to draw animations then you are probably asking the computer to draw more often than it can actually draw. Most monitors can only display at 60Hz frequency or 16.7ms periods. So if you used setTimeout to call a draw method every 10ms, every third callback would not be drawn to screen. So all the processing power used in that 3rd draw would have been wasted and animations will look choppy because your missing every third draw.

RequestAnimationFrame However is different. Rather than Setting up a timeout with a 16.7ms delay this will fire an event every time the system is actually capable of drawing a frame. In terms of syntax it is more similar to setTimeout, in that you need to call it over and over rather than setInterval which will make repeated calls.

Go here for a demo of RequestAnimationFrame

Comments (0)

Skip to main content