Creating animations using CSS or JavaScript?

Screen Shot 2017-01-18 at 11.31.02 AM.png

On a recent project, I created a UI rolodex style component. After moving past the irony of making a virtual component of one of the oldest ways to display cards, I was able to get in-depth experience using CSS animations and transitions. When complete, I was rather happy with the component so I decided to blog about my experience.

I wanted to compare CSS to JavaScript when creating animations. However, when I sat down to write the article I realized over the last several years I had always followed the rule “If you can do it in CSS don’t use JavaScript.” Since my knowledge was limited on JavaScript animations, I began to research performant libraries to see if anything had changed since the days of JQuery.

I kept reading that JavaScript had distinct advantages over CSS and performance in most cases was just as good - if not better. 

This research prompted a side project of mine to test these claims, which can be downloaded here: https://github.com/r-vianna/css-js-animations-demo. To view the demo, go here: https://r-vianna.github.io/css-js-animations-demo/.

The project sets out to accomplish the following:

  • Create an animation stress test:
    • It should be simple;
    • It will control 1000 DOM nodes;
    • It will loop infinitely.
  • Use both CSS and JavaScript to create the same animation effect
  • Do a blind test
    • The user should not know which animation is running;
    • Determine if a user can tell the difference

 I also wanted to ensure two very important factors:

  • Under (admittedly) uncommon circumstances, would a user be able to notice a performance benefit in one technology over the other;
  • As a developer, is one technology easier to use over the other.

The results

I found very little difference in the performance of the two technologies. In my opinion the CSS ran slightly smoother, but I still found myself going to the console to check which one I was looking at. This was surprising to me because I would have thought CSS had the significant advantage.

 In terms of being developer friendly, I am somewhat biased as I am more familiar with CSS animations. There was a bit of a learning curve for me when doing the animation in JavaScript. I still believe since this is such a simple animation, CSS was more intuitive.  With that said, I can see how for more complex animations and being able to sequence off of time rather than percentages using JavaScript would have major benefits. You also have more control over your animations with JavaScript. 

Conclusion

As with anything in programming there isn’t one right answer. Practically speaking, I would probably not import a library to simply slide a menu in and out in JavaScript. For more complex animations, like my rolodex, there are some serious advantages in using JavaScript and I will certainly be open to it on the next animation intensive project.

Throughout my research I found some great articles that provided more detail about performance between the two technologies and some distinct advantages for JavaScript animations:

Be sure to check out my project demo or clone and let me know your thoughts. If you have suggestions on how to make the animations more efficient, comment below so I can update my findings.

Contact Us

Top