It's the combination of -webkit-transform and -webkit-backface-visibility that causes the blurriness. Wild guess: those attributes turn on 3D acceleration, and rendering is incorrectly offset by .5 pixels.
Same here, on Chrome on Windows (haven't noticed when I first looked at the example on a Mac). Also, only some effects leave the text blury. "Let me in" for example, doesn't.
The placeholder images you use for captions are getting scaled up so they look very blurry for me. Might be better to get bigger images and have them scale down? placehold.it also allows you to specify your own text there by passing in the `text` parameter.
How long until people start using similar effects to turn their single-page web app into a multi-page web app? Similar to Linux 3D desktop, compiz and the like.
Everything is smooth and looks great in Chromium, but the whole page is sluggish in Firefox (on linux at least, and usually firefox on windows is worse).
This has been generally true in my experience playing with CSS animations. Are there any tricks to optimize stuff like this in Firefox, or is it just an area where Chromium is still way far ahead in performance?
I couldn't find anything in the profiler either. I did narrow it down a bit though. Most of what I was experiencing was sluggishness in scrolling around the page, not in the animations themselves. I realized that in particular, scolling around the top of the page where all the buttons for the modals are. If I hide all of the buttons, the page works great. So somehow something really bad is happening trying to render a bunch of buttons (I made a test page with a few hundred buttons on it and it hung for a few minutes when I tried to scroll). That sounds pretty crazy, so I'm going to assume this is something funky with my configuration and not with Firefox.
Once I got past that, I'm really impressed with how well these animations perform.
(By the way, I haven't used the Firefox dev tools in a while, and they've come a long way! I'll switch back from chrome soon if they keep improving at this rate)
Performance was not quite on par with other CSS3 animations I have seen on my Nexus 4. I think part of the perceived performance issue may have been the artificial 300ms delay android adds after press/click.
Didn't experience that myself. It isn't native looking, but a good 80-90% of the transitions were acceptable. Lists were rough, but not unusable. [iPhone 4S]
I love the blur behind modal. On my Chrome the blur effect starts after the modal is displayed. I suggest that you make it progressive, inside the same animation as the background turning to gray (not sure it's possible though).
A little bit of background on Effeckt: The idea is we need reusable transitions and animations [0], all classy but most importantly they must perform well on mobile. The project is still very much a WIP, and as some comments below indicate, there are still janky interactions that are unacceptable. We're looking at integrating something like Topcoat's Benchmark server [1] to have CI setup for CSS performance regression testing. Identify and improve (or cull) any effects that are inappropriately slow.
The project started over on lazyweb-requests [2] and Chris Coyier has led development of the project from early on. It's a very open and community-driven project, so there are plenty of opportunities for everyone to get involved and move things. Lastly, the readme [3] helps explain a lot of the goals and ideas of the project.
99 comments
[ 4.4 ms ] story [ 97.5 ms ] threadIt's the combination of -webkit-transform and -webkit-backface-visibility that causes the blurriness. Wild guess: those attributes turn on 3D acceleration, and rendering is incorrectly offset by .5 pixels.
http://24ways.org/2010/intro-to-css-3d-transforms/
This library looks great!
I love open source.
How long until people start using similar effects to turn their single-page web app into a multi-page web app? Similar to Linux 3D desktop, compiz and the like.
[1] http://jmpressjs.github.io/jmpress.js/
This has been generally true in my experience playing with CSS animations. Are there any tricks to optimize stuff like this in Firefox, or is it just an area where Chromium is still way far ahead in performance?
I didn't experience any jankiness and wasn't able to find anything by profiling either.
Once I got past that, I'm really impressed with how well these animations perform.
(By the way, I haven't used the Firefox dev tools in a while, and they've come a long way! I'll switch back from chrome soon if they keep improving at this rate)
I'm using current Nvidia closed driver with a mobile chipset.
Pretty dope though, that from top=>tilt fall was pretty exciting
I've been playing around with an animation concept for submitting a note: http://dhotson.github.io/envelope/ .. is it too much? :-)
(unlike zepto, which uses the evil __proto__)
Amazing that a 800mz processor in old time could run complex 3d-games, but changing DOM and CSS seems to be much harder calculations...
Still there is the elephant-in-the-room 300ms issue, but overall impressive effort, we need more of this...
There's a bit of jankiness on the modals though, as the scrollbar disappears when the modal appears, which causes a reflow of the page body.
The project started over on lazyweb-requests [2] and Chris Coyier has led development of the project from early on. It's a very open and community-driven project, so there are plenty of opportunities for everyone to get involved and move things. Lastly, the readme [3] helps explain a lot of the goals and ideas of the project.
[0] http://youtu.be/Qc40YDFA4Bg
[1] http://bench.topcoat.io/
[2] https://github.com/h5bp/lazyweb-requests/issues/122
[3] https://github.com/h5bp/Effeckt.css#readme
Why is that?