jQuery with requestAnimationFrame

The requestAnimationFrame specification is being cooked to replace the over-used setTimeout call when doing JavaScript animations. By specifically targeting animations, it’s highly optimized for this purpose. And since JavaScript animations are becoming more and more widespread, I believe it’s a great initiative, aiming to smooth all moving things inside your browser window. Concept and usage are well explained on this article.

If you use jQuery, however, you are not taking benefit of this new specification. It was used on a previous version, but it was dropped since then. I believe it should have been kept, misuse of the animation features shouldn’t have guided this decision. Anyway, when I was developing a jQuery plugin to embed requestAnimationFrame inside jQuery animation again, I just found out that someone had already done that. It’s available on GitHub and it works very well. The author has also made some claims on jQuery forums to make it default inside the library, with no success so far.

So, this is what you need to do (the file you need is within dist directory):

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.requestAnimationFrame.min.js"></script>

Animations instantly became smoother on Firefox on Linux. Highly recommended.