Hello!

 

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.
JQuery is a Javascript Library, really easy to use, simple to understand and light, the good friend of any front-end developer ! Cross platform and cross browser, best bet for compatibility and performance. From simple DOM modification to complex animations, there is also lots of additional plugins.
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)”.

 

There is things that jQuery (and more widely Javascript) can do that will never be possible in CSS, Modern animation is very much tied to interactivity, so it’s incredibly useful to be able to animate from variable starting values to variable ending ones (maybe based on where the user clicks, for example), or change things on-the-fly but CSS-based animation can’t do that. But as compatibility is getting better, the use of CPU heavy animations should stop and allow the webpage to be a lot less heavy.
Although this article was about JQuery, there is better alternatives for animations

 

Hardware acceleration

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.

 

Example :

{
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

 

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 :

 

{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}

 

This triggers the hardware acceleration without overdoing it like translate3d().

 

GSAP

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 !

 

Links

Compatibility : http://www.w3schools.com/cssref/css3_browsersupport.asp
GSAP : http://greensock.com/gsap