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.
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.
- 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.
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.
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.