HTML5 Animation Speed Test

Stress test the performance of various common JavaScript libraries and compare them with GSAP (GreenSock Animation Platform). This test does not use a canvas element (although it certainly could) - it simply animates the left, top, width, and height css properties of standard image elements. There are also versions of the GSAP, Zepto, anime, and Web Animations tests that use transforms ("translate/scale") instead so that you can compare performance. The goal was to be extremely fair and use the same code for everything except the actual animation. No tricks. Look at the source for yourself or run your own tests to confirm.

Choose the number of dots you'd like to animate and then choose the engine and click the "START" button below. Watch the fps in the lower right (higher is better - it reflects how many times the main thread updated over the past 1 second). As more dots are animated, you'll see the performance gap widen. Try to push things until the fps drops below 30fps. When the CPU isn't breaking a sweat, fps should hover around 100fps in most modern browsers.

Note: Zepto uses CSS3 transitions which won't work in some browsers (like IE9). Also beware that some browsers incorrectly fire requestAnimationFrame events even when the browser clearly isn't updating the screen and/or they handle JS in a different thread, thus 10fps transitions may inaccurately report in JS as running at 50fps. So focus on the actual animation of the starfield and how smooth it is (or isn't).