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 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.)
[+] [-] paulirish|12 years ago|reply
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
[+] [-] dclowd9901|12 years ago|reply
I love open source.
[+] [-] sker|12 years ago|reply
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.
[+] [-] ChikkaChiChi|12 years ago|reply
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.
[+] [-] tnash|12 years ago|reply
[+] [-] adamzegelin|12 years ago|reply
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.
[+] [-] mtarnovan|12 years ago|reply
[+] [-] narrowingorbits|12 years ago|reply
[+] [-] fady|12 years ago|reply
[+] [-] gtaylor|12 years ago|reply
[+] [-] egonschiele|12 years ago|reply
This library looks great!
[+] [-] dhotson|12 years ago|reply
I've been playing around with an animation concept for submitting a note: http://dhotson.github.io/envelope/ .. is it too much? :-)
[+] [-] kaushikt|12 years ago|reply
[+] [-] tokenizerrr|12 years ago|reply
[+] [-] glogla|12 years ago|reply
[+] [-] ChikkaChiChi|12 years ago|reply
[+] [-] weavie|12 years ago|reply
[+] [-] general_failure|12 years ago|reply
[+] [-] jarek|12 years ago|reply
[+] [-] mxxx|12 years ago|reply
[+] [-] Kiro|12 years ago|reply
Why is that?
[+] [-] stayclassytally|12 years ago|reply
[+] [-] RodericDay|12 years ago|reply
:(
[+] [-] kbrackbill|12 years ago|reply
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?
[+] [-] agildehaus|12 years ago|reply
[+] [-] shmerl|12 years ago|reply
I'm using current Nvidia closed driver with a mobile chipset.
[+] [-] mnemonik|12 years ago|reply
I didn't experience any jankiness and wasn't able to find anything by profiling either.
[+] [-] bsaul|12 years ago|reply
[+] [-] jalada|12 years ago|reply
[+] [-] mrinterweb|12 years ago|reply
[+] [-] kaushikt|12 years ago|reply
Amazing work you guys. Fork - Contribute
[+] [-] jcomis|12 years ago|reply
[+] [-] ArekDymalski|12 years ago|reply
[+] [-] eterpstra|12 years ago|reply
"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)?
[+] [-] jarek|12 years ago|reply
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.
[+] [-] emehrkay|12 years ago|reply
[+] [-] at-fates-hands|12 years ago|reply
I'm still perplexed on why they haven't figured this out when Firefox doesn't seem to have the same issues.
[+] [-] drawkbox|12 years ago|reply
[+] [-] dbaupp|12 years ago|reply
[+] [-] wingerlang|12 years ago|reply
[+] [-] eob|12 years ago|reply
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.
[+] [-] tmzt|12 years ago|reply
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.)
[+] [-] skw|12 years ago|reply
[+] [-] tehwebguy|12 years ago|reply
Do you think it has to do with the number of elements on the content page? I'll make another demo to test it out later, just on my phone now.