Improving performance of CSS3 animations

Question

My website runs amazing on FireFox but very scrappy on Chrome. It is a full animated website with a lot of CSS3 scroll animations that are triggered with jQuery waypoints and a script i have written that adds and removes class with scroll.

Is there a way to force it perform much better on Chrome browser?

This is the website: http://www.aikoncreative.com/

Answer 1

It's complicated. You are using jQuery animations and there are some troubles with this:

1. jQuery.animate has a poor performance vs css animations, because not use the gpu, only the cpu, so movement is not so smooth as css transitions.
2. jQuery.animate not use requestAnimationFrame to perform animations. It use setTimeout or setInterval, so the performance is worst.

My recomendation is try to avoid jQuery animate function, create css classes to create native css animations and add class while are you scrolling AND (very important), optimize your scroll event using requestAnimationFrame and doing less calcs as possible.

Please, read this post from Paul Lewis, is very awesome: http://www.html5rocks.com/en/tutorials/speed/animations/

(edit) Add more info: I deep inside your code a couple of minuts using chrome dev tools and I saw a terrible bottleneck on file SmoothScroll.js on function step called as: ssc_wheel => ssc_scroll => function step (33 seconds, 63 seconds ...). This function "step" takes a lot of execution time again and again, so cpu will killed. To enhace the performace, I recommend first call it using requestAnimationFrame and then we could see again if there is some positive effect (If you do well, you will see a better enhacement). Read the article to enhace scrolling with requestAnimationFrame :)

Keep this in mind while you will edit your code: "On events like scroll, put a boolean variable indicating that there is a event scroll, this variable set to true if it's value is false and then call your function to check or update animations using requestAnimationFrame like 'requestAnimationFrame(animateMyPage)'. In your function 'animateMyPage' check scroll position and add class to your animation objects, but be carefull, do as less operations as possible, if you have a lot of work to do in a frame you will need to wait next frame! At the end of 'animateMyPage' set to false variable used in scroll event too, to avoid unnecesary calls to requestAnimationFrame('animateMyPage').

These are some steps but there are much more, but, try to do this enhacements first.