3 ms·
"Because transitions aren't natively controlled by JavaScript (they are merely triggered by JavaScript), the browser does not know how to optimize transitions i
by goldenkey 13y ago
"Because transitions aren't natively controlled by JavaScript (they are merely triggered by JavaScript), the browser does not know how to optimize transitions in sync with the JavaScript code that manipulates them."
The above voodoo talk is quite a disservice. It's immediately obvious that the dev does not know how v8 and the dom/CSS/rendering engine are tied together. The fact that the CSS transition is triggered by JS has no bearing on speed or optimization.
Secondly, most importantly, JS based fps-style animations eat CPU, and battery power of portable devices. On the other hand, CSS transitions are only getting better. Most CSS transitions are GPU optimized and light on CPU usage. A web page should not be strangling the v8 engine for graphical animation that could instead be GPU-bound. This library is clever but a step in the wrong direction. The dev could have contributed to WebKit CSS key frame animation acceleration instead.
Thirdly, JS animations cannot handle the sheer amount of particles that CSS transitions can. For instance, take Ana Tudors box-shadow particle hack, and look at how performing it is through GPU acceleration.
http://codepen.io/thebabydino/pen/shtGe http://codepen.io/thebabydino/pen/shtGe
- purpleturtle 13y agoYou misread my quote entirely. If you read further down the article you're referencing (davidwalsh.name/css-js-animation), you'll see an example of how Velocity caches values between consecutively chained calls. THAT is an example of the browser not knowing when to optimize transitions in sync with JS code. Another example from that same article: Caching unit conversion ratios (e.g. px to %, em, etc.) across sibling elements in the same call. Further, JS animation does not eat up mobile devices. You're conflating concepts. I know that HN can be a stomping grounds, but there's no need to be rude.
- goldenkey 13y agoCaching values is an obvious and necessary optimization. The claim that the CSS transition cannot know when the property changes due to JS, therefore cannot optimize, is total fluffery. The main loop is render, JS, and never at the same time. That is why a JS loop will freeze the browser. Have you no idea that it's all single threaded?
- deleted 13y ago[deleted]
- neilk 13y agoTheoretical objections aside, I have seen preview demos of Velocity on mobile devices, and it is surprisingly quick compared to its competitors. Even with demos involving many, many, particles. I haven't delved deeply into all the tradeoffs - maybe it will overuse the CPU - but there's definitely something going on here. There's a similar library called GSAP (http://www.greensock.com/gsap-js/ http://www.greensock.com/gsap-js/) and they've made similar points (http://css-tricks.com/myth-busting-css-animations-vs-javascript/ http://css-tricks.com/myth-busting-css-animations-vs-javascr...).