nganimate 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.
Also 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.
The 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.
This 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.
const 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"');
No 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
The 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.
I 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.
17 comments
[ 2.9 ms ] story [ 42.8 ms ] threadhttps://github.com/julianshapiro/velocity/issues/6
also, plz contribute to the discussion there if you feel inclined.
http://jsperf.com/translate3d-vs-xy/28
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.
http://css-tricks.com/myth-busting-css-animations-vs-javascr...
less is more when it comes to the web. it really is.
head explodes
For regular comparable x & y:
So "neither is faster" means "they are equally fast", not "each one is slower than the other".