CSS3 – JQuery and hardware acceleration
Today I’m gonna speak about animation on webpage and mobile, what to use and overlooked point.
There is 2 main way to create an animation, the most known is jQuery and the other one who is really growing lately is CSS3.
CSS3 is the latest evolution of the Cascading Style Sheets language. It brings a lot of long-awaited features, like rounded corners, shadows, gradients, transitions or animations etc..
Why use jQuery instead of CSS3 and vice-versa
There is multiple factors you need to take into account when deciding which one to use :
Who is your target ? Company with old computers or young people with Mac ?
Is it for mobile ? For both computer and mobile ?
While CSS3 is native into the browser, it still has compatibility problems, especially with old Internet Explorer browser while jQuery doesn’t. The other big point is performance. Those two have a different way of creating the animation, jQuery does lots of mathematics, calculate pixels and keep a momentum during all the animation, which turn out to be relying heavily on the CPU. Not really a problem with 99% of computers but mobile are different. JQuery animation on most mobile will be jerky and / or broken. Unless your animation have some peculiar conditions, a simple slide / transition from one state to the other is a lot smoother with CSS, even more with hardware acceleration forced by “translate3d(x,y,z)”.
Although this article was about JQuery, there is better alternatives for animations
Hardware acceleration is using the device (computer / mobile) GPU to render animation. Usually it only happen during 3D rendering and unless you specify it on your CSS, your 2D transitions wont have this advantage.
There is few CSS3 proprieties that force the device to turn on the hardware acceleration even though you only use 2D animations and after few tests you can really feel the difference.
Nothing is actually happening but every animation in this block will be using the GPU. But it’s not a magical CSS propriety ! The problem is that different devices will use different proprieties to activate it and sometimes you find yourself with slow animations on each of those devices. You need to find a good middle ground and test on multiple devices, version etc..
There is few other proprieties that will help animations, a good middle ground for Android / Iphone for my latest animation is this :
This triggers the hardware acceleration without overdoing it like translate3d().
I found out this library lately and this is very powerful. Taking the best of both worlds. While I still haven’t been able to use it on a project, this tool will allow any animation to be smooth and cute !
Compatibility : http://www.w3schools.com/cssref/css3_browsersupport.asp
GSAP : http://greensock.com/gsap