On: Material Design Lite Components in HTML/CSS/JS

[Aldo_MX]

I loved that in contrast with the other Material Design Toolkits, this one uses only CSS for its animations.

[andybak → Aldo_MX]

Are you saying that's a good thing mainly for performance reasons?

I ask mainly because I vaguely remember someone running the numbers and finding out that js animations surprisingly beat CSS animations in a number of not-unrealistic scenarios.

(I know there's other reasons for favouring CSS animations)

[at-fates-hands → andybak]

Well, there's a slight distinction there. CSS animations are faster than jQuery which is important to remember. You can get the same boost from CSS Animations and even better performance if you're using GSAP (Green Sock Animation Platform) which uses Javascript to give the same benefits you see in CSS animations.

Here's the two articles:

https://css-tricks.com/myth-busting-css-animations-vs-javasc... - this article was written by the author of GSAP

http://davidwalsh.name/css-js-animation

The basic point of the article:

The results confirm what is widely reported on the web - CSS animations are significantly faster than jQuery. However, on most devices and browsers I tested, the JavaScript-based GSAP performed even better than CSS animations (by a wide margin in some cases, like on the Microsoft Surface RT GSAP was probably at least 5 times faster than the CSS transitions created by Zepto, and on the iPad 3 iOS7 transforms were significantly faster when animated with GSAP instead of CSS transitions)