Question

My site:

jQuery Animation (`comsat.js`: `showPlayerActionView()`):   

if (container == cs_characterSliderPlayerOne){
    container.show("slide", {direction: "left"}, 500);
} else if (container == cs_characterSliderPlayerTwo){
    container.show("slide", {direction: "right"}, 500);
}

Raphael Animation:

this.hover(function(event) {
                    cs_playerList[i].animate({
                        fill: HEX_HOVER_COLOR
                    }, 500);
                }, function(event) {
                    cs_playerList[i].animate({
                        fill: DEFAULT_HEX_COLOR
                    }, 500)
                });

So, each animation seems to run perfectly smoothly when the other is disabled, but when both are enabled, they seems to fight eatchother for rendering the most amount of times, resulting in a slow down. Is there a way to solve this? either by telling the animations they don’t need to render at 200 frames a second (guess) and share resources so the other stuff can appear smooth?

The same slow down happens when I use any CSS3 transition animation (not shown on site). Maybe multithreading would help? How would one do that in JavaScript?

Answer 1

Raphael 2 was released in October 2011 with some changes to the animation code: animations now run using the new browser API “requestAnimationFrame”, with a fallback for older browsers to run at approximately 60FPS.

jQuery adopted requestAnimationFrame early in the 1.6 series but removed it again when various jQuery users reported their animation queues were getting backed-up and leading to horrible catch-up animations as the window lost and regained focus.

The animations should run more smoothly with Raphael 2, but perhaps not quite as smoothly as they would if jQuery was also using requestAnimationFrame