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.
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.
I understand that this sort of thing isn't for everyone, but the level of trolling negativity in this thread is on par with Slashdot.
If you are somehow disappointed that clicking on a link to something that defines itself as CSS Effects (it's there in the name) and you ended up on a page with CSS animations...you are a clod.
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.
Looks neat, but some of these animations run pretty slow on my i7 running Chromium on Linux. I've got an Radeon 5870 with proprietary drivers, and I understand that Chromium's acceleration situation is weird, but I guess I was discouraged to see it struggle.
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.
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)
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).
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.
This is amazing. As a form of thank you let me share a glitch which I noticed on latest Chrome in Windows 8 http://i.imgur.com/bRHRBK6.jpg As you can see there are no scrollbars for the lists and weird artifact is visible on the middle list. This doesn't happen on IE 10. Also,some of the effects start with a noticeable delay (but work smoothly).
"Ever notice how small flourishes and subtle transitions dramatically increases the value of the experience you enjoy with an app or site?"
I agree that a very slight fade or slide can help reduce the jarring effect of a contextual transition (such as the appearance of a modal, or a menu), but what value is added by the not-so-subtle effects like the 3D transforms (that incidentally cripple mobile devices and older browsers)?
There's no value. It's basically junk food. Once someone comes up with the chemical/library, it's easy to include them in your product. It's noticeable, users like it, it provides straightforward talking points for any press ("beautiful"), it's an easy sell.
But there's no substance. I don't know about others, but when I read a physical book it's not for the page turn experience.
Pretty much any CSS3 rendering on Chrome sucks. Both on their mobile as well as desktop browser. I've really been let down on how bad embedded fonts look and how poorly transitions, opacity and other CSS3 properties work.
I'm still perplexed on why they haven't figured this out when Firefox doesn't seem to have the same issues.
Side comment: one problem with modern web apps is JavaScript bloat. And one pressure on libraries is to keep growing. These two things seem to be at odds. It would be nice if someone created some kind of { CSS, js, HTML } build system that allows components to be built and packages separately.
Well, component.io (http://component.io) is such a system. You have a choice of routers (page.js is a very express-like option that works well), and you can pick and choose what other components to build into your application.
Components are self-contained packages of html/css/js based on CommonJS modules and compiled using node.
I use grunt-component-build along with grunt-contrib-watch to rebuild the css/js files on each change.
I've been using W3C standards (DOM) as much as possible to keep third-party dependencies at a minimum, with shimming where required for cross browser support.
An effects library that doesn't require jQuery would be a good addition to that environment. (Nothing against jQuery, but I want to leave out a selector engine on platforms that don't need it and just use the support in the browser.)
I think he means being able to pick and choose exactly what part of libraries one would need; with something like jquery most sites are only using a fraction of jquery methods
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]
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