After jQuery, CSS Animations became the most praised solution for creating web animations. Is JavaScript-based animation really outdated? In this post I will focus on the shortcomings of CSS3, and tell you why I still think JavaScript is a better tool for handling animations.
Not so long ago most developers used jQuery, a JavaScript library, to create animations in browsers. As mobile devices got more and more popular, compatibility and performance became pressing issues. Flash faded away (thank goodness!) and some talented developers did amazing things in HTML5. They needed better tools for complex sequencing and top-notch performance, but jQuery simply wasn’t designed for that.
CSS Animations has been the darling of the industry for years now. Developers talked about it endlessly at conferences, and phrases like “hardware-accelerated” and “mobile-friendly” tickled the ears of the audience. JavaScript-based animation was treated as if it was antiquated. But is it really?
I eagerly jumped on CSS3 myself, but sadly had to realise its limitations. There are some aspects where JavaScript still outshines CSS3:
Runtime controls and events
Some browsers allow you to stop/revert some keyframes in animations, but that’s about it. JavaScript provides great control: you can add callbacks or bind a rich set of playback events to selectors.
Limited effects
There are some JavaScript functions that you simply can’t use in CSS3, for example:
- Animate attributes
- Animate scroll positions
- Directional rotation
- Physics-based motions
- Animate along a curve
Compatibility
CSS3-based animation doesn’t work in IE9 or earlier. Most of us hate supporting older browsers (especially IE), but in reality many of us have clients who need this compatibility.
Performance
Some really big words are flying around about CSS3 like “hardware accelerated” or “using GPU” and they’re all true. But did you know that JavaScript can do that, too? Just think of translate3d() or matrix3d(). The main reason why CSS3 is considered much faster is because people tend to compare it with JQuery. Although jQuery is significantly slower, there are highly optimised libraries out there, like GSAP that is 20x faster than JQ. (Yes, 20x.)
If you are interested in a detailed performance review, you can read a great overview here.
Conclusion
CSS3 is a no brainer for simple tasks like transitions or some nice hover effects. It’s easy to implement and fast (although browser support is kinda meh). But for more complex, advanced or custom work, JavaScript is my weapon of choice. It has a wide selection of libraries and performance-wise it’s up to par with any other solution out there.
