8 ms·
CSS vs. JS Animation: Which is Faster?
- isawczuk 13y agoI wonder how it's compared to AngularJS ngAnimate? ( http://www.nganimate.org/ http://www.nganimate.org/ )
- mbell 13y agonganimate doesn't handle the actual animations, it just adds css classes or calls js at the proper points in the DOM fragment's lifecycle. The example site is using CSS3 for the animations.
- Theodores 13y agoWhy is it that so few articles on how to do this or that in some HTML/CSS/JS way do not actually just do it? Where is the JS Fiddle?
- leeoniya 13y agoyou guys may be interested in an issue i opened a bit ago, some interesting perf jsfiddles in there to ponder. https://github.com/julianshapiro/velocity/issues/6 https://github.com/julianshapiro/velocity/issues/6 also, plz contribute to the discussion there if you feel inclined.
- ngokevin 13y agoAlso to note, it's often more performant to use translate3d instead of translate2d even if you only want a 2d animation because translate3d off-loads to the GPU. http://jsperf.com/translate3d-vs-xy/28 http://jsperf.com/translate3d-vs-xy/28
- randallu 13y agoThe main benefit of using CSS Transitions and Animations on the accelerated properties (transform & opacity) is that the animation will be run by the compositor (at least in WebKit browsers; I think Blink's new animation engine changes this). Running the animation in the compositor means: 1. You avoid a style recalc on every frame (which can be a big deal). 2. The animation keeps running even if the WebProcess gets contended (by painting new content, handling slow JavaScript, GC). It's fine to mess with transform and opacity from JavaScript, and for gesture handling you have to, so it needs to be fast, but it has more overhead than a CSS Animation would have.
- pcwalton 12y agoThis is generally true in Gecko as well, although neither Gecko nor WebKit are guaranteed to run animations on the compositor if they decide that it isn't worth it in some circumstance.
- chriscareycode 13y agohttp://css-tricks.com/myth-busting-css-animations-vs-javascript/ http://css-tricks.com/myth-busting-css-animations-vs-javascr...
- gavinpc 12y agoThe author of GSAP made essentially the same argument over a year ago, with somewhat different points: http://css-tricks.com/myth-busting-css-animations-vs-javascript/ http://css-tricks.com/myth-busting-css-animations-vs-javascr...
- ASneakyFox 12y agowhat about the third option? neither. less is more when it comes to the web. it really is.
- phaedryx 12y agoNeither is faster? Each one is slower than the other? head explodes
- dragonwriter 12y ago> Neither is faster? Each one is slower than the other? For regular comparable x & y: not (x > y) and not (y > x) --> x = y So "neither is faster" means "they are equally fast", not "each one is slower than the other".
- Lockal 12y agoconst x = parseInt("CSS"); const y = parseInt("JS"); if ( (!(x > y) && !(y > x)) != (x == y) ) console.log('Sometimes "neither is faster" is not the same as "equally fast"');
- ASneakyFox 12y agoNo the third option is neither. Css vs js vs neither. Your web page is faster if you don't use animations. Most efficient way to add web page fluff is a non sequitur
- windsurfer 12y agoThe main benefit of using CSS anything is less code. Less javascript to maintain, less code to test, less bugs. A compile error in javascript means your entire site doesn't work. An error in CSS means a single definition gets skipped.
- emsy 12y agoI agree. A much more interesting topic for me would've been: "CSS or JS Animations: does it matter?" I would say if you have so much animations that CSS can't handle it it's too much. But thats just a rule of thumb from my gut feelings.
- davedx 12y agoThis Adobe post has an excellent summary of browser render paths for animation: http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/ http://blogs.adobe.com/webplatform/2014/03/18/css-animations...