There is a misbelief among so many webmasters that CSS is the only way of playing around with animations. CSS has been strongly emerged as the most pampered system of the industry for years now, and has been talked about endlessly among the developers for its robustness and mobile-friendliness. CSS is good but it’s no better than JavaScript. There are certain myths regarding CSS which has ushered the way developers are proactively adopting this system abandoning JavaScript behind and its animations altogether.
The active usage of CSS is what has made developers feel puzzled while managing UI interaction within style sheets, locking themselves out for making their project compatible with the Internet Explorer 8 and 9, and lastly, steer clear the out-of-the-box animations that is only possible with JavaScript.
This post is all about busting some myths about CSS and uncovering all the major problems that people hardly talk about owing to their fascination for CSS. The article is meant to raise your knowledge and awareness about the benefits of using JavaScript, so that you could easily escape the situation of riling up yourself.
So, without further ado let’s discuss about all of them in detail.
1. jQuery
Let’s start with the basics, JavaScript and jQuery are wrongly combined. Animations designed using JavaScript is fast and dynamic, while jQuery is slow. The reason being – despite of its powerful skills – jQuery’s prominent goal has never been to perform animations. There are so many reasons supporting this:
- jQuery can not simply stop using layout thrashing due to its code based structure that serves a variety of purpose beyond animations. This generally causes stuttering in the initial stages of animation.
- The memory consumed by jQuery frequently stir up garbage collection resulting in freezing of animations. Due to the garbage collection, one can encounter stuttering during the animation.
- JQuery is designed to used set intervals rather than Request Animation Frame (RAF). If RAF is absent that low frame animations could produce.
2. Lacking Controls for Rotation and Positioning
Using controls for animations, rotation, and defining positions are some basic features that are essential while performing animations. In CSS, all these functions are jam packed into a common “transform” property. This creates problems to animate something in a unique way via a common element. For instance, if you want to animate “rotation” and “scale” separately, with different timings. This is something that is only possible with JavaScript because it lets you use various tricks, which is not allowed by CSS. This is a drawback of CSS. It’s good only for simpler animation projects and not for the ones where a rich power motion design needs to integrate.
3. Performance with Velocity and GSAP
Velocity and GSAP are two leading and most popular libraries in JavaScript. Both of them work with and even without jQuery. When both of these libraries are used along with jQuery there is absolutely no degradation in terms of performance because they work beyond the basic jQuery animations.
These two libraries can also be used easily when jQuery is not presented on the page. This clearly shows that instead of linking all kinds of animation calls into a common jQuery element- as shown below- you could directly pass the target element to the animation call.
* Working without jQuery */
Velocity(element, { opacity: 0.4 }, 900); // Velocity
TweenMax.to(element, 1, { opacity: 0.4 }); // GSAP
In the above example, you can observe that the velocity uses the same syntax even when jQuery is not used. It just shifted all the elements to the right direction to create space for the for the targeted elements.
On the contrary, in GSAP an object-oriented API design has been used along with a basic static method. This way the user has the complete control over the animation process.
4. GPU Factor
A fully optimized GPU is great for performing a variety of tasks including playing around with transform matrices and opacity, that’s the reason why all the leading browsers first offload such tasks from CPU to the GPU. The main objective is to separate all the animated elements onto their own GPU layers because as soon as the system is done with the creation of layers GPU no longer shows concern for moving pixels and combined them together. Therefore, there is absolutely no need to calculate each pixel in every single minute. Instead you can save a lot of time by simply moving one pixel over the other.
Please Note: There is no need to give every element its own layer due to the restricted video memory of the GPU. If you run out of memory, everything would get messed up.
On the other hand, if you declare animations in CSS then it would be the browser’s responsibility to determine the GPU layer of each element and thus division will take place accordingly.
However, this is something which you could do with JavaScript as well. All you need to do is set a transform with a 3D feature ( just like translate3d () or matrix3d()) to let the browser know about the process of creating GPU layer for the targeted element. So, this is way it is clear that GPU does not only provide a speed boost to CSS but to JavaScript as well.
5. Robust JavaScript Animations
JavaScript has all the capabilities to win when compared with CSS in terms of performance. JavaScript is faster. But exactly how faster it could be? To begin with- it is versatile enough to create an impressive 3D animation demo, which you could see via WebGL. And, also fast enough to build a multimedia teaser, which could be developed using Flash or After Effects. It is absolutely hassle-free to build a virtual world with JavaScript with the help of canvas.
As far as animation libraries are concerned then talking about Transit and Velocity’s documentation is absolutely justified. For more clarity on this point, we have also provided a list optimizations that only a JavaScript based animation could perform.
- Synchronizing the DOM
- Caching of properties across chain calls to mitigate the generation of DOM querying.
- Caching unit conversion ratios
Conclusion
The above mentioned points clearly highlight the versatility of JavaScript based animations as compared to those which are CSS based. But is that we mean CSS animations are “bad”? No, absolutely not. They are good but only to perform basic animations. For higher flexibility and distinct capabilities, JavaScript should be the priority.
