One of the most important things to get right with lightbox libraries is making sure they work well when the user has already scrolled down the page, this one fails in that case: http://i.imgur.com/Gh1Vd.png
Works fine for me but it's not 60fps. Animation and graphics in javascript will never be good. I can't wait for the native app model to come to PC's so we can stop shoehorning all this crap into html/javascript which it was never designed to support.
In this example the animation and effects aren't using javascript, the javascript is just is just firing the events. CSS3 (as implemented here) can leverage the same general advantages as a native app (GPU acceleration, etc). It's still early days, so browsers are various levels of implementation support, but the point is that moving forward it's not crippled by the same limitations of javascript DOM manipulation; vendors can actually optimize the software and hardware support.
I'd say it's quite likely animation and graphics in the browser (not specifically javascript) WILL be good.
Low-level access to memory, cpu, and graphics(through opengl or directx bindings) are all needed to approach what the hardware is capable of. Pipeline bottlenecks are the real performance killers. Vendors can spend decades trying to fix them one by one, but there's no real substitute for low-level access.
It's really weird like that. I remember playing around with CSS3 with some gloss, gradients, and rounded borders, and something like nine boxes with the effects applied just ruined your browser. I had no idea what to do about it at the time, and as it was just me playing around, I decided to abandon it.
There are some really weird bottlenecks in writing websites that are still beyond me.
It's a software problem, not a hardware problem. Probably just your browser.
Our frontend guy had a lot of issues with animation performance on the different browsers recently, he could probably speak to how big of a pain in the ass it is.
I'm on a Windows machine right now (ugh), and only Safari 5 renders it absolutely smoothly. Chrome and Firefox (latest versions) fail miserably (Chrome is something like 15 fps with a 500 ms lag at the beginning, Firefox at 20 fps).
This is the first time I've seen Chrome performing worse than Safari on Windows (they're usually on par, with Chrome a little better sometimes).
More info in case it's useful to OP: Windows Vista, latest service pack I presume. 2.53 Core 2 Duo, a 4 year old graphics card (quite good for its day, but naturally not so hot these days), 4 or 5 gigs of RAM.
I gave it a shot in Safari (instead of Chrome). Worked better, but still not perfectly lucid. I'm on a RMBP with GPU active. Anyone else with this configuration having stuttering?
The rMBP's graphics card is, from my understanding, somewhat underpowered given the number of pixels it has to push. I've heard fairly widespread reports of its framerate in graphics-intensive situations being less than desirable.
The iPhone or MBA, on the other hand, have far fewer pixels to push around.
Also, it seemed totally smooth on my mid-2010 iMac running 10.8.1 with Safari 6.
To be clear, this jQuery plugin was not made by @voronianski not @hakimel. The original Avgrund concept is Hakim's. I think the way this was presented is really freaking confusing.
@hakimel is Hakim El Hattab :) he's author of original idea.
but @voronianski (Dmitri Voronianski) have brought this idea to plugin that everybody can use with ease
Really neat. I think it would be better if it didn't do any sort of blurring on IE. Not sure if that's a side effect of zooming out the page or blur but the page content looks horrible when the modal is up.
The trick is that it's not using JS to animate (not setting position manually or even depending on requestAnimationFrame). It's using CSS transitions to let the rendering engine optimize the animation.
There is a banner on the side to GitHub and a link in the demo to GitHub as well. So yea, not going to link it here. Click on it. The demo is more important.
