Animation: JavaScript vs CSS3

Use of internet is increasing day by day. According to a Survey in 2014, 40% of the population of the world is using internet. According to Cisco, in next five years the Global internet traffic is expected to increase thrice and hence it is important to give user a better user experience on the web to be in the competition. Animation is one of the method we can achieve that.

Now the question arises why animation?

Animation or interactivity helps to attract user’s attention, it helps to narrate the product story and yes it is also fun looking at those transitional effects.

“By offloading interpretation of changes to the perceptual system animation allows the user to continue thinking about the task domain, with no need to  shift contexts to the interface domain. By eliminating sudden visual changes, animation lessens the chances the user is surprised.”
Scott e.Hudson and john T.Stasko(1993).

But animation is quite difficult on web in respect to other media, the reason is we have to make it compatible in different browser (The devils IE8 and its predecessors too) and different devices (mobiles, tablets, desktops). Some of the feature like canvas is not yet supported in IE8, iOS doesn’t allow flash, and we can’t use lots of images and because it will reduce the site speed.

JS and CSS3 are usually two methods of adding animations on the web. Let’s see how we can use them because people are usually confused over their usage in web.

Animate with CSS3

IN 2007, Webkit introduced animation in CSS, that changed the whole scenario of the web animation.

Below is some CSS that will move an element 150px and 120px in both the X & Y axes in 500ms.

Animate with JavaScript

Writing Javascript is quite difficult. Below is the JavaScript that you would need to write to recreate the CSS transition we discussed earlier.

As you start adding more cases it will become more complex.

If you are using jQuery in your project already, you will likely benefit from sticking with it and using the animate() functions.

Both CSS3 and Javascript have their pros and cons. We can code some basic animation either through Javascript or CSS3 but it is important to know which one should be used when:

1. If we have some simple effects like color changes on hover, changing dimensions of an element, simple fading effects, or combination of these types of simple effects, we can use CSS3.
2. But if we want more controls over animation like images slider, or calling animation on some custom events, effects on mouse movement, parallax effect etc. we should use Javascript.
3. Instead of using core javascript we should use javascript framework like jQuery that can ease our task. These days we have  lots of javascript libraries available to ease our animation process. Some of them are-

1. Tween JS
2. Jsanim
3. Animo.js
4. Move.js
5. Collie
6. Minified.js
7. Rekapi
8. Snap.svg
9. Favico
10. Textillate.js
11. Firmin
12. AliceJS
13. SVG.js
14. Motio
15. Anima.js
16. Velocity.js
17. Parallax.js